Layui表单自定义checkbox和radio验证

Layui是一个非常好的开源开发框架。内置了很多丰富的功能，但是也有一些功能还是需要我们自己来写的。

比如，在进行表单验证的时候，有时会要求在一开始不对checkbox或radio设置任何状态，也就是说它们的默认状态是未选中，但是又需要我们在提交表单时去验证它们是否被选中，可是Layui又没有提供这一功能，那么我们该怎么办呢？

这时，我们只需要扩展一下，自定义验证来实现这一需求。

话不多说，上代码：

<code>
      <form>/<code>

<code>    //自定义验证单选多选规则
    layui.form.verify({
        //   校验单选复选
        myReq: 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 + '"]') //获取需要校验的元素
                console.log(verifyElem)
                
                var isTrue = verifyElem.is(':checked') //是否命中校验
                ,
                focusElem = verifyElem.next().find('i.layui-icon'); //焦点元素
                console.log(verifyElem)
            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 '必填项不能为空';
            }
        }
    });/<code>

閱讀更多 肆拾手記 的文章

關鍵字: 表单 item Layui