2017-11-22  2,751 views 评论

LayUI 2.2.2版本自定义验证无效解决方案

LayUI升级至2.2.2后,坑还是非常多的,其中自定义表单验证在需要验证的表单为空时验证不通过依然执行操作,也就是自定义验证在表单不填写的情况下无效了。

以密码自定义验证及密码二次自定义验证为例,要求密码不能小于6位,两次输入的密码必须一致,按照以前的写法代码如下:

//自定义验证
form.verify({
    password: function (value) {
        if (value.length < 6) {
            return '密码至少得6个字符';
        }
    }, confirmPassword: function (value) {
        if (value !== $(".Password").val()) {
            return '两次密码输入不一致';
        }
    }
});

此时如果密码未填写,或重复密码未填写,则上面写的自定义验证就失效了,如下图:

 

经过调试,发现虽然文本框为空的时候,进入了自定义验证,但是return 错误信息后依然继续提交操作,经过尝试发现可以有两种解决方案

1)取巧方式,在Form提交中验证:

//Form提交中进行数据验证
form.on("submit(addUser)", function (data) {
    if (data.field.password.length<6) {
        layer.msg("密码至少得6个字符", {
            icon: 5,
            anim: 6
        });
        return false;
    }
    if (data.field.password !== data.field.confirmPassword) {
        layer.msg("两次密码输入不一致", {
            icon: 5,
            anim: 6
        });
        return false;
    }
    //TODO
});

 

2)修改源代码

   a)如果引用的是layui.all.js

   直接在layui.all.js中搜索查找    &&"required"===i        搜索查找到后将其注释,或删除

 

   b)如果引用的是layui.js

   找到lay/modules下的form.js,同样也是搜索查找    &&"required"===i        搜索查找到后将其注释,或删除

修改源码后,使用以前的自定义验证在文本框为空时一样可以进行验证啦。

 

给我留言

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: