1. 程式人生 > 其它 >Lay-ui自定義radio表單驗證

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