讲师中心 微信公众号
AI工具推荐 视频效率加速

Layui表单验证lay-verify如何实现针对不同条件的跳过校验

雨杰君_5942

雨杰君_5942

发布时间:2026-06-29 12:51:22

|

661人浏览过

|

来源于php中文网

原创

可通过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 的元素校验。

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

解决方案:提交时手动限定校验范围,用 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 就可能在校验队列里把它算进去。真正安全的做法永远是「显式移除属性 + 清除状态类 + 控制校验入口范围」三者并行。

热门AI工具

更多
讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2643

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

5763

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6730

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

6438

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

923

2024.05.22

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

60

2026.10.22

Gradle Wrapper配置教程
Gradle Wrapper配置教程

本专题介绍Gradle Wrapper的基本作用,涵盖文件组成、生成方法、版本配置和任务调用,帮助你理解项目如何使用指定的Gradle版本,减少不同开发环境带来的构建差异。

40

2026.10.22

Golangci-lint检查器使用教程
Golangci-lint检查器使用教程

本专题整理Golangci-lint常用Linters的用途与配置方法,覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查,帮助项目合理选规则。

40

2026.10.22

Gradle怎么构建Java项目
Gradle怎么构建Java项目

本专题介绍Gradle Java项目构建方法,涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查,帮助你理解各阶段的任务关系,逐步完成项目构建。

20

2026.10.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 13万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.3万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn