JavaScript之判断用户登录信息

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" οnsubmit=" 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>标记里的οnsubmit=" return chkinput(this),即这个参数form为这个表单,再通过if语句进行判断,form.username.value这里就相当于上面第2点的<body>主体部分的表单下的用户名输入文本框(text)的name属性值,判断这个属性值是否为空,为空就弹出对话框,并利用focus()方法返回指定位置,即使焦点移向用户名文本框,返回值为false,即不能正常跳转到表单指定的index.html,其中再判断表单里的密码值是否为空,和判断用户名的逻辑类似,最后,当用户名和密码都不为空时,正常跳转到表单action属性指定的index.html界面,点击重置按钮便清空输入的文本框和密码框。



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


  • 8
    点赞
  • 47
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,对于这个问题,我可以给出一些参考的思路和示例代码来帮助你实现用户登录网页的编写。你可以首先设计一个登录页面,包括用户名和密码的输入框,以及登录按钮。然后使用 JavaScript 代码来获取输入框中用户输入的内容,并且进行相关的验证和处理。例如,可以使用正则表达式来判断输入的用户名和密码是否符合要求,如长度、字符集、特殊字符等。如果验证通过,则可以将用户信息传递给后台服务器进行处理,并且根据服务器的返回结果来决定是否跳转到用户主页或者重新提示用户重新输入。以下是一个简单的 JavaScript 登录示例代码: ```javascript <html> <head> <title>用户登录页面</title> <script type="text/javascript"> function checkLogin() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; // 进行输入验证 if (username == "" || password == "") { alert("用户名或密码不能为空!"); return false; } // 向服务器发送登录请求 // TODO: 填写服务器端登录处理逻辑 return true; } </script> </head> <body> <h1>用户登录</h1> <form> <p> <label for="username">用户名:</label> <input type="text" id="username" name="username"> </p> <p> <label for="password">密码:</label> <input type="password" id="password" name="password"> </p> <p><input type="button" value="登录" onclick="return checkLogin()"></p> </form> </body> </html> ``` 当用户点击登录按钮时,会调用 checkLogin 函数,该函数会获取用户名和密码的输入值,并进行验证和服务器请求,最后返回登录结果。当登录失败时,会弹出提示框,让用户重新输入。当登录成功时,可以根据需要进行页面跳转等操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值