Jquery easyui中的有效性检查

 

http://www.verydemo.com/demo_c98_i3213.html

 

 

 

使用过程中的一积累，备查。  

1. EasyUI 验证框使用方法:  
2. //***************************  
3. missingMessage：未填写时显示的信息  
4. validType：验证类型见下示例  
5. invalidMessage：无效的数据类型时显示的信息  
6. required="true" 必填项  
7. class="easyui-validatebox" 文本验证  
8. class="easyui-numberbox" 数字验证  
9. *****************************//  
10. 0、调用数据验证方法  
11.     return $("#form1").form('validate');  
12.    
13.  示例：  
14. <asp:Button ID="btn_Save" runat="server" Text="保存" OnClick ="btn_Save_Click" OnClientClick="return $("#form1").form('validate');" />    
15.     
16. 1、验证是否必填  
17. class="easyui-validatebox" missingMessage="xxx必须填写"  
18. 2、验证字符串长度  
19. class="easyui-validatebox" missingMessage="xxx必须填写少于10个字符" validType="length[0,2]" invalidMessage="不能超过2个字符！"  
20. 示例：  
21. <input class="easyui-validatebox" required="true" missingMessage="姓名必须填写" size="10" type="text" name="ARealName"></input>  
22. 3、验证数字必须是5.5-20之间 precision="2"表示是2为小数  
23. class="easyui-numberbox" min="5.5" max="20" precision="2" required="true" missingMessage="必须填写5.5~10之间的数字"  
24. 4、验证必须是日期yyyy-MM-dd（只能选择不可编辑）  
25. <script>  
26.  $.fn.datebox.defaults.formatter = function (date) {  
27.             var y = date.getFullYear();  
28.             var m = date.getMonth() + 1;  
29.             var d = date.getDate();  
30.             return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d);  
31.         };  
32.         $.fn.datebox.defaults.parser = function (s) {  
33.             if (s) {  
34.                 var a = s.split('-');  
35.                 var d = new Date(parseInt(a[0]), parseInt(a[1]) - 1, parseInt(a[2]));  
36.                 return d;  
37.             } else {  
38.                 return new Date();  
39.             }  
40.         };  
41. </script>  
42. class="easyui-datebox" required="true" missingMessage="日期必须填写"  editable="false"  
43. //如果需要填写其他格式的类型请自行修改formatter函数  
44. 5、验证必须是邮件  
45. class="easyui-validatebox" missingMessage="邮件必须填写" validType="email" invalidMessage="请填写正确的邮件格式"  
46. 6、页面时间段判断 name为s1的时间必须大于name为s2的时间 s3必须大于s2  
47. <script>  
48. $.extend($.fn.validatebox.defaults.rules,{  
49.    TimeCheck:{  
50.     validator:function(value,param){       
51.      var s = $("input[name="+param[0]+"]").val();  
52.      //因为日期是统一格式的所以可以直接比较字符串 否则需要Date.parse(_date)转换  
53.      return value>=s;  
54.     },  
55.     message:'非法数据'  
56.    }  
57.   });  
58. </script>  
59. <input name="s1" class="easyui-datebox" required="true" missingMessage="日期必须填写" editable="false"></input>  
60. <input name="s2" class="easyui-datebox" required="true" validType="TimeCheck['s1']" invalidMessage="s1必须大于s2" editable="false"></input>  
61. <input name="s3" class="easyui-datebox" required="true" validType="TimeCheck['s2']" editable="false"></input>  
62.   
63. 7、询问对话框提交：  
64. function Confirmbtn(msg, control) {  
65. $.messager.confirm('确认', msg, function (r) {  
66.     if (r) {  
67.         __doPostBack("ctl00$ContentPH_Main$Button1", "");  
68.         //alert('aa');  
69.     }  
70. });  
71. return false;  
72. }  
73. OnClientClick="return Confirmbtn('确认吗？', this);  

查看文本打印

1. 使用过程中的一积累，备查。  
2. EasyUI 验证框使用方法:  
3. //***************************  
4. missingMessage：未填写时显示的信息  
5. validType：验证类型见下示例  
6. invalidMessage：无效的数据类型时显示的信息  
7. required="true" 必填项  
8. class="easyui-validatebox" 文本验证  
9. class="easyui-numberbox" 数字验证  
10. *****************************//  
11. 0、调用数据验证方法  
12.     return $("#form1").form('validate');  
13.    
14.  示例：  
15. <asp:Button ID="btn_Save" runat="server" Text="保存" OnClick ="btn_Save_Click" OnClientClick="return $("#form1").form('validate');" />    
16.     
17. 1、验证是否必填  
18. class="easyui-validatebox" missingMessage="xxx必须填写"  
19. 2、验证字符串长度  
20. class="easyui-validatebox" missingMessage="xxx必须填写少于10个字符" validType="length[0,2]" invalidMessage="不能超过2个字符！"  
21. 示例：  
22. <input class="easyui-validatebox" required="true" missingMessage="姓名必须填写" size="10" type="text" name="ARealName"></input>  
23. 3、验证数字必须是5.5-20之间 precision="2"表示是2为小数  
24. class="easyui-numberbox" min="5.5" max="20" precision="2" required="true" missingMessage="必须填写5.5~10之间的数字"  
25. 4、验证必须是日期yyyy-MM-dd（只能选择不可编辑）  
26. <script>  
27.  $.fn.datebox.defaults.formatter = function (date) {  
28.             var y = date.getFullYear();  
29.             var m = date.getMonth() + 1;  
30.             var d = date.getDate();  
31.             return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d);  
32.         };  
33.         $.fn.datebox.defaults.parser = function (s) {  
34.             if (s) {  
35.                 var a = s.split('-');  
36.                 var d = new Date(parseInt(a[0]), parseInt(a[1]) - 1, parseInt(a[2]));  
37.                 return d;  
38.             } else {  
39.                 return new Date();  
40.             }  
41.         };  
42. </script>  
43. class="easyui-datebox" required="true" missingMessage="日期必须填写"  editable="false"  
44. //如果需要填写其他格式的类型请自行修改formatter函数  
45. 5、验证必须是邮件  
46. class="easyui-validatebox" missingMessage="邮件必须填写" validType="email" invalidMessage="请填写正确的邮件格式"  
47. 6、页面时间段判断 name为s1的时间必须大于name为s2的时间 s3必须大于s2  
48. <script>  
49. $.extend($.fn.validatebox.defaults.rules,{  
50.    TimeCheck:{  
51.     validator:function(value,param){       
52.      var s = $("input[name="+param[0]+"]").val();  
53.      //因为日期是统一格式的所以可以直接比较字符串 否则需要Date.parse(_date)转换  
54.      return value>=s;  
55.     },  
56.     message:'非法数据'  
57.    }  
58.   });  
59. </script>  
60. <input name="s1" class="easyui-datebox" required="true" missingMessage="日期必须填写" editable="false"></input>  
61. <input name="s2" class="easyui-datebox" required="true" validType="TimeCheck['s1']" invalidMessage="s1必须大于s2" editable="false"></input>  
62. <input name="s3" class="easyui-datebox" required="true" validType="TimeCheck['s2']" editable="false"></input>  
63.   
64. 7、询问对话框提交：  
65. function Confirmbtn(msg, control) {  
66. $.messager.confirm('确认', msg, function (r) {  
67.     if (r) {  
68.         __doPostBack("ctl00$ContentPH_Main$Button1", "");  
69.         //alert('aa');  
70.     }  
71. });  
72. return false;  
73. }  
74. OnClientClick="return Confirmbtn('确认吗？', this);  

查看文本打印

1. ----------------------------------------------------------------------------------------------------------------  

查看文本打印

1. ----------------------------------------------------------------------------------------------------------------  

查看文本打印

1.    

查看文本打印

1.    

查看文本打印

1. <html xmlns="http://www.w3.org/1999/xhtml">  
2. <head>  
3.     <script src="easyui1.2.4/jquery-1.6.min.js" type="text/javascript"></script>  
4.     <script src="easyui1.2.4/jquery.easyui.min.js" type="text/javascript"></script>  
5.     <!--自定义验证-->  
6.     <script src="easyui1.2.4/validator.js" type="text/javascript"></script>  
7.     <link href="easyui1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />  
8.     <script>  
9.   
10.         ￥（function （） {  
11.               
12.             //设置text须要验证  
13.             ￥（""input[type=text]""）.validatebox（）;  
14.         }）  
15.       
16.     </script>  
17. </head>  
18. <body>  
19.     邮箱验证：<input type="text" validtype="email" required="true" missingMessage="不克不及为空" invalidMessage="邮箱格局不正确" /><br />  
20.     网址验证：<input type="text" validtype="url" invalidMessage="url格局不正确[http://www.example.com]" /><br />  
21.     长度验证：<input type="text" validtype="length[8，20]" invalidMessage="有效长度8-20" /><br />  
22.     手机验证：<input type="text" validtype="mobile"  /><br />  
23.     邮编验证：<input type="text" validtype="zipcode" /><br />  
24.     账号验证：<input type="text" validtype="account[8，20]" /><br />  
25.     汉子验证：<input type="text" validtype="CHS" /><br />  
26.     长途验证：<input type="text" validtype="remote[""checkname.aspx""，""name""]" invalidMessage="用户名已存在"/>  
27. </body>  
28. </html>  
29. 　  

查看文本打印

1. <html xmlns="http://www.w3.org/1999/xhtml">  
2. <head>  
3.     <script src="easyui1.2.4/jquery-1.6.min.js" type="text/javascript"></script>  
4.     <script src="easyui1.2.4/jquery.easyui.min.js" type="text/javascript"></script>  
5.     <!--自定义验证-->  
6.     <script src="easyui1.2.4/validator.js" type="text/javascript"></script>  
7.     <link href="easyui1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />  
8.     <script>  
9.   
10.         ￥（function （） {  
11.               
12.             //设置text须要验证  
13.             ￥（""input[type=text]""）.validatebox（）;  
14.         }）  
15.       
16.     </script>  
17. </head>  
18. <body>  
19.     邮箱验证：<input type="text" validtype="email" required="true" missingMessage="不克不及为空" invalidMessage="邮箱格局不正确" /><br />  
20.     网址验证：<input type="text" validtype="url" invalidMessage="url格局不正确[http://www.example.com]" /><br />  
21.     长度验证：<input type="text" validtype="length[8，20]" invalidMessage="有效长度8-20" /><br />  
22.     手机验证：<input type="text" validtype="mobile"  /><br />  
23.     邮编验证：<input type="text" validtype="zipcode" /><br />  
24.     账号验证：<input type="text" validtype="account[8，20]" /><br />  
25.     汉子验证：<input type="text" validtype="CHS" /><br />  
26.     长途验证：<input type="text" validtype="remote[""checkname.aspx""，""name""]" invalidMessage="用户名已存在"/>  
27. </body>  
28. </html>  
29. 　  

本身写的validator.js

查看文本打印

1. //扩大easyui表单的验证  
2. ￥.extend（￥.fn.validatebox.defaults.rules， {  
3.     //验证汉子  
4.     CHS: {  
5.         validator: function （value） {  
6.             return /^[\u0391-\uFFE5]+￥/.test（value）;  
7.         }，  
8.         message: ""只能输入汉字""  
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: ""输入手机号码格局不正确.""  
17.     }，  
18.     //国内邮编验证  
19.     zipcode: {  
20.         validator: function （value） {  
21.             var reg = /^[1-9]\d{5}￥/;  
22.             return reg.test（value）;  
23.         }，  
24.         message: ""邮编必须长短0开端的6位数字.""  
25.     }，  
26.     //用户账号验证（只能包含 _ 数字 字母）   
27.     account: {//param的值为[]中值  
28.         validator: function （value， param） {  
29.             if （value.length < param[0] || value.length > param[1]） {  
30.                 ￥.fn.validatebox.defaults.rules.account.message = ""用户名长度必须在"" + param[0] + ""至"" + param[1] + ""局限"";  
31.                 return false;  
32.             } else {  
33.                 if （!/^[\w]+￥/.test（value）） {  
34.                     ￥.fn.validatebox.defaults.rules.account.message = ""用户名只能数字、字母、下划线构成."";  
35.                     return false;  
36.                 } else {  
37.                     return true;  
38.                 }  
39.             }  
40.         }， message: """"  
41.     }  
42. }）  

查看文本打印

1. //扩大easyui表单的验证  
2. ￥.extend（￥.fn.validatebox.defaults.rules， {  
3.     //验证汉子  
4.     CHS: {  
5.         validator: function （value） {  
6.             return /^[\u0391-\uFFE5]+￥/.test（value）;  
7.         }，  
8.         message: ""只能输入汉字""  
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: ""输入手机号码格局不正确.""  
17.     }，  
18.     //国内邮编验证  
19.     zipcode: {  
20.         validator: function （value） {  
21.             var reg = /^[1-9]\d{5}￥/;  
22.             return reg.test（value）;  
23.         }，  
24.         message: ""邮编必须长短0开端的6位数字.""  
25.     }，  
26.     //用户账号验证（只能包含 _ 数字 字母）   
27.     account: {//param的值为[]中值  
28.         validator: function （value， param） {  
29.             if （value.length < param[0] || value.length > param[1]） {  
30.                 ￥.fn.validatebox.defaults.rules.account.message = ""用户名长度必须在"" + param[0] + ""至"" + param[1] + ""局限"";  
31.                 return false;  
32.             } else {  
33.                 if （!/^[\w]+￥/.test（value）） {  
34.                     ￥.fn.validatebox.defaults.rules.account.message = ""用户名只能数字、字母、下划线构成."";  
35.                     return false;  
36.                 } else {  
37.                     return true;  
38.                 }  
39.             }  
40.         }， message: """"  
41.     }  
42. }）  

　　checkname.aspx

查看文本打印

1. <％＠ Page Language="C＃" ％>  
2. <script runat="server">  
3.     void Page_Load（object sender， System.EventArgs e）  
4.     {  
5.         if （!string.IsNullOrEmpty（Request["name"]））  
6.         {  
7.             string name = "";  
8.             name = Request["name"];  
9.             if （name == "zhxhdean"）  
10.             {//当文本框中值为 zhxhdean，提示用户已存在。 这一步可以去数据库查询  
11.                 Response.Write（"false"）;  
12.                 return;  
13.             }  
14.             else  
15.             {  
16.                 Response.Write（"true"）;  
17.                 return;  
18.             }  
19.         }  
20.     }  
21. </script>  

查看文本打印

1. <％＠ Page Language="C＃" ％>  
2. <script runat="server">  
3.     void Page_Load（object sender， System.EventArgs e）  
4.     {  
5.         if （!string.IsNullOrEmpty（Request["name"]））  
6.         {  
7.             string name = "";  
8.             name = Request["name"];  
9.             if （name == "zhxhdean"）  
10.             {//当文本框中值为 zhxhdean，提示用户已存在。 这一步可以去数据库查询  
11.                 Response.Write（"false"）;  
12.                 return;  
13.             }  
14.             else  
15.             {  
16.                 Response.Write（"true"）;  
17.                 return;  
18.             }  
19.         }  
20.     }  
21. </script>