Lay-ui自定义radio表单验证

由于无法通过required直接对radio或者check设置必填，因此采用自定义的表单验证方式，最终结果如下图。

前端代码：

//此代码用js拼接而成，html直接根据内容自主拼接即可（此js代码为table自定义选项内容）
{
    field: '', title: '***', align: 'center',
    templet: function (d) {
        var name = "dataList_" + d.PzscoreId + "scoreId_" + d.ScoreId;
        if (d.Score_Type == 1) {
            var list = d.Details.split(",");
            var str = '';
            for (var i = 0; i < list.length; i++) {
                //checkRadio为自定义规则中的名字
                str += '<input type="radio" lay-verify="checkRadio" name="' + name + '" value="' + list[i] + '" title="' + list[i];
                if (list[i] == d.Value)
                    str += '" checked>&nbsp;&nbsp;';
                else
                    str += '" >&nbsp;&nbsp;';
            }
            return str;
        }
        return '<input type="text" class="layui-input" style="height:28px" name="' + name + '" value="' + d.Value + '"required placeholder="请输入" lay-verify="number" autocomplete="off">';
    }
}

JS代码：

form.verify({
    //checkRadio为html代码里对应的lay-verify="checkRadio"
    checkRadio: 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 '必填项不能为空';
        }
    }
});

摘自：https://blog.csdn.net/haibo0668/article/details/94134560

标签：focusElem,自定义,item,radio,Lay,var,nbsp
来源： https://www.cnblogs.com/TwoBamboo/p/15974541.html