文盲的 JavaScript 实战篇之一：表单验证

在我们的日常工作中，经常为各种页面撰写不同的表单，并且，需要对表单提交时，表单所输入的内容进行验证，比如，登录时，用户名不能为空、注册时，密码长度和复杂程度要符合安全标准等。

1. <form name="theForm" method="post" action="actionUrl">
2.     <li>用 户 名：<input type="text" name="uid" /></li>
3.     <li>登录密码：<input type="password" name="pwd" /></li>
4.     <li>确认密码：<input type="password" name="cpwd" /></li>
5.     <li>注册信箱：<input type="text" name="mail" /></li>
6.     <li><input type="submit" value="立刻注册" /></li>
7. </form>

如上，就是一个最简单的注册表单，那么我们怎么对这个表单进行验证呢？

第一个选择就是，在什么时候验证，我们有以下几种选择

1、在输入数据时进行验证
2、在点击提交按钮时进行验证
3、在表单提交时进行验证

这里猛一看，第二项与第三项没有区别，其实是完全不同的，点击 submit 按钮是可以与第三项看做同一个动作，但如果表单中有这样一个按钮呢？

1. <input type="button" value="submit" onclick="theForm.submit()" />

这样，就可以绕过第二项了，但第三项却可以捕捉到这个动作，因为他同样是提交动作。

而第一个选择，就需要对每一个输入控件进行 onchange 或者 onblur 的监控，并且需要在页面内出现校验结果，操作比较麻烦，这里就不再进行讨论。

这里我们先进行第三项的讨论

那么，如何实现第三项方法呢，我们把 form 标签进行一下修饰

1. <form name="theForm" method="post" action="actionUrl" onsubmit="return checkForm(this);">

这个时候，当这个表单发生提交的时候，他就会运行 checkForm 这个函数，并且将表单本身作为对象参数传递给 checkForm 这个函数了。关于arguments请参阅文盲的 JavaScript 经验谈之三：认识 arguments。

1.     function checkForm(){
2.         // 首先校验传递进来的参数数量
3.         if (!arguments.length){
4.             alert('异常的参数数量！');
5.             return false;
6.         }
7.         var frm = arguments[0];
8.         // 其次校验传递进来的参数是否符合标准
9.         if (!frm.elements){
10.             alert('第一个参数必须是表单！');
11.             return false;
12.         }
13.         return false;
14.     }

这个时候并没有对表单内的数据进行校验，我们把需要校验的内容同样作为参数传递个校验函数，代码如下

JavaScript：

1.     function checkForm(){
2.         // 首先校验传递进来的参数数量
3.         if (!arguments.length){
4.             alert('异常的参数数量！');
5.             return false;
6.         }
7.         var frm = arguments[0];
8.         // 其次校验传递进来的参数是否符合标准
9.         if (!frm.elements){
10.             alert('第一个参数必须是表单！');
11.             return false;
12.         }
13.         if (((arguments.length - 1) % 3)||(arguments.length / 3 < 1)){
14.             alert('异常的参数数量！/n/n参数格式如下：/n/ncheckForm(this/n    ,"elementName","ExpStr","alertWords"/n    [,"elementName","ExpStr","alertWords"/n    [,....]])');
15.             return false;
16.         }
17.         for (var i = 0 ; i < arguments.length /3 ; i ++ ){
18.             var el = frm.elements[arguments[i * 3 + 1]];
19.             if (!el){   // 校验传递进来的控件是否存在
20.                 alert('表单中不存在 name 为 "' + arguments[i * 3 + 1] + '" 的控件！');
21.                 return false;
22.             }
23.             var cf = frm.elements[arguments[i * 3 + 2]];
24.             if (cf){   // 判断传递进来的参数是否为控件
25.                 if (cf.value!=el.value){
26.                     alert(arguments[i * 3 + 3]);
27.                     el.focus();
28.                     return false;
29.                 }
30.             }else{
31.                 var re = RegExp(arguments[i * 3 + 2],'gi');
32.                 if (!re.test(el.value)){   // 对控件值进行正则匹配
33.                     alert(arguments[i * 3 + 3]);
34.                     el.focus();
35.                     return false;
36.                 }
37.             }
38.         }
39.         return true;
40.     }

HTML：

1. <form name="theForm" method="post" action="actionUrl" onsubmit="return checkForm(this,'uid','^[a-zA-Z0-9]{3,8}$','用户名只能有字母、数字组成，长度必须在 3 到 8 位。','pwd','^[//s//S]{6,16}$','密码可以由任意字符组成，长度为 6 到 16 位。','cpwd','pwd','确认密码与登录密码不一致。','mail','^[//w.-]+@([0-9a-z][//w-]+//.)+[a-z]{2,3}$','请输入合法的Email地址。');">
2.     <li>用 户 名：<input type="text" name="uid" /></li>
3.     <li>登录密码：<input type="password" name="pwd" /></li>
4.     <li>确认密码：<input type="password" name="cpwd" /></li>
5.     <li>注册信箱：<input type="text" name="mail" /></li>
6.     <li><input type="submit" value="立刻注册" /></li>
7. </form>

这里是使用正则进行判断，checkForm 的第一个参数是表单本身，然后按照三个一组的规律，分别传递控件名、校验正则、校验失败提示语，或者是控件名、控件名、校验失败提示语。

如此一来，我们的表单校验就基本上完成了。