layui 多表单验证

前言

最近在用layui表单form组件时，发现一个问题、那就是如果页面中有多个form表单的话如何，进行提交时如何实现即不用自己一个一个的写js验证。又可以用layui知道的form组件。有需求，那就开搞吧。

正文

先看效果 这里为了看效果我把页面放到了最小

代码：
1、更改在form.js中增加方法
2、使用方法

/**
		* 我这儿是跟在了u.prototype.val方法后面了。
       * content:实现多表格验证 验证失败只返回 false  否则 true
       * time:2020-11-24 09:20
       * user:
       */
      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;
      },

然后是使用了

 var res = layui.form.VerifyForm("form") //表单一验证
      if(!res){
        return false;
      }
      //表单n 验证 因为我这儿的表单是动态添加的所有可以有好多
       var formModel = $('.formModel');
        $.each(formModel,function (key,val) {
         	var formLevel = $(val).attr('lay-filter');
         	var res1 = layui.form.VerifyForm(formLevel);
         	 if(!res1){
		       return false;
		      }
        })
        
     

当然一切重要的前提的 lay-verify=“required” 所有的一切得你增加的验证

	//lay-verify="required"
 <input type="text"  lay-verify="required"  class="layui-input">

本文地址：https://blog.csdn.net/qq_43789643/article/details/110230033