Vue3中使用Vee-Validate 4.0实现密码确认一致性校验的问题

错误原因 #

你当前的取值逻辑存在两个问题：

1. 两个密码字段都是绑定在info响应式对象下，直接通过this.password、this.passwordConfirm无法拿到对应的值
2. 密码字段修改时，确认密码的校验逻辑不会自动触发，会出现修改密码后确认密码依旧显示校验通过的异常

适配现有代码的修改方案 #

1. 模板调整 #

首先需要将所有Field组件包裹在vee-validate的Form组件内，同时给密码输入框加输入事件触发确认密码重新校验：

<!-- 给Form组件加ref用于调用校验方法 -->
<Form ref="validateForm">
  <div class="input-box">
    <span class="details">비밀번호</span>
    <Field
      :rules="validatePassword"
      type="password"
      placeholder="비밀번호를 입력하세요"
      v-model="info.password"
      name="password"
      required
      <!-- 密码修改时触发确认密码重新校验 -->
      @input="$refs.validateForm.validateField('passwordConfirm')"
    />
    <ErrorMessage name="password" />
  </div>
  <div class="input-box">
    <span class="details">비밀번호 확인</span>
    <Field
      :rules="validatePasswordConfirm"
      type="password"
      placeholder="비밀번호를 확인하세요"
      v-model="info.passwordConfirm"
      name="passwordConfirm"
      required />
    <ErrorMessage name="passwordConfirm" />
  </div>
</Form>

2. 校验规则调整 #

直接将确认密码的输入值和info对象下的密码字段比对即可：

validatePasswordConfirm(value) {
  if(!value) {
    return '필수 입력 사항입니다.'
  }
  // 直接和响应式对象里存储的密码值比对
  if(value !== this.info.password) {
    return '비밀번호가 일치하지 않습니다.'
  }
  return true
}

组合式API写法参考 #

如果你用的是Vue3组合式API，逻辑基本一致，直接访问你定义的响应式info对象即可，触发校验的方法从useForm返回值中获取：

import { useForm, Field, ErrorMessage, Form } from 'vee-validate'

const { validateField } = useForm()
const info = reactive({
  password: '',
  passwordConfirm: ''
})

const validatePasswordConfirm = (value) => {
  if(!value) return '필수 입력 사항입니다.'
  if(value !== info.password) return '비밀번호가 일치하지 않습니다.'
  return true
}

内容的提问来源于stack exchange，提问作者skwFE