Vue 3 中密码确认校验需用自定义 validator 函数比对 confirm 与 password 字段实时值，el-form-item 的 prop、form 对象字段名、rules 键名三者必须完全一致，并在 validator 中动态读取 form.password 判断一致性。
Vue 3 中处理密码确认（即两次输入密码是否一致）的核心是使用 自定义校验器（validator），配合 el-form-item 的 prop 和 rules 正确绑定。关键不是“写两个输入框”，而是让确认密码字段主动比对原始密码字段的当前值。
确认密码字段必须声明 prop 并匹配 rules 键名
这是最容易漏掉的一环：确认密码的 el-form-item 必须带 prop="confirm"（或其他你命名的字段名），且这个字符串要和 form 对象里的字段名、rules 对象里的键名完全一致。
<el-form-item label="确认密码" prop="confirm">form = reactive({ password: '', confirm: '' })-
rules = { confirm: [...] }—— 三者必须一字不差
写一个可靠的 validator 函数
校验函数接收 rule、value、callback 三个参数。它需要读取原始密码的当前值（不能用闭包缓存旧值），并做空值和一致性判断。
- 如果
value为空，提示“请再次输入密码” - 如果
value !== form.password，提示“两次输入的密码不一致” - 校验通过时，必须调用
callback()（不传参） - 校验失败时，调用
callback(new Error('xxx'))
示例：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
const validateConfirm = (_rule: unknown, value: string, callback: (err?: Error) => void) => {
if (!value) return callback(new Error('请再次输入密码'))
if (value !== form.password) return callback(new Error('两次输入的密码不一致'))
callback()
}
把 validator 加入 rules 并指定触发时机
确认密码字段的规则数组中，加入 { validator: validateConfirm, trigger: 'blur' } 即可。通常搭配必填和格式规则一起用：
-
required: true确保用户输过 -
pattern: /^\S{6,}$/保证长度和非空格 -
validator负责跨字段比对
完整规则示例：
confirm: [
{ required: true, message: '请输入确认密码', trigger: 'blur' },
{ min: 6, message: '至少6位', trigger: 'blur' },
{ validator: validateConfirm, trigger: 'blur' }
]
注意响应式数据访问方式
在 validator 函数里，form.password 必须能实时读取最新值。如果你用的是 reactive，直接访问即可；若用 ref 包裹整个表单对象，记得用 form.value.password。不要在函数外提前取值并闭包保存，否则会校验失效。
