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组件。有需求,那就开搞吧。
正文
先看效果 这里为了看效果我把页面放到了最小
代码:
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