Vue 3 中 Element Plus 表单校验核心是 :model、:rules 和 prop 三大绑定；需绑定响应式数据模型、定义字段对应规则数组、el-form-item 设置一致 prop 路径；支持必填、格式、长度、正则及自定义 validator 校验；动态表单需正确拼接 prop 路径并用 computed 更新 rules；提交前调用 validate() 触发校验。
Vue 3 中结合 Element Plus 实现表单校验，核心是用好 el-form 的三大绑定：:model、:rules 和 prop。它不是靠手动写正则或监听事件来“硬校验”，而是通过声明式规则 + 自动触发机制完成，既简洁又可靠。
基础结构必须齐备
三个要素缺一不可：
-
绑定数据模型：用
:model指向一个响应式对象（如reactive或ref），所有输入框的v-model都要和这个对象的字段一一对应； -
定义校验规则：
:rules是一个对象，每个 key 对应 model 中的字段名，值为校验规则数组（比如必填、长度、格式、自定义逻辑）； -
关联字段路径：每个
el-form-item必须设置prop属性，值要和 rules 中的 key 完全一致（嵌套字段如user.profile.name也支持）；
常用校验类型怎么写
Element Plus 内置了 async-validator，无需额外安装。常见写法包括：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
-
必填校验：
{ required: true, message: '用户名不能为空', trigger: 'blur' }； -
格式校验：
{ type: 'email', message: '邮箱格式不正确', trigger: 'blur' }（支持email、number、url等）； -
长度限制：
{ min: 6, max: 16, message: '密码长度6-16位', trigger: 'blur' }； -
正则匹配：
{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误', trigger: 'blur' }； -
自定义校验函数：用
validator，必须调用callback()（成功）或callback(new Error('xxx'))（失败），否则校验会卡住。
动态表单（如 v-for 循环生成）特别注意
当表单项由数组动态渲染时（比如资金分配明细、订单号列表），prop 值需拼出完整路径：
立即学习“前端免费学习笔记（深入）”；
- 例如
:prop="'list.' + index + '.amount'"，对应 rules 中list: [{ validator: ... }]的嵌套结构； - 确保每次新增/删除项后，
rules或其依赖的数据重新计算（推荐用computed包裹 rules，避免响应失效）； - 不要用
Math.random()作:key—— 这会导致表单状态丢失，改用唯一索引或 id 更稳妥。
提交前手动触发校验
点击“提交”按钮时，调用 formRef.value.validate() 即可：
- 返回 Promise（Vue 3 + Composition API 推荐写法），
await formRef.value.validate()； - 回调形式也可：
formRef.value.validate((valid) => { if (valid) { /* 提交 */ } })； - 校验失败时，错误字段自动添加
is-error类并显示提示，无需额外样式控制。
