easyui的验证

来源：互联网发布：python idle 设置编辑：程序博客网时间：2024/05/03 04:56

多重验证：
Js代码
1. {
2. field : 'startPort',
3. title : "起始端口",
4. editor: "text",
5. width : 50,
6. editor: {
7. type: 'SuperValidatebox',
8. options: {
9. required: true,
10. validType: ['integer','length[0,5]']
11. }
12. },
15. 自从1.3.2版本开始，validatebox自身已经支持多重校验了，例如：
16. input class="easyui-validatebox" data-options="required:true,validType:['email','length[0,20]']">
Java代码
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>
10. $(function () {
12. //设置text需要验证
13. $('input[type=text]').validatebox();
14. })
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>
自定义验证：
Java代码
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. })
Js代码
1. $.extend($.fn.validatebox.defaults.rules, {
2. checkWSDL: {
3. validator: function(value,param){
4. var reg = "^(http://|([0-9]{1,3}[.]{1}[0-9]{1,3}[.]{1}[0-9]{1,3}[.]{1}[0-9]{1,3}:[0-9]{1,4}))[/a-zA-Z0-9._%&:=(),?+]*[?]{1}wsdl$";
5. return reg.test(value);
6. },
7. message: '请输入合法的WSDL地址'
8. },
9. checkIp : {// 验证IP地址
10. validator : function(value) {
11. var reg = /^((1?\d?\d|(2([0-4]\d|5[0-5])))\.){3}(1?\d?\d|(2([0-4]\d|5[0-5])))$/ ;
12. return reg.test(value);
13. },
14. message : 'IP地址格式不正确'
15. }
16. });
=================================
Java代码
1. $.extend($.fn.validatebox.defaults.rules, {
2. selectValueRequired: {
3. validator: function(value,param){
4. if (value == "" || value.indexOf('请选择') >= 0) {
5. return false;
6. }else {
7. return true;
8. }
9. },
10. message: '该下拉框为必选项'
11. }
12. });
Java代码
1. <select id="serviceType" name="serviceType" style="width: 150px" class="easyui-combobox" required="true" validType="selectValueRequired"></select>
===================================
Remote：远程验证
Easyui validatebox修改
http://blog.csdn.net/qlh2863/article/details/7269689
http://www.cnblogs.com/qiancheng509/archive/2012/11/23/2783700.html
http://blog.csdn.net/dyllove98/article/details/8866711

自己代码：
Java代码
1. equalTo : {
2. validator : function(value, param) {
3. return $("#" + param[0]).val() == value;
4. },
5. message : '两次输入的密码不一致!'
6. },
7. checkPassword :{
8. validator : function(value,param){
9. var sysUser = {};
10. var flag ;
11. sysUser.userPassword = value;
12. $.ajax({
13. url : root + 'login/checkPwd.do',
14. type : 'POST',
15. timeout : 60000,
16. data:sysUser,
17. async: false,
18. success : function(data, textStatus, jqXHR) {
19. if (data == "0") {
20. flag = true;
21. }else{
22. flag = false;
23. }
24. }
25. });
26. if(flag){
27. $("#userPassword").removeClass('validatebox-invalid');
28. }
29. return flag;
30. },
31. message: '原始密码输入错误！'
32. }
Java代码
1. <table cellpadding="0" align="center" style="width: 98%; height: 98%; text-align: right;">
2. <tr>
3. <td>请输入原密码：</td>
4. <td style="text-align: left; padding-left: 10px;"><input type="password" id="userPassword" name="userPassword" class="easyui-validatebox"
5. data-options="required:true" validType="checkPassword"/>
6. </td>
7. </tr>
8. <tr>
9. <td>请输入新密码：</td>
10. <td style="text-align: left; padding-left: 10px;"><input type="password" id="newPassword" name="newPassword" class="easyui-validatebox"
11. data-options="required:true" />
12. </td>
13. </tr>
14. <tr>
15. <td>请确认输入新密码：</td>
16. <td style="text-align: left; padding-left: 10px;"><input type="password" id="reNewPassword" name="reNewPassword"
17. class="easyui-validatebox" data-options="required:true" validType="equalTo['newPassword']" />
18. </td>
19. </tr>
20. </table>
====================================================================================
Js代码
1. /**
2. * 扩展easyui的validator插件rules，支持更多类型验证
3. */
4. $.extend($.fn.validatebox.defaults.rules, {
5. minLength : { // 判断最小长度
6. validator : function(value, param) {
7. return value.length >= param[0];
8. },
9. message : '最少输入 {0} 个字符'
10. },
11. length : { // 长度
12. validator : function(value, param) {
13. var len = $.trim(value).length;
14. return len >= param[0] && len <= param[1];
15. },
16. message : "输入内容长度必须介于{0}和{1}之间"
17. },
18. phone : {// 验证电话号码
19. validator : function(value) {
20. return /^(($\d{2,3}$)|(\d{3}\-))?($0\d{2,3}$|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
21. },
22. message : '格式不正确,请使用下面格式:020-88888888'
23. },
24. mobile : {// 验证手机号码
25. validator : function(value) {
26. return /^(13|15|18)\d{9}$/i.test(value);
27. },
28. message : '手机号码格式不正确'
29. },
30. phoneAndMobile : {// 电话号码或手机号码
31. validator : function(value) {
32. return /^(($\d{2,3}$)|(\d{3}\-))?($0\d{2,3}$|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value) || /^(13|15|18)\d{9}$/i.test(value);
33. },
34. message : '电话号码或手机号码格式不正确'
35. },
36. idcard : {// 验证身份证
37. validator : function(value) {
38. return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value) || /^\d{18}(\d{2}[A-Za-z0-9])?$/i.test(value);
39. },
40. message : '身份证号码格式不正确'
41. },
42. intOrFloat : {// 验证整数或小数
43. validator : function(value) {
44. return /^\d+(\.\d+)?$/i.test(value);
45. },
46. message : '请输入数字，并确保格式正确'
47. },
48. currency : {// 验证货币
49. validator : function(value) {
50. return /^\d+(\.\d+)?$/i.test(value);
51. },
52. message : '货币格式不正确'
53. },
54. qq : {// 验证QQ,从10000开始
55. validator : function(value) {
56. return /^[1-9]\d{4,9}$/i.test(value);
57. },
58. message : 'QQ号码格式不正确'
59. },
60. integer : {// 验证整数
61. validator : function(value) {
62. return /^[+]?[1-9]+\d*$/i.test(value);
63. },
64. message : '请输入整数'
65. },
66. chinese : {// 验证中文
67. validator : function(value) {
68. return /^[\u0391-\uFFE5]+$/i.test(value);
69. },
70. message : '请输入中文'
71. },
72. chineseAndLength : {// 验证中文及长度
73. validator : function(value) {
74. var len = $.trim(value).length;
75. if (len >= param[0] && len <= param[1]) {
76. return /^[\u0391-\uFFE5]+$/i.test(value);
77. }
78. },
79. message : '请输入中文'
80. },
81. english : {// 验证英语
82. validator : function(value) {
83. return /^[A-Za-z]+$/i.test(value);
84. },
85. message : '请输入英文'
86. },
87. englishAndLength : {// 验证英语及长度
88. validator : function(value, param) {
89. var len = $.trim(value).length;
90. if (len >= param[0] && len <= param[1]) {
91. return /^[A-Za-z]+$/i.test(value);
92. }
93. },
94. message : '请输入英文'
95. },
96. englishUpperCase : {// 验证英语大写
97. validator : function(value) {
98. return /^[A-Z]+$/.test(value);
99. },
100. message : '请输入大写英文'
101. },
102. unnormal : {// 验证是否包含空格和非法字符
103. validator : function(value) {
104. return /.+/i.test(value);
105. },
106. message : '输入值不能为空和包含其他非法字符'
107. },
108. username : {// 验证用户名
109. validator : function(value) {
110. return /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i.test(value);
111. },
112. message : '用户名不合法（字母开头，允许6-16字节，允许字母数字下划线）'
113. },
114. faxno : {// 验证传真
115. validator : function(value) {
116. return /^(($\d{2,3}$)|(\d{3}\-))?($0\d{2,3}$|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
117. },
118. message : '传真号码不正确'
119. },
120. zip : {// 验证邮政编码
121. validator : function(value) {
122. return /^[1-9]\d{5}$/i.test(value);
123. },
124. message : '邮政编码格式不正确'
125. },
126. ip : {// 验证IP地址
127. validator : function(value) {
128. return /d+.d+.d+.d+/i.test(value);
129. },
130. message : 'IP地址格式不正确'
131. },
132. name : {// 验证姓名，可以是中文或英文
133. validator : function(value) {
134. return /^[\u0391-\uFFE5]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);
135. },
136. message : '请输入姓名'
137. },
138. engOrChinese : {// 可以是中文或英文
139. validator : function(value) {
140. return /^[\u0391-\uFFE5]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);
141. },
142. message : '请输入中文'
143. },
144. engOrChineseAndLength : {// 可以是中文或英文
145. validator : function(value) {
146. var len = $.trim(value).length;
147. if (len >= param[0] && len <= param[1]) {
148. return /^[\u0391-\uFFE5]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);
149. }
150. },
151. message : '请输入中文或英文'
152. },
153. carNo : {
154. validator : function(value) {
155. return /^[\u4E00-\u9FA5][\da-zA-Z]{6}$/.test(value);
156. },
157. message : '车牌号码无效（例：粤B12350）'
158. },
159. carenergin : {
160. validator : function(value) {
161. return /^[a-zA-Z0-9]{16}$/.test(value);
162. },
163. message : '发动机型号无效(例：FG6H012345654584)'
164. },
165. same : {
166. validator : function(value, param) {
167. if ($("#" + param[0]).val() != "" && value != "") {
168. return $("#" + param[0]).val() == value;
169. } else {
170. return true;
171. }
172. },
173. message : '两次输入的密码不一致!'
174. }
175. });
176. /**
177. * 扩展easyui validatebox的两个方法.移除验证和还原验证
178. */
179. $.extend($.fn.validatebox.methods, {
180. remove : function(jq, newposition) {
181. return jq.each(function() {
182. $(this).removeClass("validatebox-text validatebox-invalid").unbind('focus.validatebox').unbind('blur.validatebox');
183. // remove tip
184. // $(this).validatebox('hideTip', this);
185. });
186. },
187. reduce : function(jq, newposition) {
188. return jq.each(function() {
189. var opt = $(this).data().validatebox.options;
190. $(this).addClass("validatebox-text").validatebox(opt);
191. // $(this).validatebox('validateTip', this);
192. });
193. },
194. validateTip : function(jq) {
195. jq = jq[0];
196. var opts = $.data(jq, "validatebox").options;
197. var tip = $.data(jq, "validatebox").tip;
198. var box = $(jq);
199. var value = box.val();
200. function setTipMessage(msg) {
201. $.data(jq, "validatebox").message = msg;
202. };
203. var disabled = box.attr("disabled");
204. if (disabled == true || disabled == "true") {
205. return true;
206. }
207. if (opts.required) {
208. if (value == "") {
209. box.addClass("validatebox-invalid");
210. setTipMessage(opts.missingMessage);
211. $(jq).validatebox('showTip', jq);
212. return false;
213. }
214. }
215. if (opts.validType) {
216. var result = /([a-zA-Z_]+)(.*)/.exec(opts.validType);
217. var rule = opts.rules[result[1]];
218. if (value && rule) {
219. var param = eval(result[2]);
220. if (!rule["validator"](value, param)) {
221. box.addClass("validatebox-invalid");
222. var message = rule["message"];
223. if (param) {
224. for (var i = 0; i < param.length; i++) {
225. message = message.replace(new RegExp("\\{" + i + "\\}", "g"), param[i]);
226. }
227. }
228. setTipMessage(opts.invalidMessage || message);
229. $(jq).validatebox('showTip', jq);
230. return false;
231. }
232. }
233. }
234. box.removeClass("validatebox-invalid");
235. $(jq).validatebox('hideTip', jq);
236. return true;
237. },
238. showTip : function(jq) {
239. jq = jq[0];
240. var box = $(jq);
241. var msg = $.data(jq, "validatebox").message
242. var tip = $.data(jq, "validatebox").tip;
243. if (!tip) {
244. tip = $("<div class=\"validatebox-tip\">" + "<span class=\"validatebox-tip-content\">" + "</span>" + "<span class=\"validatebox-tip-pointer\">" + "</span>" + "</div>").appendTo("body");
245. $.data(jq, "validatebox").tip = tip;
246. }
247. tip.find(".validatebox-tip-content").html(msg);
248. tip.css({
249. display : "block",
250. left : box.offset().left + box.outerWidth(),
251. top : box.offset().top
252. });
253. },
254. hideTip : function(jq) {
255. jq = jq[0];
256. var tip = $.data(jq, "validatebox").tip;
257. if (tip) {
258. tip.remove;
259. $.data(jq, "validatebox").tip = null;
260. }
261. }
262. });
easyUi动态验证提示信息的清除：
在使用带 validatebox 的输入框，第一次没输入出现如图验证提示信息
但是点击窗口取消后，再次打开窗口后输入框仍然带有验证信息，查看APi也没有找到解决的方法于是分析了一下页面代码，采用下面处理成功，

$(".validatebox-tip").remove();
$(".validatebox-invalid").removeClass("validatebox-invalid");

另外，有一篇文章
easyui验证的删除和恢复地址http://liuna718-163-com.iteye.com/blog/1726145 供参考
引用一下他的代码：
Js代码
1. $.extend($.fn.validatebox.methods, {
2. remove: function(jq, newposition){
3. return jq.each(function(){
4. $(this).removeClass("validatebox-text validatebox-invalid").unbind('focus').unbind('blur');
5. });
6. },
7. reduce: function(jq, newposition){
8. return jq.each(function(){
9. var opt = $(this).data().validatebox.options;
10. $(this).addClass("validatebox-text").validatebox(opt);
11. });
12. }
13. });
15. //使用
16. $('#id').validatebox('remove'); //删除
17. $('#id').validatebox('reduce'); //恢复
设置Datagrid中Editor中验证的清除：
Js代码
1. $.extend($.fn.datagrid.methods, {
2. setDColumnTitle: function(jq, option){
3. if(option.field){
4. return jq.each(function(){
5. var $panel = $(this).datagrid("getPanel");
6. var $field = $('td[field='+option.field+']',$panel);
7. if($field.length){
8. var $span = $("span",$field).eq(0);
9. var $span1 = $("span",$field).eq(1);
10. $span.html(option.title);
11. $span1.html(option.title);
12. }
13. });
14. }
15. return jq;
16. } ,
18. removeRequired: function(jq, field){
19. if(field){
20. return jq.each(function(){
21. var $panel = $(this).datagrid("getPanel");
22. var $field = $('td[field='+field+']',$panel);
23. if($field.length){
24. var $input = $("input",$field);
25. $input.removeClass("validatebox-text validatebox-invalid").unbind('focus').unbind('blur');
26. }
27. });
28. }
29. return jq;
30. },
31. addRequired: function(jq, field){
32. if(field){
33. return jq.each(function(){
34. var $panel = $(this).datagrid("getPanel");
35. var $field = $('td[field='+field+']',$panel);
36. if($field.length){
37. var $input = $("input",$field);
38. $input.addClass("validatebox-text validatebox-invalid").unbind('focus').unbind('blur');
39. }
40. });
41. }
42. }
43. });
45. 使用：
46. $obj.datagrid('removeRequired','startPort');
47. $obj.datagrid('addRequired','startPort');

0 0