jQuery Validate的使用发法和自定义验证方法的实现

1.插件简介

validate为表单提供了强大的验证功能，让客户表达验证变得简单。同时提供了大量的定制选项，满足应用程序的各种需求。

2.使用步骤

（1） 下载地址：`http://jqueryvalidation.org/`。
 按照顺序引入一下的js文件：

<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js" ></script>
<script src="js/messages_zh.js"></script>

（2）默认的校验规则：
1 required:true 必须输入的字段。
2 remote:”check.php” 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true必须输入正确格式的日期。日期校验 ie6 出错，慎用。
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。
这些属性的使用可以通过添加在标签或者js中来实现，在这之前要使用js让某个表单运用检验规则：$("#myform").validate();
在标签中使用也有两种方法
（1）<input type="text" name="name2" class="number required"/>
（2）<input type="text" name="name1" email="true"
required="true"/>
在js中使用

$('form[name=myform]').validate({
        rules:{
            name:{
                required:true,
                minlength:2,
                maxlength:10
            },
            tel:{
                required:true,
                minlength:7,
                maxlength:11,
                isMobile:true
            },
            company:{
                required:true,
                minlength:2
            },
            address:{
                required:true,
                minlength:2
            },
            city:{
                required:true,
            },
            service:{
                required:false
            },
            num:{
                required:true,
                number:true,
                range:[1,10000]
            }
        },
        messages:{
            name:{
                required:"最少为2个字！"
            },
            tel:{
                required:"请填写手机号码！",
                isMobile:"请填写11位的手机号码!"
            },
            company:{
                required:"公司名称最少为2个字符！"
            },
            address:{
                required:'请填写地址！'
            },
            city:{
                required:"请填写城市！"
            },
            num:{
                required:"请填写正确的拿货量！"
            }
        },
        errorPlacement:function(error,element){
            error.appendTo(element.next());
            //忽略自定义方法的错误提示
        if (error.text() == "ignore") {
           return '';
        }
        },
        errorElement:"span",
        submitHandler:function(form){

            $(form).ajaxSubmit({
                        url:"php/order.php",
                        type:"post",
                        success:function(){
                            // alert("提交成功！");
                            $(".shadow").show();
                            $(".confirm_btn").click(function(){
window.location.href="http://55927461.m.weimob.com/vshop/55927461/Index?PageId=513198&IsPre=1";
                            })
                        }
                    })
        }
    });

由于默认提示是英文的，所以使用的时候需要引用中文的包：<script src="messages_zh.js"></script>
或者自己写提示内容。$.validator.addMethod(name,function(){},”message”)
定义表单只验证不提交：debug:true;;
定义表单验证时的错误：input:error;label:error;
更改错误信息的提示位置：
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}
errorElement:”span”

自定义一些验证方法

1.手机号码的验证

//检测手机号是否正确  
jQuery.validator.addMethod("isMobile", function(value, element) {  
    var length = value.length;  
    var regPhone = /^1([3578]\d|4[57])\d{8}$/;  
    return this.optional(element) || ( length == 11 && regPhone.test( value ) );    
}, "请正确填写您的手机号码");  

2.汉字的验证

//检测用户姓名是否为汉字  
jQuery.validator.addMethod("isChar", function(value, element) {  
    var length = value.length;  
    var regName = /[^\u4e00-\u9fa5]/g;  
    return this.optional(element) || !regName.test( value );    
}, "请正确格式的姓名(暂支持汉字)");  

3.邮编的验证

//检测邮政编码  
jQuery.validator.addMethod("isZipCode", function(value, element) {    
    var tel = /^[0-9]{6}$/;  
    return this.optional(element) || (tel.test(value));  
}, "请正确填写您的邮政编码");  

使用的时候js添加新增的属性。
Validate+form.js提交表单数据，在submitHandler:function(){}方法中使用ajax方法提交数据时，php服务器语言并不能接受数据，可以结合jQuery.form.js来使用$(form).ajaxSubmit(){}`,服务器端可以通过`$_GET或者$_POST`的方法来接受前端传来的数据。