validation插件

1、项目下载地址：http://plugins.jquery.com/validation/

2、引入

<script type="text/javascript" src="${base}/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="${base}/js/jquery.validate.js"></script>
<script type="text/javascript" src="${base}/js/messages_zh.js"></script>

3、form元素

<form id="myform" method="post" action="#" enctype="application/x-www-form-urlencoded">
    <fieldset>
        <legend>表单验证示例</legend>
        <p>
            <label for="name">姓名：</label><em>*</em>
            <input id="name" name="name" type="text" size="30"/>
        </p>
        <p>
            <label for="password">密码：</label><em>*</em>
            <input id="password" name="password" type="password" size="30"/>
        </p>
        <p>
            <label for="password">密码：</label><em>*</em>
            <input id="password2" name="password2" type="password" size="30"/>
        </p>
        <p>
            <label for="email">电子邮件：</label><em>*</em>
            <input id="email" name="email" size="30"/>
        </p>
        <p>
            <input id="submit" type="submit" />
            <input id="reset" type="reset" />
        </p>
    </fieldset>
</form>

4、验证

<script type="text/javascript">
    $(function(){
        $("#myform").validate({
            rules:{
                name:{
                    required:true,
                    minlength:3
                },
                password:{
                    required:true,
                    minlength:6
                },
                password2:{
                    required:true,
                    minlength:6,
                    equalTo:'#password'
                },
                email:{
                    required:true,
                    email:true
                }                
            },
            messages:{
                name:{
                    required:"名称必填",
                    minlength:'长度最小为3'
                },
                password:{
                    required:"密码必填",
                    minlength:'长度最小为6'
                },
                password2:{
                    required:"密码必填",
                    minlength:'长度最小为6',
                    equalTo:'两次输入不一致'
                },
                email:{
                    required:"邮件地址必填",
                    email:'必须是邮件地址'
                }
            }
        });
    });
</script>

5、添加自定义验证规则

// http://docs.jquery.com/Plugins/Validation/Validator/addMethod
    addMethod: function( name, method, message ) {
        $.validator.methods[name] = method;
        $.validator.messages[name] = message !== undefined ? message : $.validator.messages[name];
        if ( method.length < 3 ) {
            $.validator.addClassRules(name, $.validator.normalizeRule(name));
        }
    }

示例，增加☎验证

$.validator.addMethod("isMobile", function(value, element) {
     //判断是不是手机号码
     var length = value.length;
     var mobile = /^(1[3,5,8][0-9]{9})$/;
     return this.optional(element) || (length ==11 && mobile.test(value));
 },'请输入正确的电话号码');

...
mobile:{
    required:true,
    isMobile:true
},
...

<p>
    <label for="mobile">手机：</label><em>*</em>
    <input id="mobile" name="mobile" width="50"/>
</p>

function有3个参数，第3个为传过来的param，可选
6、说明

引入messages_zh.js可以将默认的验证转变为中文，可以自定义验证错误信息messages，也可以将其写入messages_zh.js中

默认校验规则
(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)number:true 必须输入合法的数字(负数，小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10

required:true 必填项
required:"#aa:checked"当表达式的值为真时需要验证
required:function(){}返回为真时需要验证
后边两种常用于表单中存在同时填或不填的元素