实现Easyui文本框验证结果控制button启用/禁用

这里我需要实现某个文本框在验证通过时，test按钮才为可用状态。

首先添加一个文本框和按钮。

[sql]  view plain copy print ?

1. <input class="easyui-validatebox" id="inputTest" />   
2. <input type="button" id="buttonTest" value="disabled" />  

在初始化时设置文本框的验证方法,需要写在$(function () {});里。

[javascript]  view plain copy print ?

1. $('#inputTest').validatebox({  
2.                 required: true,  
3.                 validType: 'length5'  
4.             });  

这里关键的地方是需要扩展validatebox的规则。这个在EasyUI的官方文档里也有说明。

[javascript]  view plain copy print ?

1. $.extend($.fn.validatebox.defaults.rules, {  
2.             length5: {// 验证长度  
3.                 validator: function (value) {  
4.                     if (boolean = value.length == 5) {  
5.                         $("#buttonTest").removeAttr("disabled");//启用按钮  
6.                         return true;  
7.                     }  
8.                     else {  
9.                         $("#buttonTeat").attr({ "disabled": "disabled" });//禁用按钮  
10.                         return false;  
11.                     }  
12.                 },  
13.                 message: '输入长度需为5位'  
14.             }  
15.         });  

如此，在文本框内输入长度为5位时，button才可点击，否者是灰色的。

这只是个引见，具体应用时可以有很多变化，希望能有帮助。