Vue 3 中表单校验怎么处理密码确认两次输入一致-Vue.js-PHP中文网

vue 3 中密码确认校验需用自定义 validator 函数比对 confirm 与 password 字段实时值，el-form-item 的 prop、form 对象字段名、rules 键名三者必须完全一致，并在 validator 中动态读取 form.password 判断一致性。

vue 3 中表单校验怎么处理密码确认两次输入一致

Vue 3 中处理密码确认（即两次输入密码是否一致）的核心是使用 自定义校验器（validator），配合 el-form-item 的 prop 和 rules 正确绑定。关键不是“写两个输入框”，而是让确认密码字段主动比对原始密码字段的当前值。

确认密码字段必须声明 prop 并匹配 rules 键名

这是最容易漏掉的一环：确认密码的 el-form-item 必须带 prop="confirm"（或其他你命名的字段名），且这个字符串要和 form 对象里的字段名、rules 对象里的键名完全一致。

<el-form-item label="确认密码" prop="confirm"></el-form-item>
form = reactive({ password: '', confirm: '' })
rules = { confirm: [...] } —— 三者必须一字不差

写一个可靠的 validator 函数

校验函数接收 rule、value、callback 三个参数。它需要读取原始密码的当前值（不能用闭包缓存旧值），并做空值和一致性判断。

如果 value 为空，提示“请再次输入密码”
如果 value !== form.password，提示“两次输入的密码不一致”
校验通过时，必须调用 callback()（不传参）
校验失败时，调用 callback(new Error('xxx'))

示例：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/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' }
]