Lay-ui自定義radio表單驗證
阿新 • • 發佈:2022-03-07
由於無法通過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> '; else str += '" > '; } 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 '必填項不能為空'; } } });