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

本文主要是介绍文盲的 JavaScript 实战篇之一：表单验证，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

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

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

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

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

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

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

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

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

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

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

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

     function checkForm(){
        // 首先校验传递进来的参数数量
        if (!arguments.length){
            alert('异常的参数数量！');
            return false;
        }
        var frm = arguments[0];
        // 其次校验传递进来的参数是否符合标准
        if (!frm.elements){
            alert('第一个参数必须是表单！');
            return false;
        }
        return false;
    }
 

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

JavaScript：

     function checkForm(){
        // 首先校验传递进来的参数数量
        if (!arguments.length){
            alert('异常的参数数量！');
            return false;
        }
        var frm = arguments[0];
        // 其次校验传递进来的参数是否符合标准
        if (!frm.elements){
            alert('第一个参数必须是表单！');
            return false;
        }
        if (((arguments.length - 1) % 3)||(arguments.length / 3 < 1)){
            alert('异常的参数数量！/n/n参数格式如下：/n/ncheckForm(this/n    ,"elementName","ExpStr","alertWords"/n    [,"elementName","ExpStr","alertWords"/n    [,....]])');
            return false;
        }
        for (var i = 0 ; i < arguments.length /3 ; i ++ ){
            var el = frm.elements[arguments[i * 3 + 1]];
            if (!el){   // 校验传递进来的控件是否存在
                alert('表单中不存在 name 为 "' + arguments[i * 3 + 1] + '" 的控件！');
                return false;
            }
            var cf = frm.elements[arguments[i * 3 + 2]];
            if (cf){   // 判断传递进来的参数是否为控件
                if (cf.value!=el.value){
                    alert(arguments[i * 3 + 3]);
                    el.focus();
                    return false;
                }
            }else{
                var re = RegExp(arguments[i * 3 + 2],'gi');
                if (!re.test(el.value)){   // 对控件值进行正则匹配
                    alert(arguments[i * 3 + 3]);
                    el.focus();
                    return false;
                }
            }
        }
        return true;
    }
 

HTML：

 <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地址。');">
    <li>用 户 名：<input type="text" name="uid" /></li>
    <li>登录密码：<input type="password" name="pwd" /></li>
    <li>确认密码：<input type="password" name="cpwd" /></li>
    <li>注册信箱：<input type="text" name="mail" /></li>
    <li><input type="submit" value="立刻注册" /></li>
</form>
 