js验证表单密码、用户名是否输入--JS的简单应用

时间:2022-07-04 22:44:39

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验证表单密码、用户名是否输入--JS的简单应用

然后新建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/");
}
}
 

效果图:

js验证表单密码、用户名是否输入--JS的简单应用

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