Easyui validatebox修改.doc

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(param0); /传递过来的正则字符串中的必须是 5 if (!m_reg.test(value) 6 $.fn.validatebox.defaults.rules.custom_reg.message = param1; 7 return false; 8 9 else 10 return true;11 12 ,13 message: 14 15 );使用方式如下：（两个参数，第一个是正则表达式，第二个是错误提示信息） 1 input id=txt_CustPhone class=easyui-validatebox txt-number validType=custom_reg1d10,手机号码必须是11位数字！ missingMessage=请输入客户电话！ style=width:150px required=true/ 2 3 下面这个是远程效验（这块使用的是同步模式，使用异步会在服务器返回值之前返回校验的结果值）； 4 $.extend($.fn.validatebox.defaults.rules, 5 custom_remote: 6 validator: function(value, param) 7 var postdata = ; 8 postdataparam1 = value; 9 var m_result =$.ajax( type: POST,/http请求方式10 url: param0, /服务器段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 = param2;17 return false;18 19 else 20 return true;21 22 ,23 message: 24 25 26 用方式如下：（三个参数，第一个是调用的url，第二个是传递给服务器的参数名称，第三个是错误提示信息） 27 input id=txt_cardid class=easyui-validatebox txt-number required=true missingMessage=请输入卡号！28 validType=custom_remotemember.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(param0); /传递过来的正则字符串中的必须是35 if (!m_reg.test(value) 36 $.fn.validatebox.defaults.rules.Composite_validation.message = param1;37 return false;38 39 else 40 var postdata = ;41 postdataparam3 = value;42 var result = $.ajax(43 url: param2,44 data: postdata,45 async: false,46 type: post47 ).responseText;48 if (result = False) 49 $.fn.validatebox.defaults.rules.Composite_validation.message = param4;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 validType=Composite_valida