通过JavaScript进行登录验证

在大部分页面的首页中，都会存在用户登录的输入框。当用户输入了个人信息后（一般为用户名和密码），页面的程序通过检索和验证，如果结果为真，则跳转到子页面，如果验证后结果为假，则提示重新输入信息。而这种验证的过程必须借助数据库以及网站开发的语言的支持。

首先请看下面的流程图，对这个验证的过程有一个初步的了解。

     用户在登录页面填写用户名和密码信息后，当点击提交按钮后，这些信息就会通过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>

 

     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）：

括号当被用于进行上下文的检测是有着特殊的意义，它被用来找到一段字符。

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

预定义

字符	等同于	描述
.	[^\n\r]	除了换行和回车之外的任意字符
\d	[0-9]	数字字符
\D	[^0-9]	非数字字符
\s	[ \t\n\x0B\f\r]	空白字符
\S	[^ \t\n\x0B\f\r]	非空白字符
\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。

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进行验证简单讲解，谢谢！