欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

layui 多表单验证

程序员文章站 2022-03-04 16:53:21
前言最近在用layui表单form组件时,发现一个问题、那就是如果页面中有多个form表单的话如何,进行提交时如何实现即不用自己一个一个的写js验证。又可以用layui知道的form组件。有需求,那就开搞吧。正文先看效果 这里为了看效果我把页面放到了最小代码:1、更改在form.js中增加方法2、使用方法/*** 我这儿是跟在了u.prototype.val方法后面了。 * content:实现多表格验证 验证失败只返回 false 否则 true *...

前言

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

正文

先看效果 这里为了看效果我把页面放到了最小
layui 多表单验证

代码:
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

相关标签: layui