jQuery学习之：Validation表单验证插件

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

rules:{     
        userName:{     
                required: true,     
                maxlength:20,     
                emote: {     
                         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();
                }
        }

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));     
                }     
                ,  "电话号码格式不对."    
        );     

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

< 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>

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

}

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    

< 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 >