Layui Form 如何主动验证表单是否通过

Layui Form 如何主动验证表单是否通过

1. 最近使用Layui Form时遇到一个问题，layui的form
   好像只能通过submit来触发表单的验证，当没有submit时就没法进行验证和阻止提交。

2. 于是扩展了一下form.js， 代码如下：

 u.prototype.VerifyForm = function (z) {
            var e = null,
                a = f.config.verify,
                s = "layui-form-danger",
                c = t("#" + z),
                d = c.find("*[lay-verify]");
            layui.each(d, function (l, r) {
                var o = t(this),
                    c = o.attr("lay-verify").split("|"),
                    u = o.attr("lay-verType"),
                    d = o.val();
                if (o.removeClass(s), layui.each(c, function (t, l) {
                    var c, f = "", v = "function" == typeof a[l];
                    if (a[l]) {
                        var c = v ? f = a[l](d, r) : !a[l][0].test(d);
                        if (f = f || a[l][1], "required" === l && (f = o.attr("lay-reqText") || f), c) return "tips" === u ? i.tips(f, function () {
                            return "string" == typeof o.attr("lay-ignore") || "select" !== r.tagName.toLowerCase() && !/^checkbox|radio$/.test(r.type) ? o : o.next()
                        }(), { tips: 1 }) : "alert" === u ? i.alert(f, { title: "提示", shadeClose: !0 }) : i.msg(f, {
                            icon: 2,
                            shift: 6
                        }), n.android || n.ios || setTimeout(function () {
                            r.focus()
                        }, 7), o.addClass(s), e = !0
                    }
                }), e) return e
            });
            return !e;
        },

3. 将这一段复制到layui的form.js里即可。

4. 调用方法

layui.form.VerifyForm("formInfo")
--成功返回true 失败返回 false boolen型
--这里的“formInfo”就是表单的ID

```javascript
    function SaveForm() {
        if (layui.form.VerifyForm("formInfo"))
         {
            var formData = formEle.GetVal("formInfo");
            var postUrl = "";
            if (!keyValue)
                postUrl = '/SystemModule/BaseUser/SaveForm';
            else {
                formData.UserId = keyValue;
                postUrl = '/SystemModule/BaseUser/UpdateForm';
            }
            parent.$('.layui-layer-btn0').hide();
            $.postData({
                url: postUrl,
                data: formData,
                success: function (data) {
                    parent.layer.closeAll();
                    parent.table.reload('table', {
                        url: '/SystemModule/BaseUser/GetPageListJson'
                    });
                    parent.$('.layui-layer-btn0').show();
                },
                fail: function (xhr) {
                    parent.$('.layui-layer-btn0').show();
                    return layer.msg('Status:' + xhr.status + '，' + xhr.statusText + '，请稍后再试！');
                }
            });
        }
    }

5. 这样就可以在表单提交之前通过js方法调用表单验证了！

6.Layui 表单验证文档：https://www.layui.com/doc/modules/form.html#verify

本文地址：https://blog.csdn.net/qq_17837497/article/details/107505486