easyUI表单验证

1.重写easyui中的

         $.extend($.fn.validatebox.defaults.rules, {
         }） 

2.长度重写的方式

 1             $.extend($.fn.validatebox.defaults.rules, {
                 minLength: {
                     validator: function(value, param){   //value 为需要校验的输入框的值 , param为使用此规则时存入的参数
                         return value.length >= param[0];
                     },
                     message: '请输入最小{0}位字符.'
                 }
             });   

             $.extend($.fn.validatebox.defaults.rules, {
                 maxLength: {
                     validator: function(value, param){
                         return param[0] >= value.length;
                     },
                     message: '请输入最大{0}位字符.'
                 }
             });   

             $.extend($.fn.validatebox.defaults.rules, {
                 length: {
                     validator: function(value, param){
                         return value.length >= param[0] && param[1] >= value.length;
                     },
                     message: '请输入{0}-{1}位字符.'
                 }
             });   

引用方式

<input class="easyui-validatebox" validType="minLength[5]">
<input class="easyui-validatebox" validType="maxLength[5]">
<input data-options="required:true,validType:'length[0,10]'" class="easyui-textbox"/>

3.特殊验证

             $.extend($.fn.validatebox.defaults.rules, {
                 equals: {
                     validator: function(value,param){
                         return value == $(param[0]).val();
                     },
                     message: '字段不相同.'
                 }
             });    

             $.extend($.fn.validatebox.defaults.rules, {
                 web : {
                     validator: function(value){
                         return /^(http[s]{0,1}|ftp):\/\//i.test($.trim(value));
                     },
                     message: '网址格式错误.'
                 }
             });   

            $.extend($.fn.validatebox.defaults.rules, {
                mobile : {
                     validator: function(value){
                         return /^1[0-9]{10}$/i.test($.trim(value));
                     },
                     message: '手机号码格式错误.'
                 }
             });  

            $.extend($.fn.validatebox.defaults.rules, {
                date : {
                     validator: function(value){
                         return /^[0-9]{4}[-][0-9]{2}[-][0-9]{2}$/i.test($.trim(value));
                     },
                     message: '曰期格式错误,如2012-09-11.'
                 }
             });   

            $.extend($.fn.validatebox.defaults.rules, {
                email : {
                     validator: function(value){
                         return /^[a-zA-Z0-9_+.-]+\@([a-zA-Z0-9-]+\.)+[a-zA-Z0-9]{2,4}$/i.test($.trim(value));
                     },
                     message: '电子邮箱格式错误.'
                 }
             });   

 $.extend($.fn.validatebox.defaults.rules, {
          ip: {// ip地址验证
              validator: function (value) {
                  return /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/i.test(value);
              },
              message: 'ip格式不正确'
          }
 }

4.ajax介入验证

          $.extend($.fn.validatebox.defaults.rules, {
                captcha : {
                     validator: function(value){
                         var data0 = false;
                         $.ajax({
                             type: "POST",async:false,
                             url:contextPath + "/json/valSimulation.action",
                             dataType:"json",
                             data:{"simulation":value},
                             async:false,
                             success: function(data){
                                 data0=data;
                             }
                         });  

                        return data0;
 //                      return /^[a-zA-Z0-9]{4}$/i.test($.trim(value));
                     },
                     message: '验证码错误.'
                 }
             });   

            $.extend($.fn.validatebox.defaults.rules, {
                txtName : {
                     validator: function(value,param){
                         var data0 = false;
                         if(value.length >= param[0] && param[1] >= value.length)
                         {
                             $.ajax({
                                 type: "POST",async:false,
                                 url:contextPath + "/json/valName.action",
                                 dataType:"json",
                                 data:{"txtName":value},
                                 async:false,
                                 success: function(data){
                                     data0=!data;
                                 }
                             });
                         }else{
                             param[2] = "请输入"+param[0]+"-"+param[1]+"位字符.";
                             return false;
                         }  

                         param[2] = "用户名称已存在.";
                        return data0;
                     },
                     message: "{2}"
                 }
             });   

     });    

引用方式

<input class="easyui-validatebox" data-options="required:'true',validType:'引用项'">

5.例子

 //扩展easyui表单的验证
 $.extend($.fn.validatebox.defaults.rules, {
     //验证汉字
     CHS: {
         validator: function (value) {
             return /^[\u0391-\uFFE5]+$/.test(value);
         },
         message: 'The input Chinese characters only.'
     },
     //移动手机号码验证
     Mobile: {//value值为文本框中的值
         validator: function (value) {
             var reg = /^1[3|4|5|8|9]\d{9}$/;
             return reg.test(value);
         },
         message: 'Please enter your mobile phone number correct.'
     },
     //国内邮编验证
     ZipCode: {
         validator: function (value) {
             var reg = /^[0-9]\d{5}$/;
             return reg.test(value);
         },
         message: 'The zip code must be 6 digits and 0 began.'
     },
   //数字
     Number: {
         validator: function (value) {
             var reg =/^[0-9]*$/;
             return reg.test(value);
         },
         message: 'Please input number.'
     },
 })

HTML

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="gb2312">
     <title>Basic ValidateBox - jQuery EasyUI Demo</title>
     <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
     <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
     <link rel="stylesheet" type="text/css" href="../demo.css">
     <script type="text/javascript" src="../../jquery.min.js"></script>
     <script type="text/javascript" src="../../jquery.easyui.min.js"></script>

     <script src="validatebox.js" type="text/javascript"></script>  <!--引入将创建的js文件-->

 </head>
 <body>

     <h2>常用验证格式</h2>
     <div style="margin:20px 0;"></div>
     <div class="easyui-panel" title="Register" style="width:400px;padding:10px 60px 20px 60px">
         <table cellpadding="10">
             <tr>
                 <td>User Name:</td>
                 <td><input class="easyui-validatebox textbox" data-options="required:true,validType:'length[3,10]'"></td>
             </tr>
             <tr>
                 <td>Email:</td>
                 <td><input class="easyui-validatebox textbox" data-options="required:true,validType:'email'"></td>
             </tr>
             <tr>
                 <td>Birthday:</td>
                 <td><input class="easyui-datebox textbox"></td>
             </tr>
             <tr>
                 <td>URL:</td>
                 <td><input class="easyui-validatebox textbox" data-options="required:true,validType:'url'"></td>
             </tr>
             <tr>
                 <td>Mobile:</td>
                 <td><input class="easyui-validatebox textbox" data-options="required:true,validType:'Mobile'"></td>
             </tr>
             <tr>
                 <td>Length:</td>
                 <td><input class="easyui-validatebox" data-options="required:true,validType:'length[0,2]'"></td>
             </tr>
             <tr>
                 <td>Chinese:</td>
                  <td><input name="txtName" class="easyui-validatebox" data-options="required:'true',validType:'CHS'"></td>

             </tr>

             <tr>
                 <td>ZipCode:</td>
                  <td><input name="txtName" class="easyui-validatebox" data-options="required:'true',validType:'ZipCode'"></td>

             </tr>
             <tr>
                 <td>Number:</td>
                  <td><input name="txtName" class="easyui-validatebox" data-options="required:'true',validType:'Number'"></td>

             </tr>

         </table>
     </div>
     <style scoped="scoped">
         .textbox{
             height:20px;
             margin:0;
             padding:0 2px;
             box-sizing:content-box;
         }
     </style>