标签：focusElem 自定义 item radio Lay var nbsp

由于无法通过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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。