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

uni-app怎么做表单验证 uni-app表单提交正则校验方案【技巧】

秋丽姑娘_7631

秋丽姑娘_7631

发布时间:2026-05-15 10:09:01

|

297人浏览过

|

来源于php中文网

原创

uni-app 表单验证需确保 rules 字段名与 model 顶层 key 严格一致、正则书写正确(如手机号/^1[3-9]d{9}$/)、confirm password 必须用 validator 动态比对、v-model 值类型与 pattern 匹配,并且每字段 rules 数组不可省略。

uni-app怎么做表单验证 uni-app表单提交正则校验方案【技巧】

uni-app 表单验证不用手写校验函数也能跑通,但直接套 rules + uni-forms 容易卡在字段名不匹配、正则写错、v-model 绑定失效这三处。

uni-forms 的 rules 字段名必须和 model 对象 key 严格一致

很多人把 rules 写成 { phone: { ... } },但 model 却是 { userInfo: { phone: '' } },结果校验永远不触发。这是因为 uni-forms 不支持嵌套路径自动解析 —— 它只认顶层 key。

  • ✅ 正确写法:model 是扁平对象 { phone: '', email: '' },rules 就写 { phone: { rules: [...] }, email: { rules: [...] } }
  • ⚠️ 如果必须用嵌套结构(比如 userInfo.phone),得手动用 validateField('userInfo.phone') 触发,且 uni-forms-item 的 name 属性也得设为 "userInfo.phone"(字符串,不是表达式)
  • ❌ 不要写 name="userInfo.phone" 却在 rules 里配 userInfo: { phone: { ... } },规则不会命中

手机号 / 邮箱正则别直接抄网上老版本

很多博客贴的手机号正则还用 /^1[3|4|5|6|7|8|9][0-9]{9}$/,竖线 | 在字符组里没意义,实际会匹配 13、14、1| 这种非法组合。邮箱正则漏掉国际化域名或大小写处理,也会在 iOS 或微信小程序里校验失败。

uni-app
uni-app

uni-app 是基于 Vue 的跨端开发框架,适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载
  • ✅ 推荐手机号:/^1[3-9]d{9}$/(简洁、覆盖全部号段、无歧义)
  • ✅ 推荐邮箱:/^w+([.-]?w+)*@w+([.-]?w+)*.w+([.-]?w+)*$/(兼容带连字符/点的域名,不强制小写)
  • ⚠️ pattern 里写正则字面量时,斜杠 / 不要加 —— pattern 接收字符串,写成 pattern="/^1[3-9]\d{9}$/" 会报错;正确是 pattern: "^1[3-9]\d{9}$"

confirm password 校验不能只靠 pattern

确认密码需要动态比对新密码字段值,pattern 是静态正则,做不到。必须用 validator 函数,且注意异步回调时机。

  • ✅ 正确写法(setup script):
    const rules = {
      newPassword: { rules: [{ required: true, errorMessage: '新密码不能为空' }] },
      confirmPassword: {
        rules: [{
          validator: (rule, value) => {
            return value === formData.newPassword || '两次输入的密码不一致'
          }
        }]
      }
    }
  • ⚠️ 不要用 required: true + pattern 模拟,value 为空时 validator 仍会执行,需自行判空
  • ⚠️ 若 formData 是 ref,validator 里读 formData.newPassword.value,否则拿不到最新值

validate() 报错但没提示?检查 uni-easyinput 的 type 和 v-model 绑定

常见现象:点提交,validate() 返回 promise reject,但控制台没错误,页面也没提示。大概率是 uni-easyinput 的 type="number" 导致 v-model 绑定值变成 number 类型,而 rules 里的 pattern 校验的是字符串 —— /^1[3-9]d{9}$/.test(13812345678) 必然 false。

  • ✅ 解决:统一用 type="text",或在 validator 里先 String(value) 转类型
  • ✅ 确保 v-model 绑定的是响应式变量(ref 或 reactive 的属性),不要绑定字面量或常量
  • ⚠️ uni-easyinput 的 maxlength 是字符串长度限制,和正则位数无关;11 位手机号设 maxlength="11" 是对的,但正则仍要写 d{9}(因为开头 1 已固定)

最常被忽略的是:rules 里每个字段的 rules 数组必须存在,哪怕只有一条规则,也不能写成 phone: { required: true } —— 缺少 rules: [] 包裹,整个字段校验直接静默跳过。

热门AI工具

更多
切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

DeepSeek

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

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

WorkBuddy

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

豆包大模型

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

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

咔片AIPPT

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

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

相关专题

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

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

2723

2023.08.11

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

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

5903

2023.10.09

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

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

6850

2024.03.19

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

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

6598

2024.03.22

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

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

943

2024.05.22

ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

3120

2023.06.14

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

360

2023.08.31

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2933

2023.11.15

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

40

2026.10.28

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习

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

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