您好,欢迎来到化拓教育网。
搜索
您的当前位置:首页Easyui validatebox修改

Easyui validatebox修改

来源:化拓教育网
Easyui validatebox修改

1.当text发生变化时在校验:

Easyui validatebox个人感觉还是比较好用的,但是发现他不是只有text改变并离开编辑框的时候才验证,而是不停的做验证;如果是js脚本的本地验证还好,如果是远程验证(如:调用数据库检测信息是否已存在)那就不停的向服务器发送请求,这就比较麻烦啦;通过查看Easyui validatebox的js脚本文件,发现Easyui validatebox尽然是在编辑框获得焦点之后,启用了定时器来不停的做校验的,郁闷!源码如下:

1 box.unbind(\".validatebox\").bind(\"focus.validatebox\function(){2 _2e9.validating=true;3 (function(){4 if(_2e9.validating){5 _2ee(_2e8);6 setTimeout(arguments.callee,200);7 }8 })();9 })

找到问题,那就修改,将上面的代码替换成下面的代码,保证只在获取焦点并且值为空或者值发生改变时进行校验;

1 box.unbind(\".validatebox\").bind(\"focus.validatebox\function() { 2 if (box.val().length == 0) { 3 _2e9.validating = true; 4 if (_2e9.validating) { 5 _2ee(_2e8); 6 }

7 }; 8 }).bind(\"change.validatebox\function() { 9 _2e9.validating = true;10 if (_2e9.validating) {11 _2ee(_2e8);12 } 13 })

2.取消校验:

当把包含Easyui validatebox的div转换成dialog显示时,如果本次的校验未通过,然后取消了本次操作,那么本次的校验会保留,如果在打开dialog重新赋空值或正确的值,但是还是显示验证未通过,给用户造成错觉,但是Easyui validatebox并不提供取消校验的方法,查看源码发现可以通过如下方式取消验证不通过的标识(那个红色感叹号和错误消息),为了更好的控制,这条语句的设计是一次取消一个validatebox的验证标识(elemId为validatebox的id) $(\"#\" + elemId).removeClass('validatebox-invalid'); 3.扩展自定义验证:

Easyui validatebox提供了验证方式的扩展,但是如果一次扩展一条的话,没新增有一种就需要该一次js文件,比较麻烦,我做了一个正则表达式效验,这样使用时只需要在相应的Easyui validatebox的aspx页面的定义是加入效验的侦测表达式即可,源码如下:

1 $.extend($.fn.validatebox.defaults.rules, { 2 custom_reg: { 3 validator: function(value, param) { 4 var m_reg = new

RegExp(param[0]); //传递过来的正则字符串中的\"\\\"必须是\"\\\\\" 5 if (!m_reg.test(value)) { 6

$.fn.validatebox.defaults.rules.custom_reg.message = param[1]; 7 return false; 8 } 9 else {10 return true;11 }12 },13 message: ''14 }15 });

使用方式如下:(两个参数,第一个是正则表达式,第二个是错误提示信息)

1

style=\"color:#ff0000;\">validType=\"custom_reg['^1\\d{10}style=\"color:#ff0000;\">,'手机号码必须是11位数字!']\" missingMessage=\"请输入客户电话!\" style=\"width:150px\" required=\"true\"/>
2
 3

下面这个是远程效验(这块使用的是同步模式,使用异步会在服务器返回值之前返回校验的结果值);

4
name=\"code\">$.extend($.fn.validatebox.defaults.rules, { 5         custom_remote: { 6             validator: function(value, param) { 7                 var postdata = {}; 8                 postdata[param[1]] = value; 9                 var m_result =$.ajax({ type: \"POST\//http请求方式10                     url: param[0],    //服

务器段url地址11 data:postdata, //发送给服务器段的数据12 dataType: \"type\//告诉JQuery返回的数据格式13 async:

false14 }).responseText;15 if (m_result == \"False\") {16 $.fn.validatebox.defaults.rules.custom_remote.message = param[2];17 return false;18 }19

else {20 return true;21 }22 },23 message: ''24 }

25

26

用方式如下:(三个参数,第一个是调用的url,第二个是传递给服务器的参数名称,第三个是错误提示信息)

27
style=\"color:#ff0000;\">class=\"easyui-validatebox txt-number\" required=\"true\" missingMessage=\"请输入卡号!\"28

validType=\"custom_remote['member.ashx?method=check_cardid','cardid','输入的卡号已使用!']\" style=\"width:150px\"/>

29

以下是前两个的结合,先用正则表达式本地验证,通过后在发送服务器验证;

30

$.extend($.fn.validatebox.defaults.rules, {31 Composite_validation:32 {33 validator: function(value, param) {34 var m_reg = new RegExp(param[0]); //传递过来的正则字符串中的\"\\\"必须是\"\\\\\"35 if (!m_reg.test(value)) {36

$.fn.validatebox.defaults.rules.Composite_validation.message = param[1];37 return false;38 }39 else {40 var postdata = {};41 postdata[param[3]] = value;42 var result = $.ajax({43 url: param[2],44 data: postdata,45 async: false,46 type: \"post\"47 }).responseText;48 if (result == \"False\") {49

$.fn.validatebox.defaults.rules.Composite_validation.message = param[4];50

return false;51 }52 else {53 return true;54 }55 }56 },57 message: ''58 }59 });

60

用方式如下:(五个参数,第一个是正则表达式,第二个是错误提示信息,第三个是调用的url,第四个是传递给服务器的参数名称,第五个是错误提示信息)

61
id=\"txt_CustIdentity\" class=\"easyui-validatebox txt-number\" style=\"width:150px\" 62 style=\"color:#ff0000;\">validType=\"Composite_validation['^\\\\d{14}(\\\\d{1}|\\\\d{4}|\\\\d{3}x),'身份证号码为15或18位数字!

','member.ashx?method=check_Identityid','Identityid','该身份证号已办卡!']\" missingMessage=\"请输入身份证号码!\" required=\"true\" />

63

65

备注:本人水平有限,如有错误,欢迎大家拍砖及留言指正 66

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- huatuo9.cn 版权所有 赣ICP备2023008801号-1

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务