Validation 表单验证 插件 jQuery 验证 数字 日期

一、validate是jQuery的一个表单验证插件，它不仅实现了客户端表单的多种验证规则，而且，还是用ajax实现了服务器端远程验证。它内置有多种验证规则，同时，可以很方便的定义自己的规则。在此，说明一些常用的功能，详细的介绍，可以参考官方文档。http://docs.jquery.com/Plugins/Validation

validation插件使用很简单：
Javascript代码
$("#formId").validate(     
{     
        // 验证规则     
    rules:     
    {},     
    // 验证提示信息（失败时）     
        message:{},     
    errorElement: 'span',                       // 放置错误信息的元素，可以是其他的。     
    errorPlacement: function(error,element)     // 将错误提示信息放在什么地方     
    {},     
        // 成功时执行     
    success: function(label)     
    {     
        label.text(" ")                     // 将错误内容清空，一定要是" "有空格，否则IE有问题。     
            .addClass("success");     
             
    }     
});   

$("#formId").validate(  
{  
        // 验证规则  
    rules:  
    {},  
    // 验证提示信息（失败时）  
        message:{},  
    errorElement: 'span',                       // 放置错误信息的元素，可以是其他的。  
    errorPlacement: function(error,element)     // 将错误提示信息放在什么地方  
    {},  
        // 成功时执行  
    success: function(label)  
    {  
        label.text(" ")                     // 将错误内容清空，一定要是" "有空格，否则IE有问题。  
            .addClass("success");  
          
    }  
});

其中"formId"是表单的form元素的ID属性。

rules和message分别都对应一个对象，该对象只包含属性，其中，属性名为表单中input的name（包括select的name)，值为要应用的规则对象。如：
Javascript代码
rules:{     
    userName:{     
        required:true,     
        maxlength:20,     
        emote: {     
             url: "ajax/validateUserName.action",     //后台处理程序     
             type: "post",               //数据发送方式     
             dataType: "json",           //接受数据格式        
                data: {                     //要传递的数据，默认已传递应用此规则的表单项     
                   email: function() {     
                      return $("#email").val();     
                }     
        }     
    }     
}   

rules:{  
    userName:{  
        required:true,  
        maxlength:20,  
        emote: {  
             url: "ajax/validateUserName.action",     //后台处理程序  
             type: "post",               //数据发送方式  
             dataType: "json",           //接受数据格式     
                data: {                     //要传递的数据，默认已传递应用此规则的表单项  
                   email: function() {  
                      return $("#email").val();  
                }  
        }  
    }  
}

message对应是一样的，只是把规则的值改为提示信息，如：required:‘必填项'。

validation内置的验证规则如下：

   required:true 必填

minlength:最小长度

maxlength:最大长度

rangelength: [3,10] 长度介于 3 和 {1} 之间的字符串

range:[100,1000] 只能是100和 1000 之间的值”

min:最小值

max:最大值

email:true 验证邮箱

url:true 验证是否是合法的网址

date:true 验证是否是合法的日期 new Date() 类型格式

dateISO:true 验证是否是合法的日期 年/月/日 或 年-月-日 格式

number:true 验证是否是合法的数字

digits:true 验证是否为整数

creditcard: 验证合法的信用卡号

equalTo:”要匹配的元素” 如:’#cnfpass’ , 验证两次输入值是否相同

accept: “gif|png|jpg” 验证是否是合法后缀名的字符串
Javascript代码
remote: {  
url: "ajax/validateUserName.action",     //后台处理程序  
type: "post",               //数据发送方式  
dataType: "json",           //接受数据格式     
data: {                     //要传递的数据，默认已传递应用此规则的表单项  
      email: function() {  
          return $("#email").val();  
      }  
}

remote: {
    url: "ajax/validateUserName.action",     //后台处理程序
    type: "post",               //数据发送方式
    dataType: "json",           //接受数据格式  
    data: {                     //要传递的数据，默认已传递应用此规则的表单项
        email: function() {
            return $("#email").val();
        }
    }

注意：remote是远程验证：比如注册验证用户名是否已被注册，返回值只能是true（验证成功）或false（验证失败）。

除了内置的验证规则，validation还允许自定义验证规则。这是通过validation的addMethod方法实现的，语法为：jQuery.validator.addMethod("name",function,message)。其中name为验证规则的名称，function定义验证的规则，message是验证失败时的提示信息。如：

Javascript代码
jQuery.validator.addMethod("ip", function(value, element) {     
    return this.optional(element) || (/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));     
}, "Please enter a valid ip address.");     
// 增加只能是字母和数字的验证     
jQuery.validator.addMethod("chrnum", function(value, element) {     
    return this.optional(element) || (/^([a-zA-Z0-9]+)$/.test(value));     
}, "Please enter a valid format(charactors, A-Z, a-z, 0-9 only).");     
/**   
     * 自定义验证规则——对电话号码进行验证   
     */    
    $.validator.addMethod(     
        "isPhone",      
        function(value, element)      
        {        
            // “/\(?0\d{2,3}[) -]?\d{7,8}/”匹配电话号码的格式多种：010-82839278、(010)82839278、01082839278等，但是，这样有一个问题     
            // 如：(01082839278这样的也会匹配。当然可以用分支条件"|"解决，比较麻烦。而且以什么开始或结束也没有匹配。     
            // 为了简单起见，去掉有"()"的形式。匹配区号3位，则本地号8位，区号4位，则本地号7位的号码。     
            var tel = /^0\d{2}[-]?\d{8}$|^0\d{3}[-]?\d{7}$/;     
            return this.optional(element) || (tel.test(value));     
        }     
        , "电话号码格式不对."    
    );    

jQuery.validator.addMethod("ip", function(value, element) {  
    return this.optional(element) || (/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));  
}, "Please enter a valid ip address.");  
// 增加只能是字母和数字的验证  
jQuery.validator.addMethod("chrnum", function(value, element) {  
    return this.optional(element) || (/^([a-zA-Z0-9]+)$/.test(value));  
}, "Please enter a valid format(charactors, A-Z, a-z, 0-9 only).");  
/**
     * 自定义验证规则——对电话号码进行验证
     */
    $.validator.addMethod(  
        "isPhone",   
        function(value, element)   
        {     
            // “/\(?0\d{2,3}[) -]?\d{7,8}/”匹配电话号码的格式多种：010-82839278、(010)82839278、01082839278等，但是，这样有一个问题  
            // 如：(01082839278这样的也会匹配。当然可以用分支条件"|"解决，比较麻烦。而且以什么开始或结束也没有匹配。  
            // 为了简单起见，去掉有"()"的形式。匹配区号3位，则本地号8位，区号4位，则本地号7位的号码。  
            var tel = /^0\d{2}[-]?\d{8}$|^0\d{3}[-]?\d{7}$/;  
            return this.optional(element) || (tel.test(value));  
        }  
        , "电话号码格式不对." );