1、在登录、注册时，我们经常会遇到下面这种情况，如果我们没有输入用户名、密码时，系统会弹出提示框。提示框信息提示内容是我们密码没有输入密码或者用户名等。那么这样的弹出框效果是如何实现的呢？文章标题既然与js有关，那么我们就用js来实现这个功能，当然实现此功能的还有其他方法，在这里我用js去实现。

2、用表格布局先布局一个简单的html表单页面：

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>js验证表（是否输入单用户名、密码）</title>

    <style type="text/css">

        *{padding: 0;margin: 0}

        table{margin:0  auto;margin-top: 200px}

    </style>

</head>

<body>

<form name="form1" method="post" action=""><!--这里用js实现跳转-->

    <table cellpadding="0" cellspacing="0" border="0">

        <tr>

            <td height="50" colspan="2" bgcolor="#eeeeee" align="center">用户登录</td>

        </tr>

        <tr>

            <td width="70" height="50">用户名：</td>

            <td><input name="user" type="text" id="user" maxlength="8"><!--8指的是8个汉字，8个字符--></td>

        </tr>

        <tr>

            <td width="70" height="50">密&nbsp;码：</td>

            <td><input name="pwd" type="password" id="pwd" maxlength="16"></td>

        </tr>

        <tr>

            <td colspan="2" align="center">

                <input name="reset" type="reset" value="重置">

                <input name="button" type="button" value="登录" onclick="check()">

           </td>

        </tr>

    </table>

</form>

<script language="JavaScript" type="text/javascript" src="demo.js"></script>

</body>

</html>

html页面效果图：

然后新建js文件：demo.js，代码如下：

function check() {
    var user_name=form1.user.value;//获取表单form1的用户名的值
    var user_pwd=form1.pwd.value;//获取表单form1密码值
    if((user_name=="")||(user_name==null)){//判断用户名是否为空，为空就弹出提示框"请输入用户名"，否则正常执行下面的代码。
        alert("请输入用户名！");
        form1.user.focus();//获取焦点，即：鼠标自动定位到用户名输入框，等待用户输入用户名。
        return;
    }
    else if((user_pwd=="")||(user_pwd==null)){//判断密码是否为空，为空就弹出提示框"请输入密码"，否则正常执行下面的代码。
        alert("请输入密码！");
        form1.pwd.focus();//获取焦点。
        return;}
    else {//如果用户名、密码都正常输入，则提交表单，浏览器经打开新的（主页）窗口。
        form1.submit();
        // window.location.href="http://baidu.com/";
        window.open("http://www.cnblogs.com/qikeyishu/");
    }
}
 

效果图：

分析：在这里我们运用了常见的if判断语句只需对用户名、密码设定不能为null(空)进行判定，即可实现此功能。

js验证表单密码、用户名是否输入--JS的简单应用的更多相关文章

  1. js验证表单大全

    js验证表单大全 1. 长度限制 <script> function test() { if(document.a.b.value.length>50) { alert(" ...

  2. jquery.validate.js 验证表单时，在IE当中未验证就直接提交的原因

    jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...

  3. js 验证表单 js提交验证类

    附加:js验证radio是否选择 <script language="javascript">function checkform(obj){for(i=0;i< ...

  4. js验证表单大全3

    2 >表单提交验证类  2.1 表单项不能为空 <scriptlanguage="javascript"> <!-- function CheckForm( ...

  5. js验证表单大全1

    附加:js验证radio是否选择 <script language="javascript"> function checkform(obj) { for(i=0;i& ...

  6. js验证表单大全2

    屏蔽右键 很酷  oncontextmenu="return false" ondragstart="return false"onselectstart=&q ...

  7. js验证表单并提交

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. js验证表单

    在日常生活中,对于上班时间比较灵活的单位来说,如何能够及时.准确地令公司员工了解自己的上班时间是一个棘手的问题.公司管理人员不会一个挨一个地打电话通知,难免总有员工会弄错自己的上班时间.这样,可以求助 ...

  9. js实现表单验证 常用JS表单验证

    CSS代码 @charset "gb2312"; /* CSS Document */ body,dl,dt,dd,div,form {padding:;margin:;} #he ...

随机推荐

  1. CMT2300 收发一体 SUB 1G 支持灵活选频

    CMT2300A 是一款超低功耗,高性能,适用于各种140 至1020 MHz 无线应用的OOK,(G)FSK 射频收发器.它是CMOSTEK NextGenRFTM 射频产品线的一部分,这条产品线包 ...

  2. nodeJS之二进制buffer对象

    前面的话 在ES6引入TypedArray之前,JavaScript语言没有读取或操作二进制数据流的机制.Buffer类被引入作为Nodejs的API的一部分,使其可以在TCP流和文件系统操作等场景中 ...

  3. 一天搞定HTML----常用标签01

    1.常用标签说明 2.其他类标签演示 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  4. Ch2. Loop Structure

    Ex Input some integers and output their min, max and average values (keep three decimal places). It ...

  5. cpp(第五章)

    1.副作用,指的是在计算表达式时对某些东西(如存储在变量的值)进行修改:顺序点,是程序执行过程中的一个点,在这里,进入下一步之前将确保对所有的副作用 都进行评估.(分号就是一个顺序点).for exa ...

  6. springMVC实现REST开发详解（补充Json解析问题以及静态文件404错误解决办法）

    一.什么是REST? 符合REST约束风格和原则的应用程序或者设计就是REST 例如: /blog/1   HTTP GET    =>查询id=1的blog /blog/1   HTTP DE ...

  7. 11.并发包阻塞队列之LinkedBlockingQueue

    在上文<10.并发包阻塞队列之ArrayBlockingQueue>中简要解析了ArrayBlockingQueue部分源码,在本文中同样要介绍的是Java并发包中的阻塞队列LinkedB ...

  8. [BZOJ4008]亚瑟王

    Description 小 K 不慎被 LL 邪教洗脑了,洗脑程度深到他甚至想要从亚瑟王邪教中脱坑. 他决定,在脱坑之前,最后再来打一盘亚瑟王.既然是最后一战,就一定要打得漂 亮.众所周知,亚瑟王是一 ...

  9. 通过ajax前端后台交互/登录页和注册页前端后台交互详解/前端后台交互基础应用/几个后台函数的基础应用/php文件函数基础应用/php字符传函数基础应用/php数组函数基础应用

      前  言  PHP     学习了好久的PHP,今天做一个可以后台交互的登录页和注册页,没做什么判断,简单的了解一下. 具体的内容分析如下: ① PHP中的数据传输-->>由注册页传输 ...

  10. Python原理 -- 内存管理

    语言的内存管理是语言设计的一个重要方面. 它是决定语言性能的重要因素. 无论是 c语言 的手工管理, 还是 Java 的垃圾回收, 都成为语言最重要的特种. 以下以 python 为例, 说明一门动态 ...