可通过patch form.doVerify方法实现条件跳过校验规则,如提交草稿时跳过required;需动态移除隐藏字段的lay-verify属性并清除错误样式;多步骤表单应限定校验范围至当前step内元素。
提交草稿时跳过 required 校验
layui 默认不提供“条件性跳过某条规则”的开关,但可以通过修改 form.doverify 的行为实现。核心思路是:在验证前传入一个要忽略的规则列表(如 ["required"]),让校验逻辑主动跳过匹配项。
需手动 patch form.js(Layui 2.3+ 版本适用):
u.prototype.doVerify = function(z, y) {
var e = null,
a = f.config.verify,
s = "layui-form-danger",
c = i("#" + z),
d = c.find("*[lay-verify]");
layui.each(d, function(l, r) {
var o = i(this),
c = o.attr("lay-verify").split("|"),
u = o.attr("lay-verType"),
d = o.val();
o.removeClass(s);
layui.each(c, function(i, l) {
// 新增:若 l 在忽略列表 y 中,则跳过
if (y && y.indexOf(l) !== -1) return;
// 后续保持原验证逻辑...
});
});
};调用时传入忽略数组即可:
form.verify({ /* 自定义规则 */ });
form.doVerify('myForm', ['required']); // 提交草稿时只校验 phone/email 等,跳过 required- 必须在表单初始化后、提交前调用,不能写在
form.render()之前 -
y是字符串数组,不是正则或通配符,['req']不会匹配required - 该 patch 不影响内置规则执行顺序,仅过滤规则名,不改变错误提示位置或样式
根据 checkbox 状态动态启用/禁用某字段校验
比如「是否使用代理」为否时,代理地址字段应完全跳过校验。不能靠删 lay-verify 属性——因为 layui 的验证缓存会残留,导致隐藏后仍报错。
正确做法是:隐藏字段的同时,清空其 lay-verify 并移除 layui-form-danger 类:
$('input[name="proxyUrl"]').closest('.layui-form-item').hide();
$('input[name="proxyUrl"]').removeAttr('lay-verify').removeClass('layui-form-danger');- 必须同时操作 DOM 属性和 class,否则下次 show() 后验证仍触发
- 不要用
.attr('lay-verify', ''),空字符串仍会被识别为规则;要用removeAttr - 如果字段是
select或textarea,同样处理其直接父级.layui-form-item
多步骤表单中按 step 跳过未显示字段的校验
当表单拆成多个 .step-1、.step-2 区域时,提交当前步不应校验其他步的字段。layui 默认会对整个 .layui-form 下所有带 lay-verify 的元素校验。
解决方案:提交时手动限定校验范围,用 jQuery 选中当前 step 内的元素,再逐个触发验证:
form.on('submit(step1)', function(data){
var $step1 = $('.step-1');
var valid = true;
$step1.find('*[lay-verify]').each(function(){
var $el = $(this);
var rules = $el.attr('lay-verify').split('|');
for (var i = 0; i < rules.length; i++) {
var res = form.verify[rules[i]] && form.verify[rules[i]]($el.val(), $el[0]);
if (res) {
$el.addClass('layui-form-danger');
layer.msg(res, {icon:5});
valid = false;
return false;
}
}
});
if (!valid) return false;
});- 不依赖
form.verify的自动遍历,而是精确控制校验目标 - 注意
form.verify规则函数的第二个参数是原生 DOM,不是 jQuery 对象 - 此方式绕过了 layui 的内部状态管理,适合复杂流程,但需自行维护错误高亮和提示
后端返回字段可选时,前端跳过该字段的 required 校验
常见于配置类表单:后端接口返回 {"fieldA": {"required": false}},此时前端即使写了 lay-verify="required" 也应忽略。
推荐在表单渲染完成后,根据元数据动态清理:
// 假设 config 是后端返回的字段配置
config.fields.forEach(function(field){
if (!field.required) {
$('input[name="' + field.name + '"], select[name="' + field.name + '"], textarea[name="' + field.name + '"]')
.removeAttr('lay-verify')
.removeClass('layui-form-danger');
}
});- 务必在
form.render()之后执行,否则 layui 会重置 DOM 属性 - name 值含特殊字符(如
user[profile])时,选择器需转义:$('input[name="user\[profile\]"]') - 如果字段是动态生成的(如 JS append),需在插入后立即处理,不能等到 submit 时才判断
实际业务里最易被忽略的是:跳过校验 ≠ 隐藏字段 ≠ 删除字段。只要 DOM 还在、lay-verify 属性还存在,layui 就可能在校验队列里把它算进去。真正安全的做法永远是「显式移除属性 + 清除状态类 + 控制校验入口范围」三者并行。


















