Query的一个表单验证插件

有多种验证规则，同时，可以很方便的定义自己的规则。在此，说明一些常用的功能，详细的介绍，可以参考官方文档。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、[phone]、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、[phone]、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));  
        }  
        , "电话号码格式不对."
    ); 


还可以定义其他的验证规则。应用自定义的规则很容易，自定义规则和内置规则用法是一样的。

在此，提供一个有用的验证规则，那就是针对select下拉框的验证：

Javascript代码
/**   
     * 自定义验证规则——增加对select的验证   
     */    
    $.validator.addMethod(      
        "selectNone",               // name验证方法名     
        function(value, element)    // 验证规则     
        {     
            if (value == "none")    // select默认值需要设置为"none"(当然可以自定义其他值）     
            {      
                return false;      
            }      
            else      
            {     
                return true;      
            }     
        },      
        "必须选择一项"    // 默认验证消息（自定义规则信息的国际化是否不起作用？）     
    );   

/**
     * 自定义验证规则——增加对select的验证
     */
    $.validator.addMethod(   
        "selectNone",               // name验证方法名  
        function(value, element)    // 验证规则  
        {  
            if (value == "none")    // select默认值需要设置为"none"(当然可以自定义其他值）  
            {   
                return false;   
            }   
            else   
            {  
                return true;   
            }  
        },   
        "必须选择一项"    // 默认验证消息（自定义规则信息的国际化是否不起作用？）  
    ); 


二、验证信息的国际化

验证信息国际化是很方便的，默认验证信息是英文的，只需导入validation已写好的国际化文件，如：
Javascript代码
<script type="text/javascript" src="scripts/jQuery/plugins/jquery.validate.js"></script>  

<script type="text/javascript" src="scripts/jQuery/plugins/jquery.validate.messages_cn.js"></script>

<script type="text/javascript" src="scripts/jQuery/plugins/jquery.validate.js"></script>

<script type="text/javascript" src="scripts/jQuery/plugins/jquery.validate.messages_cn.js"></script>

在验证时，去掉message，提示信息就会变成中文。

可以改国际化文件中的提示信息内容，使其更加个性化、符合项目要求。另外，如果在验证时使用了message，message中指定的字段提示信息会覆盖国际化文件中的信息。

这里有一个问题，国际化时似乎没法根据浏览器的locale来自动识别该用什么语言来显示。笔者测试了一下，当导入多国语言文件时，总是会使用最后一次导入的语言。因此，要实现真正的国际化，可以通过一个链接之类的来选择语言，然后用javascript来导入不同的语言文件。

三、远程验证

远程验证很有用，用户体验很好，因为不需要提交表单就知道自己注册用户的是否已被注册。validation插件通过remote规则来实现验证。在此讲解一下如果将请求提交给struts2的action来验证。

remote规则的格式为：
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，因此struts2的action得不同于一般的action，不能返回一个字符串，然后dispatch一个视图之类的。研究之后，发现struts2中有一种result类型：stream，通过该类型可以实现返回true或false。action代码如下：
Java代码
view plaincopy to clipboardprint?  
// 定义返回的输入流     
    private InputStream inputStream;     
         
    // 定义需要到远程验证的字段     
    private String userName;     
    private String email;        
         
    // 定义返回值：只能为Boolean类型     
    private Boolean valid;     
         
    /**   
     * Action执行的方法：实现远程验证，将业务逻辑交给后台处理，并接收结果   
     * 同时，将结果返回。   
     * @return   
     */    
    public String execute()     
    {     
        // 根据userName判断该SP/CP是否已被注册;根据email判断该账号是否已被占用     
        if(spcpPreApprovalService.existSpcpAccount(userName, email))     
        {     
            valid = false;     
        }     
        else    
        {     
            valid = true;     
        }     
             
        inputStream = new ByteArrayInputStream(valid.toString().getBytes());     
             
        return Action.SUCCESS;     
    }     
    // 省略getter、setter  

view plaincopy to clipboardprint?
// 定义返回的输入流  
    private InputStream inputStream;  
      
    // 定义需要到远程验证的字段  
    private String userName;  
    private String email;     
      
    // 定义返回值：只能为Boolean类型  
    private Boolean valid;  
      
    /**
     * Action执行的方法：实现远程验证，将业务逻辑交给后台处理，并接收结果
     * 同时，将结果返回。
     * @return
     */
    public String execute()  
    {  
        // 根据userName判断该SP/CP是否已被注册;根据email判断该账号是否已被占用  
        if(spcpPreApprovalService.existSpcpAccount(userName, email))  
        {  
            valid = false;  
        }  
        else
        {  
            valid = true;  
        }  
          
        inputStream = new ByteArrayInputStream(valid.toString().getBytes());  
          
        return Action.SUCCESS;  
    }  
    // 省略getter、setter


struts.xml文件的配置为：

Xml代码
<package name="ajax" namespace="/ajax" extends="struts-default">
        <action name="validateSpId" class="validateSpcpAction">
            <result type="stream">
                <param name="contentType">text/html</param><!-- 默认为text/plain -->
                <param name="inputName">inputStream</param><!-- 默认就为inputStream -->
            </result>
        </action>
    </package> 

<package name="ajax" namespace="/ajax" extends="struts-default">
    <action name="validateSpId" class="validateSpcpAction">
       <result type="stream">
        <param name="contentType">text/html</param><!-- 默认为text/plain -->
        <param name="inputName">inputStream</param><!-- 默认就为inputStream -->
       </result>
    </action>
    </package>

这样便可以实现远程验证功能。