layui 自定义验证单选框必填

猫猫不是喵喵.

于 2024-11-01 18:52:27 发布

阅读量584

点赞数 3

文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/2301_80687933/article/details/143438555

版权

随记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

对于输入框类型必填验证，只需要在 input 输入框加入 lay-verify = "required" 即可。但对于单选按钮这种特殊的该怎么办呢？layui 为我们提供了自定义验证。

1. 在单选按钮上添加自定义验证的名称

2. 验证规则如下

// 单选框自定义验证
        form.verify({
            radioVerify: function(value, item){ //value：表单的值、item：表单的DOM对象
                var $ = layui.$;
                var verifyName = $(item).attr('name')
                    ,verifyType = $(item).attr('type')
                    ,formElem = $(item).parents('.layui-form')   //获取当前所在的form元素，如果存在的话
                    ,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 '必填项不能为空';
                }