您的位置：首页 > Web前端 > JavaScript

JavaScript之判断用户登录信息

2015-07-22 23:17 603 查看
1.今天来介绍一下如何使用JavaScript脚本语言来判断用户登录信息，在我学struts2时，就有输入校验和拦截器来实现判断用户登录时，输入的用户信息是否完整，输入的用户信息是否符合用户的要求等等。这里，先附上图，当我们用户名和密码都没输时，点击登录按钮，弹出下列对话框，点击确定后焦点指定到用户名这个文本框中：



当我们输入用户名，没输入密码时，出现下图：



点击对话框里的确定按钮之后，焦点指定到密码框中，其中用户名和密码都输入，再点击登录按钮将会跳转到一个页面，点击重置按钮，即输入框的内容清空。

2.虽然很简单，但是大家根据下面的代码学习一下，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>应用if语句判断用户登录信息</title>
<script language="javascript">
function chkinput(form)//定义一个函数
{
	if(form.username.value=="")//通过if语句判断用户名是否为空
	{
		alert("请输入用户名!");//如果为空弹出提示消息
		form.username.focus();//返回指定位置
		return false;
	}
	if(form.password.value=="")//通过if语句判断密码是否为空
	{
		alert("请输入密码！");//如果为空弹出提示消息
		form.password.focus();//返回指定位置
		return false;
	}
	return true;
}
</script>
</head>

<body>
<table>
<!-- 表单里有一属性onsubmit,即点击表单下类型为submit时(即点击登录按钮)都会返回上面JavaScript里的chkinput(form)方法，其中这里的this即指这个表单 ，如果返回值为true，成功跳转到index.html页面，如果返回值为false，弹出相应的对话框-->
<form method="post" action="index.html" onsubmit=" return chkinput(this)">
  <tr>
    <td>用户名：</td>
    <td><input type="text" name="username" size="22"/></td>
  </tr>
  <tr>
    <td>密    码：</td>
    <td><input type="password" name="password" size="22"/></td>
  </tr>
  <tr>
    <td colspan="2" align="center"><input type="submit" value="登录"/>  <input type="reset" value="重置"/></td>
  </tr>
  </form>
</table>
</body>
</html>


3.接下来对上述代码进行解释，虽然写了注释：

首先，大家看JavaScript代码，即<script></script>之间的代码，其中有一个函数chkinput(form)，此函数带一个参数form，此参数类型未知，即为undefined未定义型，其中在表单<form>标记里的onsubmit=" return chkinput(this)，即这个参数form为这个表单，再通过if语句进行判断，form.username.value这里就相当于上面第2点的<body>主体部分的表单下的用户名输入文本框(text)的name属性值，判断这个属性值是否为空，为空就弹出对话框，并利用focus()方法返回指定位置，即使焦点移向用户名文本框，返回值为false，即不能正常跳转到表单指定的index.html，其中再判断表单里的密码值是否为空，和判断用户名的逻辑类似，最后，当用户名和密码都不为空时，正常跳转到表单action属性指定的index.html界面，点击重置按钮便清空输入的文本框和密码框。

4.以上内容仅供大家学习参考，写得不好，请见谅，如有错误，请指出，谢谢！大家也可以根据上面代码修改一下，可以判断用户名的内容是否为你的用户名，密码是否为你的密码，可以改一改，实践一下吧，我也是初学的！


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航