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

JavaScript之判断用户登录信息相关推荐

通过cookie保存并读取用户登录信息
浏览器将cookie以key/value的形式保存到客户机的某个指定目录通过cookie的getCookies()方法可获取所有cookie对象的集合通过cookie对象的getName()方法可 ...
通过cookie保存并读取用户登录信息实例
通过cookie的getCookies()方法可获取所有cookie对象的集合:通过getName()方法可以获取指定的名称的cookie:通过getValue()方法获取到cookie对象的值.另外 ...
Day212.OAuth2、微信二维码登入注册功能、用户登录信息前后端供、讲师列表前后端 -谷粒学院
谷粒学院 OAuth2的使用场景一.OAuth2解决什么问题 1.OAuth2提出的背景照片拥有者想要在云冲印服务上打印照片,云冲印服务需要访问云存储服务上的资源 2.图例资源拥有者:照片拥有者 ...
使用JSP实现简单的登录注册功能，并且使用Session跟踪用户登录信息
使用JSP实现简单的登录注册功能,并且使用了Session来跟踪用户的登录信息,这个是用纯JSP来实现此功能的,由于没有连接数据库,所以使用List来模拟数据库. 第一步:创建web项目如果有不会创 ...
【安卓】基于SharedPreferences实现用户登录信息的存储
1. 设计登录页面比较简单,重要的点就一个,有一个记住密码的按钮. 代码实现 <?xml version="1.0" encoding="utf-8"? ...
oracle通过sid远程登录,oracle怎么捕获用户登录信息，如SID，IP地址等
可以利用登录触发器,如 CREATE OR REPLACE TRIGGER tr_login_record AFTER logon ON DATABASE DECLARE miUserSid NUMB ...
如何在redhat8里使用gcc命令_如何使用who命令检查用户登录信息
请关注本头条号,每天坚持更新原创干货技术文章. 如需学习视频,请在微信搜索公众号"智传网优"直接开始自助视频学习 1. 前言本教程主要介绍如何使用who命令检查用户登录信息. 如 ...
用户修改了信息jwt服务器怎么识别,django使用JWT保存用户登录信息
什么是JWT? Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519).该token被设计为紧凑且安全的,特别适用于分布式站 ...
把discuzX 的用户登录信息添加到纯静态页面
把discuzX 的用户登录信息添加到纯静态页面转:http://cq6.com/forum.php?mod=viewthread&tid=86560&extra=page%3D1& ...

JavaScript之判断用户登录信息

JavaScript之判断用户登录信息相关推荐

最新文章

热门文章