当前位置:
首页 > temp > JavaScript教程 >
-
教您如何用JavaScript进行登录验证
废话才说,直接上干货
首先请看下面的流程图,对这个验证的过程有一个初步的了解。
用户在登录页面填写用户名和密码信息后,当点击提交按钮后,这些信息就会通过Http协议传送到网站后台的验证程序中,验证程序接收这些信息,并做一些必要的处理后,运行一个SQL查询语言(验证程序事先已经和数据库建立了连接),调用后台的数据库,如果这个用户名和密码在数据库中有记录,则数据库返回的结果为true,此时验证程序判断查询的结果,如果为true,则进行页面跳转,这时客户端的页面就会跳转到一个真正的业务界面中;如果查询返回的结果为false,则验证程序不进行跳转,并给客户端的页面输出一个警告信息。
以上的全过程可以通过很多高级编程语言实现,比如PHP、Java等。但是需要后台数据库的支持,而且网站的服务器也需要配置数据库插件。这一方面服务器架构过于繁杂,更关键的是,对于一些小型网站来说,为了节省成本和提高访问速度,没有必要进行如此复杂的服务器配置。所以就引出了接下来的关于通过JavaScript脚本语言来进行登录信息的验证操作。
众所周知,JavaScript是一种脚本语言,即运行在客户端的程序语言。当用户打开浏览器,输入某个网站地址后,不仅仅下载的是网站的html文件,同时也会下载与这个html文档配套的 *.js 文件。这样当用户在点击页面的某些选项时页面才会做出正确的反应。
登录信息需要提交,在html页面中实现此功能借助的是表单标签。下面来看一段代码。
Html页面
首先请看下面的流程图,对这个验证的过程有一个初步的了解。
用户在登录页面填写用户名和密码信息后,当点击提交按钮后,这些信息就会通过Http协议传送到网站后台的验证程序中,验证程序接收这些信息,并做一些必要的处理后,运行一个SQL查询语言(验证程序事先已经和数据库建立了连接),调用后台的数据库,如果这个用户名和密码在数据库中有记录,则数据库返回的结果为true,此时验证程序判断查询的结果,如果为true,则进行页面跳转,这时客户端的页面就会跳转到一个真正的业务界面中;如果查询返回的结果为false,则验证程序不进行跳转,并给客户端的页面输出一个警告信息。
以上的全过程可以通过很多高级编程语言实现,比如PHP、Java等。但是需要后台数据库的支持,而且网站的服务器也需要配置数据库插件。这一方面服务器架构过于繁杂,更关键的是,对于一些小型网站来说,为了节省成本和提高访问速度,没有必要进行如此复杂的服务器配置。所以就引出了接下来的关于通过JavaScript脚本语言来进行登录信息的验证操作。
众所周知,JavaScript是一种脚本语言,即运行在客户端的程序语言。当用户打开浏览器,输入某个网站地址后,不仅仅下载的是网站的html文件,同时也会下载与这个html文档配套的 *.js 文件。这样当用户在点击页面的某些选项时页面才会做出正确的反应。
登录信息需要提交,在html页面中实现此功能借助的是表单标签。下面来看一段代码。
Html页面
<form action="accountManagement.jsp" method="post" onSubmit="return validate(this)">
Username:<input type="text" name="username"><br>
Password:<input type="password" name="password"><br>
<input type="submit" value="submit"><input type="reset" value="reset">
</form>
Username:<input type="text" name="username"><br>
Password:<input type="password" name="password"><br>
<input type="submit" value="submit"><input type="reset" value="reset">
</form>
JavaScript代码
var account=[["admin","aaa"],["master","mmm"],["leader","lll"]];
function validate(f){
var flag=false;
var username=f.username.value;
var password=f.password.value;
for(var x=0;x<account.length;x++){
if(account[x][0]==username&&account[x][1]==password){
flag=true;
}
}
if(!flag){
alert("Error !");
}
return flag;
}
在html代码中,表单form标签的一个属性为onSubmit,这个属性表示当点击提交按钮后所之行的操作,看到该属性的值是一个返回值,即return validate(this) 。这表示在提交后,其实还要执行一个validate()函数,如果这个函数的返回值为true,则页面跳转到accountManagement.jsp页面,如果函数返回值为false,则不予跳转,并弹出一个警告窗口,显示error的字样。
在JavaScript代码中,看到了一个二维数组,这就是通过JavaScript的方式来模拟一个数据库表,记录的是这个网站的所有用户名和与之对应的密码。这个validate()函数就是首先接收了表单中的username和password数据后,然后在这个二维数组中进行比对,如果有相同的记录,则返回true,否则为false。
另外,如果要想让这种方式正常运转,则还需要在html页面中加入一段代码,表示调用这个 *.js 文档,这样html页面才能找到validate()函数。
<script type="text/javascript" src="adminlogin.js"></script>
其中adminlogin.js就是这个validate()函数和二维数组所在的文件名。
以上解释的是如何验证用户输入的信息,主要的重点是程序运行的流程和代码的架构。还有另一个方面的事情也很重要,就是如何验证用户输入的信息是否符合格式的要求。例如一个输入框要求用户输入一个邮箱的名字,可是由于一些原因用户输入的时候没有键入@,那么在日后处理用户信息的时候,会造成数据的不完整和不可用,无形中产生了很多垃圾数据。记得有一个国外的高级程序员写的书中,讲用户输入比作“魔鬼”,因为你无法预知用户会如何输入。所以应该在最开始的时候就讲数据进行验证,以此来获得规范的可用的数据。
Html代码:
<form action="welcome.html" method="post" onSubmit="return validate(this)">
请输入邮箱地址:<input type="text" name="email">
<input type="submit" value="提交"><input type="reset" value="重写">
</form>
用来进行输入数据验证的代码仍然是上一节采用的JavaScript代码,不同的是,对代码的格式要通过正则表达式进行验证,正则表达式在很多语言中都在使用,是用来进行数据格式规范的重要手段。
下面介绍正则表达式。
括号(Brackets):
括号当被用于进行上下文的检测是有着特殊的意义,它被用来找到一段字符。
var account=[["admin","aaa"],["master","mmm"],["leader","lll"]];
function validate(f){
var flag=false;
var username=f.username.value;
var password=f.password.value;
for(var x=0;x<account.length;x++){
if(account[x][0]==username&&account[x][1]==password){
flag=true;
}
}
if(!flag){
alert("Error !");
}
return flag;
}
在html代码中,表单form标签的一个属性为onSubmit,这个属性表示当点击提交按钮后所之行的操作,看到该属性的值是一个返回值,即return validate(this) 。这表示在提交后,其实还要执行一个validate()函数,如果这个函数的返回值为true,则页面跳转到accountManagement.jsp页面,如果函数返回值为false,则不予跳转,并弹出一个警告窗口,显示error的字样。
在JavaScript代码中,看到了一个二维数组,这就是通过JavaScript的方式来模拟一个数据库表,记录的是这个网站的所有用户名和与之对应的密码。这个validate()函数就是首先接收了表单中的username和password数据后,然后在这个二维数组中进行比对,如果有相同的记录,则返回true,否则为false。
另外,如果要想让这种方式正常运转,则还需要在html页面中加入一段代码,表示调用这个 *.js 文档,这样html页面才能找到validate()函数。
<script type="text/javascript" src="adminlogin.js"></script>
其中adminlogin.js就是这个validate()函数和二维数组所在的文件名。
以上解释的是如何验证用户输入的信息,主要的重点是程序运行的流程和代码的架构。还有另一个方面的事情也很重要,就是如何验证用户输入的信息是否符合格式的要求。例如一个输入框要求用户输入一个邮箱的名字,可是由于一些原因用户输入的时候没有键入@,那么在日后处理用户信息的时候,会造成数据的不完整和不可用,无形中产生了很多垃圾数据。记得有一个国外的高级程序员写的书中,讲用户输入比作“魔鬼”,因为你无法预知用户会如何输入。所以应该在最开始的时候就讲数据进行验证,以此来获得规范的可用的数据。
Html代码:
<form action="welcome.html" method="post" onSubmit="return validate(this)">
请输入邮箱地址:<input type="text" name="email">
<input type="submit" value="提交"><input type="reset" value="重写">
</form>
用来进行输入数据验证的代码仍然是上一节采用的JavaScript代码,不同的是,对代码的格式要通过正则表达式进行验证,正则表达式在很多语言中都在使用,是用来进行数据格式规范的重要手段。
下面介绍正则表达式。
括号(Brackets):
括号当被用于进行上下文的检测是有着特殊的意义,它被用来找到一段字符。
Expression | Description |
[...] | Any one character between the brackets. |
[^...] | Any one character not between the brackets. |
[0-9] | It matches any decimal digit from 0 through 9. |
[a-z] | It matches any character from lowercase a through lowercase z. |
[A-Z] | It matches any character from uppercase A through uppercase Z. |
[a-Z] | It matches any character from lowercase a through uppercase Z. |
原则上正则表达式是一个字符对应数据的一个字符,也可以用括号讲正则表达式括起来,表示括号里的字符对应数据的一个字符。
alert(/ruby/.test("ruby"));//true 一一对应
alert(/[abc]/.test("a"));//true 含有a或者b或者c
alert(/[abc]/.test("b"));//true 同上
alert(/[abc]/.test("c"));//true 同上
另外的一种情况是,表示数据不能匹配正则表达式中括号里的规则。
alert(/[^abc]/.test("a"));//false
alert(/[^abc]/.test("b"));//false
alert(/[^abc]/.test("6"));//true
alert(/[^abc]/.test("gg"));//true
还可以把一个范围的正则规则放在中括号里
alert(/[a-f]/.test("b"));//true
alert(/[a-f]/.test("k"));//false
alert(/[a-z]/.test("h"));//true
alert(/[A-Z]/.test("gg"));//false
alert(/[^H-Y]/.test("G"));//true
alert(/[0-9]/.test("8"));//true
alert(/[^7-9]/.test("6"));//true
预定义
字符 | 等同于 | 描述 |
. | [^ ] | 除了换行和回车之外的任意字符 |
d | [0-9] | 数字字符 |
D | [^0-9] | 非数字字符 |
s | [ ] | 空白字符 |
S | [^ ] | 非空白字符 |
w | [a-zA-Z_0-9] | 单词字符(所有的字母) |
W | [^a-zA-Z_0-9] | 非单词字符 |
alert(/d/.test("3")); //true
alert(/d/.test("w")); //false
alert(/D/.test("w")) ; //true
alert(/w/.test("w")); //true
alert(/w/.test("司")); //false
alert(/W/.test("徒")); //true
alert(/s/.test(" ")); //true
alert(/S/.test(" ")); //false
alert(/S/.test("正")); //true
alert(/./.test("美")); //true
alert(/./.test(" ")); //true
量词(Quantifiers)
检测字符串中拥有指定的字符的个数,如果满足个数的要求,则为true,否则为false。
alert(/d/.test("w")); //false
alert(/D/.test("w")) ; //true
alert(/w/.test("w")); //true
alert(/w/.test("司")); //false
alert(/W/.test("徒")); //true
alert(/s/.test(" ")); //true
alert(/S/.test(" ")); //false
alert(/S/.test("正")); //true
alert(/./.test("美")); //true
alert(/./.test(" ")); //true
量词(Quantifiers)
检测字符串中拥有指定的字符的个数,如果满足个数的要求,则为true,否则为false。
Expression | Description |
p+ | It matches any string containing at least one p. |
p* | It matches any string containing zero or more p's. |
p? | It matches any string containing one or more p's. |
p{N} | It matches any string containing a sequence of N p's |
p{2,3} | It matches any string containing a sequence of two or three p's. |
p{2, } | It matches any string containing a sequence of at least two p's. |
p$ | It matches any string with p at the end of it. |
^p | It matches any string with p at the beginning of it. |
经过以上的正则表达式规范的介绍,我们可以试着写一段验证邮箱地址的验证程序
<script type="text/javascript">
function validate(form) {
var flag = false;
var email = form.email.value;
if ("" == email || email == null) {
alert("邮箱地址不能为空");
form.email.focus();
flag = false;
} else {
if (/^(w)+@(w)+((.(w){2,3}){1,2})$/.test(email)) {
alert("符合规范");
flag = true;
} else {
alert("错误的邮箱格式");
form.email.focus();
flag = false;
}
}
return flag;
}
</script>
其中的关键代码是/^(w)+@(w)+((.(w){2,3}){1,2})$/,这就是用来验证邮箱地址格式的正则表达式。
上图中的 .(w){2,3} 其实表示的是这样的一些例子,比如 .com .cn .org .163等等,然后用括号包起来成为(.(w){2,3}),后面跟上{1,2},就表示.com .cn .org .163等等出现1次或者2次。因为有些邮箱的写法是XXX@XXX.com,而有些邮箱写法是这样的XXX@XXX.com.cn。
以上就是关于通过JavaScript进行验证简单讲解,谢谢!
<script type="text/javascript">
function validate(form) {
var flag = false;
var email = form.email.value;
if ("" == email || email == null) {
alert("邮箱地址不能为空");
form.email.focus();
flag = false;
} else {
if (/^(w)+@(w)+((.(w){2,3}){1,2})$/.test(email)) {
alert("符合规范");
flag = true;
} else {
alert("错误的邮箱格式");
form.email.focus();
flag = false;
}
}
return flag;
}
</script>
其中的关键代码是/^(w)+@(w)+((.(w){2,3}){1,2})$/,这就是用来验证邮箱地址格式的正则表达式。
上图中的 .(w){2,3} 其实表示的是这样的一些例子,比如 .com .cn .org .163等等,然后用括号包起来成为(.(w){2,3}),后面跟上{1,2},就表示.com .cn .org .163等等出现1次或者2次。因为有些邮箱的写法是XXX@XXX.com,而有些邮箱写法是这样的XXX@XXX.com.cn。
以上就是关于通过JavaScript进行验证简单讲解,谢谢!
栏目列表
最新更新
nodejs爬虫
Python正则表达式完全指南
爬取豆瓣Top250图书数据
shp 地图文件批量添加字段
爬虫小试牛刀(爬取学校通知公告)
【python基础】函数-初识函数
【python基础】函数-返回值
HTTP请求:requests模块基础使用必知必会
Python初学者友好丨详解参数传递类型
如何有效管理爬虫流量?
2个场景实例讲解GaussDB(DWS)基表统计信息估
常用的 SQL Server 关键字及其含义
动手分析SQL Server中的事务中使用的锁
openGauss内核分析:SQL by pass & 经典执行
一招教你如何高效批量导入与更新数据
天天写SQL,这些神奇的特性你知道吗?
openGauss内核分析:执行计划生成
[IM002]Navicat ODBC驱动器管理器 未发现数据
初入Sql Server 之 存储过程的简单使用
SQL Server -- 解决存储过程传入参数作为s
关于JS定时器的整理
JS中使用Promise.all控制所有的异步请求都完
js中字符串的方法
import-local执行流程与node模块路径解析流程
检测数据类型的四种方法
js中数组的方法,32种方法
前端操作方法
数据类型
window.localStorage.setItem 和 localStorage.setIte
如何完美解决前端数字计算精度丢失与数