实现Easyui文本框验证结果控制button启用/禁用
--BY ZYZ
这里我需要实现某个文本框在验证通过时,test按钮才为可用状态。
首先添加一个文本框和按钮。
<input class="easyui-validatebox" id="inputTest" />
<input type="button" id="buttonTest" value="disabled" />
在初始化时设置文本框的验证方法,需要写在$(function () {});里。
$('#inputTest').validatebox({
required: true,
validType: 'length5'
});
这里关键的地方是需要扩展validatebox的规则。这个在EasyUI的官方文档里也有说明。
$.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才可点击,否者是灰色的。
这只是个引见,具体应用时可以有很多变化,希望能有帮助。
参考:
扩展easyui的validator插件rules,支持更多类型验证(esayui中重写验证方法)