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

实现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中重写验证方法)

Jquery – 禁止/恢复按钮