前军教程网

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

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

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

话不多说，上代码：

      <form class="layui-form" style="padding: 20px;" action="" lay-filter="example">

        <div class="layui-form-item">
          <label class="layui-form-label">单选框</label>
          <div class="layui-input-block">
            <input type="radio" name="LeaveBJ" value="否" title="否" lay-verify="otherReq">
          </div>
        </div>
      <form>

    //自定义验证单选多选规则
    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 '必填项不能为空';
            }
        }
    });

个人公众号：肆拾手记