easyUI表单验证
1.重写easyui中的
1 $.extend($.fn.validatebox.defaults.rules, { 2 }）
2.长度重写的方式
1 $.extend($.fn.validatebox.defaults.rules, { 2 minLength: { 3 validator: function(value, param){ //value 为需要校验的输入框的值 , param为使用此规则时存入的参数 4 return value.length >= param[0]; 5 }, 6 message: '请输入最小{0}位字符.' 7 } 8 }); 9 10 $.extend($.fn.validatebox.defaults.rules, { 11 maxLength: { 12 validator: function(value, param){ 13 return param[0] >= value.length; 14 }, 15 message: '请输入最大{0}位字符.' 16 } 17 }); 18 19 $.extend($.fn.validatebox.defaults.rules, { 20 length: { 21 validator: function(value, param){ 22 return value.length >= param[0] && param[1] >= value.length; 23 }, 24 message: '请输入{0}-{1}位字符.' 25 } 26 });
引用方式
<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.特殊验证
1 $.extend($.fn.validatebox.defaults.rules, { 2 equals: { 3 validator: function(value,param){ 4 return value == $(param[0]).val(); 5 }, 6 message: '字段不相同.' 7 } 8 }); 9 10 $.extend($.fn.validatebox.defaults.rules, { 11 web : { 12 validator: function(value){ 13 return /^(http[s]{0,1}|ftp):\/\//i.test($.trim(value)); 14 }, 15 message: '网址格式错误.' 16 } 17 }); 18 19 $.extend($.fn.validatebox.defaults.rules, { 20 mobile : { 21 validator: function(value){ 22 return /^1[0-9]{10}$/i.test($.trim(value)); 23 }, 24 message: '手机号码格式错误.' 25 } 26 }); 27 28 $.extend($.fn.validatebox.defaults.rules, { 29 date : { 30 validator: function(value){ 31 return /^[0-9]{4}[-][0-9]{2}[-][0-9]{2}$/i.test($.trim(value)); 32 }, 33 message: '曰期格式错误,如2012-09-11.' 34 } 35 }); 36 37 $.extend($.fn.validatebox.defaults.rules, { 38 email : { 39 validator: function(value){ 40 return /^[a-zA-Z0-9_+.-]+\@([a-zA-Z0-9-]+\.)+[a-zA-Z0-9]{2,4}$/i.test($.trim(value)); 41 }, 42 message: '电子邮箱格式错误.' 43 } 44 });
1 $.extend($.fn.validatebox.defaults.rules, { 2 ip: {// ip地址验证 3 validator: function (value) { 4 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); 5 }, 6 message: 'ip格式不正确' 7 } 8 }
4.ajax介入验证
1 $.extend($.fn.validatebox.defaults.rules, { 2 captcha : { 3 validator: function(value){ 4 var data0 = false; 5 $.ajax({ 6 type: "POST",async:false, 7 url:contextPath + "/json/valSimulation.action", 8 dataType:"json", 9 data:{"simulation":value}, 10 async:false, 11 success: function(data){ 12 data0=data; 13 } 14 }); 15 16 return data0; 17 // return /^[a-zA-Z0-9]{4}$/i.test($.trim(value)); 18 }, 19 message: '验证码错误.' 20 } 21 }); 22 23 $.extend($.fn.validatebox.defaults.rules, { 24 txtName : { 25 validator: function(value,param){ 26 var data0 = false; 27 if(value.length >= param[0] && param[1] >= value.length) 28 { 29 $.ajax({ 30 type: "POST",async:false, 31 url:contextPath + "/json/valName.action", 32 dataType:"json", 33 data:{"txtName":value}, 34 async:false, 35 success: function(data){ 36 data0=!data; 37 } 38 }); 39 }else{ 40 param[2] = "请输入"+param[0]+"-"+param[1]+"位字符."; 41 return false; 42 } 43 44 param[2] = "用户名称已存在."; 45 return data0; 46 }, 47 message: "{2}" 48 } 49 }); 50 51 });
引用方式
<input class="easyui-validatebox" data-options="required:'true',validType:'引用项'">
5.例子
1 //扩展easyui表单的验证 2 $.extend($.fn.validatebox.defaults.rules, { 3 //验证汉字 4 CHS: { 5 validator: function (value) { 6 return /^[\u0391-\uFFE5]+$/.test(value); 7 }, 8 message: 'The input Chinese characters only.' 9 }, 10 //移动手机号码验证 11 Mobile: {//value值为文本框中的值 12 validator: function (value) { 13 var reg = /^1[3|4|5|8|9]\d{9}$/; 14 return reg.test(value); 15 }, 16 message: 'Please enter your mobile phone number correct.' 17 }, 18 //国内邮编验证 19 ZipCode: { 20 validator: function (value) { 21 var reg = /^[0-9]\d{5}$/; 22 return reg.test(value); 23 }, 24 message: 'The zip code must be 6 digits and 0 began.' 25 }, 26 //数字 27 Number: { 28 validator: function (value) { 29 var reg =/^[0-9]*$/; 30 return reg.test(value); 31 }, 32 message: 'Please input number.' 33 }, 34 })
HTML
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="gb2312"> 5 <title>Basic ValidateBox - jQuery EasyUI Demo</title> 6 <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> 7 <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> 8 <link rel="stylesheet" type="text/css" href="../demo.css"> 9 <script type="text/javascript" src="../../jquery.min.js"></script> 10 <script type="text/javascript" src="../../jquery.easyui.min.js"></script> 11 12 <script src="validatebox.js" type="text/javascript"></script> <!--引入将创建的js文件--> 13 14 </head> 15 <body> 16 17 <h2>常用验证格式</h2> 18 <div style="margin:20px 0;"></div> 19 <div class="easyui-panel" title="Register" style="width:400px;padding:10px 60px 20px 60px"> 20 <table cellpadding="10"> 21 <tr> 22 <td>User Name:</td> 23 <td><input class="easyui-validatebox textbox" data-options="required:true,validType:'length[3,10]'"></td> 24 </tr> 25 <tr> 26 <td>Email:</td> 27 <td><input class="easyui-validatebox textbox" data-options="required:true,validType:'email'"></td> 28 </tr> 29 <tr> 30 <td>Birthday:</td> 31 <td><input class="easyui-datebox textbox"></td> 32 </tr> 33 <tr> 34 <td>URL:</td> 35 <td><input class="easyui-validatebox textbox" data-options="required:true,validType:'url'"></td> 36 </tr> 37 <tr> 38 <td>Mobile:</td> 39 <td><input class="easyui-validatebox textbox" data-options="required:true,validType:'Mobile'"></td> 40 </tr> 41 <tr> 42 <td>Length:</td> 43 <td><input class="easyui-validatebox" data-options="required:true,validType:'length[0,2]'"></td> 44 </tr> 45 <tr> 46 <td>Chinese:</td> 47 <td><input name="txtName" class="easyui-validatebox" data-options="required:'true',validType:'CHS'"></td> 48 49 </tr> 50 51 <tr> 52 <td>ZipCode:</td> 53 <td><input name="txtName" class="easyui-validatebox" data-options="required:'true',validType:'ZipCode'"></td> 54 55 </tr> 56 <tr> 57 <td>Number:</td> 58 <td><input name="txtName" class="easyui-validatebox" data-options="required:'true',validType:'Number'"></td> 59 60 </tr> 61 62 </table> 63 </div> 64 <style scoped="scoped"> 65 .textbox{ 66 height:20px; 67 margin:0; 68 padding:0 2px; 69 box-sizing:content-box; 70 } 71 </style>
