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

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

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

[sql] view
plaincopyprint?





<input class="easyui-validatebox" id="inputTest" />

<input type="button" id="buttonTest" value="disabled" />

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

[javascript] view
plaincopyprint?





$('#inputTest').validatebox({

required: true,

validType: 'length5'

});

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

[javascript] view
plaincopyprint?





$.extend($.fn.validatebox.defaults.rules, {

length5: {// 验证长度

validator: function (value) {

if (boolean = value.length == 5) {

$("#buttonTest").removeAttr("disabled");//启用按钮

return true;

}

else {

$("#buttonTeat").attr({ "disabled": "disabled" });//禁用按钮

return false;

}

},

message: '输入长度需为5位'

}

});

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

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