layui學習——使用js自定義觸發表單驗證


1、實現方法

  想要自定義觸發layui表單驗證功能,但是官方並沒有提供這種方法

  找到layui官方源碼中的form.js

  將下面這部分代碼寫入form.js文件里

/**
*  z:表單所在的form標簽的id
*  return:是否通過驗證
**/
u.prototype.doVerify = 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: 5, shift: 6 }), n.android || n.ios || setTimeout(function () { r.focus() }, 7), o.addClass(s), e = !0 } }), e) return e }); return !e; }

2、測試驗證

  制定驗證規則

form.verify({
    WHCode: [/.{6,12}/, "倉庫編號在6-12位"]
});

  觸發條件,這里把點擊彈窗的btn1作為表單驗證的觸發條件

layer.open({
    type: 1,
    area: ['auto', 'auto'],
    title: '倉庫編輯',
    content: $("#WHAE"),
    btn: ['確定', '清空'],
    btn1: function (index) {
        form.doVerify("WHAE");
    }
})

  結果如下圖


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM