layui踩坑日常-实现动态生成表单自定义验证规则

先看需求

录入信息功能，指的是根据一张动态获取的数据库表的结构，新增一条数据。
1.需要前端对输入的字段信息进行一些判断，包括：文本类型、文本长度、是否必填。
2.不同的文本类型对应不同的输入框：时间使用layui的时间选择器；长文本使用layui的文本域；其他类型使用layui的普通输入框。
3.不同字段需要对长度进行判断，需要判断是否为必填项(图中带*的就是)，需要判断是否为数字类型。

表结构

里面字段很多，主要是int 、varchar、datetime、text这几种类型。

最终实现的效果

封装的方法

 // 封装判断长度规则
function setVerify(fieldName, num) {
    let l = parseInt(num);
    //  方法1
    // let obj = {};
    // obj[fieldName] = function (value) {
    //     if (value.length > l) {
    //         return `${fieldName}不能超过${l}个字符`;
    //     }
    // },
    //     layui.form.verify(obj);
    //  方法2
    layui.form.verify(
        {
            [fieldName]: function (value) {
                if (value.length > l) {
                    return `${fieldName}不能超过${l}个字符`;
                }
            }
        }
    );
}

 // 渲染所有时间选择器
function renderTimes(arr) {
    if (arr.length > 0) {
        for (let i = 0; i < arr.length; i++) {
            renderTime(`#${arr[i]}`, 'date', '', '');
        }
    }
}

使用位置

            if (res.code == 200) {
                let data = res.obj;
                console.log("基本数据：");
                console.log(data);
                let needTimeArr = [];//需要实例化时间选择器的字段
                for (let i = 0; i < data.length; i++) {
                    // 表格：表结构里的表格
                    if (data[i].nulls == "YES") {
                        data[i].nulls = "否"
                    } else {
                        data[i].nulls = "是"
                    };

                    let tr = `
                    <tr>
                      <td>${data[i].field}</td>
                      <td>${data[i].type}</td>
                      <td>${data[i].nulls}</td>
                      <td>${data[i].length}</td>
                      <td>${data[i].comment}</td>
                      <td>${data[i].comment}</td>
                    </tr>`;
                    $("#tbody").append(tr);

                    // 下拉框：表信息用到的下拉框
                    let opts = `<option value="${data[i].type}">${data[i].field}</option>`;
                    $("#field").append(opts);

                    // 表头：表信息layui表格的表头
                    let obj = {
                        field: data[i].field,
                        title: data[i].comment,
                    }
                    if (obj.title == "") { obj.title = obj.field }
                    cols_table.push(obj);

                    /*表单-开始 */
                    // 表单：录入数据的表单结构
                    let str_nulls = "";//星星*
                    let str_verify = "";//判断规则
                    let str_field = "";//字段名称
                    let str_comment = "";//字段描述
                    let maxlength = "";//文本域的最大长度
                    let inputBox = "";//输入框盒子


                    str_field = `${data[i].field}`;
                    str_comment = `${data[i].comment}`;
                    //判断是否为必填
                    if (data[i].nulls == "是") {
                        str_nulls = `<i class="font-red">*</i>`;
                        str_verify = `required`;
                    }

                    //判断是否有字段描述
                    if (str_comment == "") {
                        str_comment = str_field;
                    }

                    //判断数据类型
                    if (data[i].type == "int" || data[i].type == "tinyint" || data[i].type == "tinyint" || data[i].type == "bigint" || data[i].type == "double") {

                        str_verify = str_verify + "|" + "number";//数字规则
                        str_verify = str_verify + "|" + data[i].field;//长度规则
                        setVerify(data[i].field, data[i].length);//新建规则，规则名字就是字段名

                    }
                    else if (data[i].type == "text" || data[i].type == "longtext") {

                        maxlength = data[i].length;//文本域最大长度

                    } else {

                        str_verify = str_verify + "|" + data[i].field;//长度规则
                        setVerify(data[i].field, data[i].length);//新建规则，规则名字就是字段名

                    }

                    // 匹配输入框盒子
                    if (data[i].type == "text" || data[i].type == "longtext") {
                        inputBox = `
                        <div class="layui-input-block">
                            <textarea name="${data[i].field}" placeholder="请输入内容" class="layui-textarea" rows="1" maxlength="${maxlength}" lay-verify="${str_verify}"></textarea>
                        </div>`;
                    }
                    else if (data[i].type == "datetime") {
                        inputBox = `
                        <div class="layui-input-block public-time-box">
                        <input type="text" name="${data[i].field}" placeholder="请选择时间" autocomplete="off" class="layui-input"
                            id="${data[i].field}">
                       </div>`;
                        needTimeArr.push(data[i].field);

                    } else {
                        inputBox = `
                        <div class="layui-input-block">
                            <input type="text" name="${data[i].field}"  autocomplete="off"
                            placeholder="请输入" class="layui-input" lay-verify="${str_verify}"
                            lay-reqtext="${data[i].field}不能为空">
                        </div>`;
                    }


                    let items = `
                        <div class="layui-form-item flexbox">
                        <div class="label flexbox">
                            <span class="font-t" title="${str_field}">${str_nulls} ${str_field}</span>
                            <span class="font-b" title="${str_field}">${str_comment}</span>
                        </div>
                             ${inputBox} 
                        </div>`;

                    $("#addDataForm").append(items);
                    /*表单-结束 */

                }

                renderTimes(needTimeArr);//渲染所有时间选择器
                layui.form.render();//重载
                getTableData();//获取表格数据

            }

功能核心 : lay-verify=“验证规则名称”

别人总结好的：

总结

1.分析需求，对不同的字段进行判断，执行不同的验证规则。
2.动态生成不同验证规则，规则名称以字段名命名。
3.封装方法，减轻痛苦。