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. },
  13. 自从1.3.2版本开始，validatebox自身已经支持多重校验了，例如：
  14. input class="easyui-validatebox" data-options="required:true,validType:['email','length[0,20]']">
  15.  {field : 'startPort',title : "起始端口",editor: "text",width : 50,editor: {type: 'SuperValidatebox',options: {required: true,validType: ['integer','length[0,5]']}},自从1.3.2版本开始，validatebox自身已经支持多重校验了，例如：
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>
  9. $(function () {
  10. //设置text需要验证
  11. $('input[type=text]').validatebox();
  12. })
  13. </script>
  14. </head>
  15. <body>
  16. 邮箱验证：<input type="text" validtype="email" required="true" missingMessage="不能为空" invalidMessage="邮箱格式不正确" /><br />
  17. 网址验证：<input type="text" validtype="url" invalidMessage="url格式不正确[http://www.example.com]" /><br />
  18. 长度验证：<input type="text" validtype="length[8,20]" invalidMessage="有效长度8-20" /><br />
  19. 手机验证：<input type="text" validtype="mobile"  /><br />
  20. 邮编验证：<input type="text" validtype="zipcode" /><br />
  21. 账号验证：<input type="text" validtype="account[8,20]" /><br />
  22. 汉子验证：<input type="text" validtype="CHS" /><br />
  23. 远程验证：<input type="text" validtype="remote['checkname.aspx','name']" invalidMessage="用户名已存在"/>
  24. </body>
  25. </html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><script src="easyui1.2.4/jquery-1.6.min.js" type="text/javascript"></script><script src="easyui1.2.4/jquery.easyui.min.js" type="text/javascript"></script><!--自定义验证--><script src="easyui1.2.4/validator.js" type="text/javascript"></script><link href="easyui1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" /><script>$(function () {//设置text需要验证$('input[type=text]').validatebox();})</script>
</head>
<body>邮箱验证：<input type="text" validtype="email" required="true" missingMessage="不能为空" invalidMessage="邮箱格式不正确" /><br />网址验证：<input type="text" validtype="url" invalidMessage="url格式不正确[http://www.example.com]" /><br />长度验证：<input type="text" validtype="length[8,20]" invalidMessage="有效长度8-20" /><br />手机验证：<input type="text" validtype="mobile"  /><br />邮编验证：<input type="text" validtype="zipcode" /><br />账号验证：<input type="text" validtype="account[8,20]" /><br />汉子验证：<input type="text" validtype="CHS" /><br />远程验证：<input type="text" validtype="remote['checkname.aspx','name']" invalidMessage="用户名已存在"/>
</body>
</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. })
//扩展easyui表单的验证
$.extend($.fn.validatebox.defaults.rules, {//验证汉子CHS: {validator: function (value) {return /^[\u0391-\uFFE5]+$/.test(value);},message: '只能输入汉字'},//移动手机号码验证mobile: {//value值为文本框中的值validator: function (value) {var reg = /^1[3|4|5|8|9]\d{9}$/;return reg.test(value);},message: '输入手机号码格式不准确.'},//国内邮编验证zipcode: {validator: function (value) {var reg = /^[1-9]\d{5}$/;return reg.test(value);},message: '邮编必须是非0开始的6位数字.'},//用户账号验证(只能包括 _ 数字 字母) account: {//param的值为[]中值validator: function (value, param) {if (value.length < param[0] || value.length > param[1]) {$.fn.validatebox.defaults.rules.account.message = '用户名长度必须在' + param[0] + '至' + param[1] + '范围';return false;} else {if (!/^[\w]+$/.test(value)) {$.fn.validatebox.defaults.rules.account.message = '用户名只能数字、字母、下划线组成.';return false;} else {return true;}}}, message: ''}
})
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. });
$.extend($.fn.validatebox.defaults.rules, {        checkWSDL: {   validator: function(value,param){             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$";return reg.test(value);},   message: '请输入合法的WSDL地址'   },checkIp : {// 验证IP地址validator : function(value) {var reg = /^((1?\d?\d|(2([0-4]\d|5[0-5])))\.){3}(1?\d?\d|(2([0-4]\d|5[0-5])))$/ ;return reg.test(value);},message : 'IP地址格式不正确'}
});

=================================

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. });
$.extend($.fn.validatebox.defaults.rules, { selectValueRequired: { validator: function(value,param){          if (value == "" || value.indexOf('请选择') >= 0) { return false;}else {return true;}  }, message: '该下拉框为必选项' }
});
Java代码  
  1. <select id="serviceType" name="serviceType" style="width: 150px" class="easyui-combobox" required="true" validType="selectValueRequired"></select>
<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. }
equalTo : {validator : function(value, param) {return $("#" + param[0]).val() == value;},message : '两次输入的密码不一致!'},checkPassword :{validator : function(value,param){var sysUser = {};var flag ;sysUser.userPassword = value;$.ajax({url : root + 'login/checkPwd.do',type : 'POST',                    timeout : 60000,data:sysUser,async: false,  success : function(data, textStatus, jqXHR) {   if (data == "0") {flag = true; }else{flag = false;}}});if(flag){$("#userPassword").removeClass('validatebox-invalid');}return flag;},message: '原始密码输入错误！'}
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>
<table cellpadding="0" align="center" style="width: 98%; height: 98%; text-align: right;"><tr><td>请输入原密码：</td><td style="text-align: left; padding-left: 10px;"><input type="password" id="userPassword" name="userPassword" class="easyui-validatebox"data-options="required:true" validType="checkPassword"/></td></tr><tr><td>请输入新密码：</td><td style="text-align: left; padding-left: 10px;"><input type="password" id="newPassword" name="newPassword" class="easyui-validatebox"data-options="required:true" /></td></tr><tr><td>请确认输入新密码：</td><td style="text-align: left; padding-left: 10px;"><input type="password" id="reNewPassword" name="reNewPassword"class="easyui-validatebox" data-options="required:true"  validType="equalTo['newPassword']" /></td></tr>
</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的validator插件rules，支持更多类型验证*/
$.extend($.fn.validatebox.defaults.rules, {minLength : { // 判断最小长度validator : function(value, param) {return value.length >= param[0];},message : '最少输入 {0} 个字符'},length : { // 长度validator : function(value, param) {var len = $.trim(value).length;return len >= param[0] && len <= param[1];},message : "输入内容长度必须介于{0}和{1}之间"},phone : {// 验证电话号码validator : function(value) {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);},message : '格式不正确,请使用下面格式:020-88888888'},mobile : {// 验证手机号码validator : function(value) {return /^(13|15|18)\d{9}$/i.test(value);},message : '手机号码格式不正确'},phoneAndMobile : {// 电话号码或手机号码validator : function(value) {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);},message : '电话号码或手机号码格式不正确'},idcard : {// 验证身份证validator : function(value) {return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value) || /^\d{18}(\d{2}[A-Za-z0-9])?$/i.test(value);},message : '身份证号码格式不正确'},intOrFloat : {// 验证整数或小数validator : function(value) {return /^\d+(\.\d+)?$/i.test(value);},message : '请输入数字，并确保格式正确'},currency : {// 验证货币validator : function(value) {return /^\d+(\.\d+)?$/i.test(value);},message : '货币格式不正确'},qq : {// 验证QQ,从10000开始validator : function(value) {return /^[1-9]\d{4,9}$/i.test(value);},message : 'QQ号码格式不正确'},integer : {// 验证整数validator : function(value) {return /^[+]?[1-9]+\d*$/i.test(value);},message : '请输入整数'},chinese : {// 验证中文validator : function(value) {return /^[\u0391-\uFFE5]+$/i.test(value);},message : '请输入中文'},chineseAndLength : {// 验证中文及长度validator : function(value) {var len = $.trim(value).length;if (len >= param[0] && len <= param[1]) {return /^[\u0391-\uFFE5]+$/i.test(value);}},message : '请输入中文'},english : {// 验证英语validator : function(value) {return /^[A-Za-z]+$/i.test(value);},message : '请输入英文'},englishAndLength : {// 验证英语及长度validator : function(value, param) {var len = $.trim(value).length;if (len >= param[0] && len <= param[1]) {return /^[A-Za-z]+$/i.test(value);}},message : '请输入英文'},englishUpperCase : {// 验证英语大写validator : function(value) {return /^[A-Z]+$/.test(value);},message : '请输入大写英文'},unnormal : {// 验证是否包含空格和非法字符validator : function(value) {return /.+/i.test(value);},message : '输入值不能为空和包含其他非法字符'},username : {// 验证用户名validator : function(value) {return /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i.test(value);},message : '用户名不合法（字母开头，允许6-16字节，允许字母数字下划线）'},faxno : {// 验证传真validator : function(value) {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);},message : '传真号码不正确'},zip : {// 验证邮政编码validator : function(value) {return /^[1-9]\d{5}$/i.test(value);},message : '邮政编码格式不正确'},ip : {// 验证IP地址validator : function(value) {return /d+.d+.d+.d+/i.test(value);},message : 'IP地址格式不正确'},name : {// 验证姓名，可以是中文或英文validator : function(value) {return /^[\u0391-\uFFE5]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);},message : '请输入姓名'},engOrChinese : {// 可以是中文或英文validator : function(value) {return /^[\u0391-\uFFE5]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);},message : '请输入中文'},engOrChineseAndLength : {// 可以是中文或英文validator : function(value) {var len = $.trim(value).length;if (len >= param[0] && len <= param[1]) {return /^[\u0391-\uFFE5]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);}},message : '请输入中文或英文'},carNo : {validator : function(value) {return /^[\u4E00-\u9FA5][\da-zA-Z]{6}$/.test(value);},message : '车牌号码无效（例：粤B12350）'},carenergin : {validator : function(value) {return /^[a-zA-Z0-9]{16}$/.test(value);},message : '发动机型号无效(例：FG6H012345654584)'},same : {validator : function(value, param) {if ($("#" + param[0]).val() != "" && value != "") {return $("#" + param[0]).val() == value;} else {return true;}},message : '两次输入的密码不一致!'}});
/*** 扩展easyui validatebox的两个方法.移除验证和还原验证*/
$.extend($.fn.validatebox.methods, {remove : function(jq, newposition) {return jq.each(function() {$(this).removeClass("validatebox-text validatebox-invalid").unbind('focus.validatebox').unbind('blur.validatebox');// remove tip// $(this).validatebox('hideTip', this);});},reduce : function(jq, newposition) {return jq.each(function() {var opt = $(this).data().validatebox.options;$(this).addClass("validatebox-text").validatebox(opt);// $(this).validatebox('validateTip', this);});},validateTip : function(jq) {jq = jq[0];var opts = $.data(jq, "validatebox").options;var tip = $.data(jq, "validatebox").tip;var box = $(jq);var value = box.val();function setTipMessage(msg) {$.data(jq, "validatebox").message = msg;};var disabled = box.attr("disabled");if (disabled == true || disabled == "true") {return true;}if (opts.required) {if (value == "") {box.addClass("validatebox-invalid");setTipMessage(opts.missingMessage);$(jq).validatebox('showTip', jq);return false;}}if (opts.validType) {var result = /([a-zA-Z_]+)(.*)/.exec(opts.validType);var rule = opts.rules[result[1]];if (value && rule) {var param = eval(result[2]);if (!rule["validator"](value, param)) {box.addClass("validatebox-invalid");var message = rule["message"];if (param) {for (var i = 0; i < param.length; i++) {message = message.replace(new RegExp("\\{" + i + "\\}", "g"), param[i]);}}setTipMessage(opts.invalidMessage || message);$(jq).validatebox('showTip', jq);return false;}}}box.removeClass("validatebox-invalid");$(jq).validatebox('hideTip', jq);return true;},showTip : function(jq) {jq = jq[0];var box = $(jq);var msg = $.data(jq, "validatebox").messagevar tip = $.data(jq, "validatebox").tip;if (!tip) {tip = $("<div class=\"validatebox-tip\">" + "<span class=\"validatebox-tip-content\">" + "</span>" + "<span class=\"validatebox-tip-pointer\">" + "</span>" + "</div>").appendTo("body");$.data(jq, "validatebox").tip = tip;}tip.find(".validatebox-tip-content").html(msg);tip.css({display : "block",left : box.offset().left + box.outerWidth(),top : box.offset().top});},hideTip : function(jq) {jq = jq[0];var tip = $.data(jq, "validatebox").tip;if (tip) {tip.remove;$.data(jq, "validatebox").tip = null;}}});

 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. });
  14. //使用
  15. $('#id').validatebox('remove'); //删除
  16. $('#id').validatebox('reduce'); //恢复
$.extend($.fn.validatebox.methods, {  remove: function(jq, newposition){  return jq.each(function(){  $(this).removeClass("validatebox-text validatebox-invalid").unbind('focus').unbind('blur');});  },reduce: function(jq, newposition){  return jq.each(function(){  var opt = $(this).data().validatebox.options;$(this).addClass("validatebox-text").validatebox(opt);});  }
});//使用
$('#id').validatebox('remove'); //删除
$('#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. } ,
  17. removeRequired: function(jq, field){
  18. if(field){
  19. return jq.each(function(){
  20. var $panel = $(this).datagrid("getPanel");
  21. var $field = $('td[field='+field+']',$panel);
  22. if($field.length){
  23. var $input = $("input",$field);
  24. $input.removeClass("validatebox-text validatebox-invalid").unbind('focus').unbind('blur');
  25. }
  26. });
  27. }
  28. return jq;
  29. },
  30. addRequired: function(jq, field){
  31. if(field){
  32. return jq.each(function(){
  33. var $panel = $(this).datagrid("getPanel");
  34. var $field = $('td[field='+field+']',$panel);
  35. if($field.length){
  36. var $input = $("input",$field);
  37. $input.addClass("validatebox-text validatebox-invalid").unbind('focus').unbind('blur');
  38. }
  39. });
  40. }
  41. }
  42. });
  43. 使用：
  44. $obj.datagrid('removeRequired','startPort');
  45. $obj.datagrid('addRequired','startPort');

EasyUI表单验证，自定义插件验证，自定义js插件验证，远程验证，常见手机号，中英文，qq等验证规则验证...相关推荐

  1. EasyUI表单验证，自定义插件验证，自定义js插件验证，远程验证，常见手机号，中英文，qq等验证规则验证

     { field : 'startPort', title : "起始端口", editor: "text", width : 50, editor: { ...

  2. ant4 多个form 验证_ant-design表单处理和常用方法及自定义验证操作

    首先要说一下antdesign这个框架API和demo丰富,而且开发环境提供对应的warning来纠正用户的错误.是一个很好的组件库. 关于表单验证方面是依赖于 async-validator 库.百 ...

  3. php jq 提交表单验证,jQuery EasyUI 表单 – 表单验证 | 菜鸟教程

    jQuery EasyUI 表单 - 表单验证 本教程将向您展示如何验证一个表单.easyui 框架提供一个 validatebox 插件来验证一个表单.在本教程中,我们将创建一个联系表单,并应用 v ...

  4. java自定义表单_JSP实现用于自动生成表单标签html代码的自定义表单标签

    本文实例讲述了JSP实现用于自动生成表单标签HTML代码的自定义表单标签.分享给大家供大家参考.具体如下: 这个是自己写的一个简单的JSP表单标签,用于自动生成checkBox,select,radi ...

  5. 表单在线生成 html代码,JSP实现用于自动生成表单标签html代码的自定义表单标签...

    本文实例讲述了JSP实现用于自动生成表单标签html代码的自定义表单标签.分享给大家供大家参考.具体如下: 这个是自己写的一个简单的JSP表单标签,用于自动生成checkbox,select,radi ...

  6. easyui表单提交，后台获取不到值

    J2ee开发,使用easyui表单提交,在ie中可以正常将参数传递到后台,但使用firefox,chrome都无法将easyui的combobox值传递到后台,使用alert($('#form').s ...

  7. easyui复杂表单_jQuery EasyUI 表单 – 创建树形下拉框（ComboTree） | 菜鸟教程

    jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务 ...

  8. 页面打印插件 jquery.jqprint.js 插件使用实例

    页面打印插件 jquery.jqprint.js 插件使用实例 jquery.jqprint.js 插件下载 jqprint 是一个基于jQuery编写的页面打印的一个小插件,可以对页面指定元素的内容 ...

  9. EasyUI表单验证

    视频课:https://edu.csdn.net/course/play/7621 EasyUI的form表单里面的验证框,先讲解下validatebox类和相关的属性. 验证规则 验证规则是通过使用 ...

最新文章

  1. 使用标准模板find函数来对结构体容器进行查找
  2. 令人机双双崩溃的VS2008 SP1！WPF用户请勿更新！
  3. NowCoder110E Pocky游戏 状压DP
  4. 十八、Apriori算法介绍
  5. SAP CRM Archive Object的Maintenance view
  6. linux的基础知识——signal信号捕捉，信号集操作函数
  7. atitit. hb 原生sql跨数据库解决原理 获得hb 数据库类型执行期获得Dialect
  8. 2021年怎么自学前端？
  9. python爬虫什么意思-python爬虫什么意思
  10. jQuery判断是否为对象或者数组
  11. 使用VS.NET2003操作SQLServer DTS.
  12. 软件工程导论 四则运算
  13. 直播第三方美颜sdk是什么？
  14. Python Qt6快速入门-嵌入PyQtGraph图表
  15. SparkConf 配置的概念和用法
  16. VVC帧内预测（一）
  17. 思科ASA防火墙：内网telnet远程控制防火墙 外网ssh远程控制防火墙
  18. 删除github上的一个仓库或者仓库里面的某个文件
  19. CSP认证：行车路线
  20. 一键清除本地缓存的所有无用的docker镜像命令

热门文章

  1. Hyper-V应用指南之6－差异磁盘的使用[转]
  2. php使用memcache存储session
  3. Leetcode-探索 | 加一
  4. ZooKeeper 的典型应用场景
  5. Docker+Jenkins持续集成环境（3）集成PMD、FindBugs、Checkstyle静态代码检查工具并邮件发送检查结果...
  6. By.Xpath快速定位页面元素常用方法
  7. 微信小程序把玩（十一）icon组件
  8. maven初学者常见错误汇总（三）
  9. 艾伟_转载：深入研究 Repeater
  10. binlog开启和查看