Layui Form 如何主动验证表单是否通过
程序员文章站
2022-04-27 11:42:58
Layui Form 如何主动验证表单是否通过最近使用Layui Form时遇到一个问题,layui的form好像只能通过submit来触发表单的验证,当没有submit时就没法进行验证和阻止提交。于是扩展了一下form.js, 代码如下: u.prototype.VerifyForm = function (z) { var e = null, a = f.config.verify, s = "l...
Layui Form 如何主动验证表单是否通过
-
最近使用Layui Form时遇到一个问题,layui的form
好像只能通过submit来触发表单的验证,当没有submit时就没法进行验证和阻止提交。 -
于是扩展了一下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;
},
-
将这一段复制到layui的form.js里即可。
-
调用方法
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 + ',请稍后再试!');
}
});
}
}
- 这样就可以在表单提交之前通过js方法调用表单验证了!
6.Layui 表单验证文档:https://www.layui.com/doc/modules/form.html#verify
本文地址:https://blog.csdn.net/qq_17837497/article/details/107505486
上一篇: 淘宝联盟2020返利比价新规分析
下一篇: 五大优化方式,不再让你的排名过山车