layui 自定义校验规则

最新推荐文章于 2024-04-09 16:15:18 发布

shadow489

最新推荐文章于 2024-04-09 16:15:18 发布

阅读量427

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_56404022/article/details/129245024

版权

该段代码展示了在layui框架中如何添加自定义验证规则，特别是针对otherReq的校验。当lay-verify=otherReq时，会触发一个函数检查输入值和选择状态，如果为空或者未选中，将高亮显示并提示必填项不能为空。验证过程涉及到获取和设置元素焦点以及样式调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//使用时将lay-verify="otherReq" 添加到校验代码中
lay-verify="otherReq"




//自定义验证规则
    form.verify({
        //otherReq 与监听器中字段相同
        otherReq: function(value,item){
            var $ = layui.$;
            var verifyName=$(item).attr('name')
                , verifyType=$(item).attr('type')
                ,formElem=$(item).parents('.layui-form')//获取当前所在的form元素，如果存在的话
//,verifyElem=formElem.find('input[name='+verifyName+']')//获取需要校验的元素
                ,verifyElem=formElem.find("input[name='"+verifyName+"']")//获取需要校验的元素
                ,isTrue= verifyElem.is(':checked')//是否命中校验
                ,focusElem = verifyElem.next().find('i.layui-icon');//焦点元素
            if(!isTrue || !value){
                //定位焦点
                focusElem.css(verifyType=='radio'?{"color":"#FF5722"}:{"border-color":"#FF5722"});
                //对非输入框设置焦点
                focusElem.first().attr("tabIndex","1").css("outline","0").blur(function() {
                    focusElem.css(verifyType=='radio'?{"color":""}:{"border-color":""});
                }).focus();
                return '必填项不能为空';
            }
        }
    });