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

class=\"html\"

name=\"code\">txt-number\"

id=\"txt_CustPhone\"

class=\"easyui-validatebox

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: false
14                 }).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

64

65

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

66