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

layui表单怎么自定义正则验证规则(form.verify)

星雪小哥_2585

星雪小哥_2585

发布时间:2026-11-06 06:43:21

|

584人浏览过

|

来源于php中文网

原创

在form.verify中添加自定义正则规则需以键值对形式定义,键为规则名,值为接收value和item的函数,必须显式return错误提示字符串才能触发校验失败提示,推荐用new RegExp构造正则,避免g标志,并注意绑定时机与DOM状态一致。

layui表单怎么自定义正则验证规则(form.verify)

form.verify 里怎么加自定义正则规则

直接在 form.verify 对象里加键值对,键是规则名(比如 mobile),值是函数,函数接收两个参数:当前字段的值和原始 DOM 元素。返回 false 或字符串表示校验失败,返回 undefined 或 true 表示通过。

注意:这个函数里不能直接用 return /xxx/.test(value) 就完事——你得自己写逻辑判断并返回错误提示,否则表单提交时不会显示错误信息,甚至可能静默失败。

  • 函数必须显式 return 错误提示字符串(如 "手机号格式不正确")才触发红框+提示
  • 如果只做布尔判断但没 return 字符串,Layui 会认为“验证通过”
  • 正则建议用 new RegExp() 构造,方便动态拼接或复用

手机号、身份证号等常见正则怎么写进 verify

别硬背,按场景抄现成能跑的就行。比如手机号验证,国内常用的是 11 位、以 1 开头、第二位是 3–9:

form.verify({
  mobile: function(value, item){
    if(!/^1[3-9]d{9}$/.test(value)){
      return '请输入正确的手机号';
    }
  },
  idcard: function(value, item){
    // 简化版:15 或 18 位数字,18 位末位可为 X
    if(!/^d{15}(d{2}[dxX])?$/.test(value)){
      return '身份证号格式不正确';
    }
  }
});

注意:Layui 不校验身份证最后一位校验码,真要严格验证得另写逻辑;15 位身份证已基本淘汰,生产环境建议只放开 18 位 + 大小写 X。

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

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

下载
  • item 是 DOM 元素,可用于取 item.name 做多字段联动判断(比如“确认密码”需比对“密码”字段)
  • 正则中不要用 g 标志,test() 在全局模式下会因 lastIndex 导致偶发失效
  • 中文括号、全角字符容易被忽略,表单输入时最好加 oninput="this.value=this.value.replace(/[^0-9]/g,'')" 做前置过滤

多个字段共用同一套正则,怎么避免重复写

把正则逻辑抽成独立函数,再在 form.verify 里引用,既减少重复又便于统一维护:

var isMobile = function(v) {
  return /^1[3-9]d{9}$/.test(v);
};

form.verify({
  mobile: function(value){ 
    if(!isMobile(value)) return '手机号格式不对';
  },
  contact: function(value){
    if(!isMobile(value) && !/^0d{2,3}-?d{7,8}$/.test(value)) {
      return '请填手机号或固话';
    }
  }
});

这样改手机号规则时,只动 isMobile 一个地方。但如果不同字段对空值处理不一致(比如“手机号必填”,“联系电话可为空”),就不能完全复用,得在各自验证函数里加 if(!value) return 判断。

  • 别把正则直接赋给变量再 test——/xxx/.test 比 reg.test 更快且无状态问题
  • 如果正则要动态适配地区(如带国际区号),用 new RegExp('^\+' + code + '\d{10,15}$'),注意双反斜杠转义

验证规则不生效?常见掉坑点

最常遇到的是:写了 form.verify,但表单提交时毫无反应,或者点了提交才弹错,但光标没定位到对应输入框。根本原因通常是绑定时机或选择器问题。

  • 确保 form.verify 在 form.render() 之前执行,否则新规则不会注入到验证系统中
  • 检查 input 的 lay-verify 属性是否拼错,比如写成 lay-verfify 或漏了引号:lay-verify="mobile"(必须是字符串)
  • 如果字段是异步加载(如 Tab 页切换后插入的表单),需要手动调用 form.verify() 触发重绑,或用 form.on('submit(...)', ...) 手动校验
  • Layui 默认只对 type="text"、type="password" 等原生类型生效,自定义组件(如日期选择器、下拉树)需在 change 事件里主动触发 form.validate()

真正麻烦的不是写正则,而是规则和 DOM、生命周期、用户输入节奏之间的耦合。哪怕正则完全正确,只要绑定晚了半拍,就等于没写。

热门AI工具

更多
蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

DeepSeek

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

豆包大模型

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

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

花生AI
花生AI Hot

一款AI视频创作工具,主要用于B站推出的AI视频创作工具,适合需要提升相关任务效率的用户。

WorkBuddy

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

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

Flowith
Flowith Hot

Flowith是一款基于画布和智能体工作流的 AI 协作工作空间。

相关专题

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

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

2843

2023.08.11

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

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

6203

2023.10.09

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

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

7130

2024.03.19

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

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

6938

2024.03.22

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

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

983

2024.05.22

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

4796

2023.06.20

正则表达式不包含
正则表达式不包含

正则表达式,又称规则表达式,,是一种文本模式,包括普通字符和特殊字符,是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串,通常被用来检索、替换那些符合某个模式的文本。php中文网给大家带来了有关正则表达式的相关教程以及文章,希望对大家能有所帮助。

3261

2023.07.05

java正则表达式语法
java正则表达式语法

java正则表达式语法是一种模式匹配工具,它非常有用,可以在处理文本和字符串时快速地查找、替换、验证和提取特定的模式和数据。本专题提供java正则表达式语法的相关文章、下载和专题,供大家免费下载体验。

9082

2023.07.05

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

0

2026.11.05

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习

ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 13.1万人学习

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

共89课时 | 11.4万人学习

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

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