Yup配合vee-validate实现密码确认校验功能失效如何解决？

问题原因 #

你当前为两个字段单独通过useField绑定校验规则，虽然Yup的ref可以正常获取password字段的值，但默认只有confirmPassword字段自身值变更时才会触发自身校验，修改password字段不会主动触发confirmPassword的重新校验，所以看起来匹配校验没有生效。

解决方案（推荐） #

将校验规则统一放到useForm的validationSchema参数中声明，vee-validate会自动处理字段间的依赖关联，任意关联字段修改都会触发对应校验逻辑。

修改后的完整代码如下：

<template>
  <form @submit="onSubmit">
    <div>
      <label for="password">Password</label>
      <div>
        <input
          id="password"
          v-model.trim="password"
          name="password"
        />
      </div>
    </div>
    <div>{{ passwordErrorMessage }}</div>
    <br>
    <div>
      <label for="confirmPassword">Confirm Password</label>
      <div>
        <input
          id="confirmPassword"
          v-model.trim="confirmPassword"
          name="confirmPassword"
        />
      </div>
    </div>
    <div>{{ confirmPasswordErrorMessage }}</div>    
    <br>
    <button>Submit</button>
  </form>
</template>

<script>
import { useField, useForm } from "vee-validate";
import * as yup from "yup";

export default {
  setup() {
    const { handleSubmit } = useForm({
      // 全局声明校验规则，自动处理字段依赖
      validationSchema: yup.object({
        password: yup.string().required('请输入密码').min(5, '密码长度不能少于5位'),
        confirmPassword: yup.string().required('请确认密码').oneOf([yup.ref('password')], '两次输入的密码不匹配')
      })
    });
    const onSubmit = handleSubmit((values) => {
      alert(JSON.stringify(values, null, 2));
    });
    
    // useField不需要再单独传校验规则
    const { value: password, errorMessage: passwordErrorMessage } = useField("password");
    const { value: confirmPassword, errorMessage: confirmPasswordErrorMessage } = useField("confirmPassword");

    return {
      password,
      passwordErrorMessage,
      confirmPassword,
      confirmPasswordErrorMessage,
      onSubmit
    }
  }
};
</script>

备选方案 #

如果你不想调整为全局schema的写法，也可以手动监听password字段的变化，主动触发confirmPassword的校验：

import { watch } from 'vue'

// 从useField解构出校验方法
const { value: confirmPassword, errorMessage: confirmPasswordErrorMessage, validate: validateConfirmPwd } = useField(
  "confirmPassword",
  yup
    .string()
    .required()
    .oneOf([yup.ref("password")], "密码不匹配"),
);

// 监听password变化，手动触发确认密码校验
watch(password, () => {
  validateConfirmPwd();
});

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