Vue2.6结合Composition API使用Vuelidate的sameAs校验失效问题

问题原因 #

你遇到的校验不通过问题是由Vuelidate 2.x alpha版本的sameAs校验器用法错误导致的：

• 当你把校验规则单独抽离到外部validation.js文件时，sameAs('email')传入的字符串参数无法关联到组件内定义的state.email响应式属性，校验器始终拿不到正确的对比值，因此无论输入是否一致都会返回不通过。
• 另外你的组件setup函数没有返回useVuelidate生成的$v实例，模板也无法绑定校验状态。

解决方法 #

步骤1：修改validation.js为工厂函数导出 #

将原有的静态校验规则改为接收state参数的工厂函数，直接给sameAs传入要对比的响应式属性：

import { required, email, maxLength, sameAs } from "@vuelidate/validators";

// 接收组件内的state作为入参
export default (state) => ({
  email: {
    required,
    email,
    maxLength: maxLength(100),
  },
  repeatEmail: {
    required,
    email,
    maxLength: maxLength(100),
    // 直接传入要对比的响应式属性
    sameAsEmail: sameAs(state.email)
  },
})

步骤2：修改组件内的调用逻辑 #

在校验规则初始化时传入组件的state，同时把$v实例返回给模板：

import getValidations from "@/validation";
import validationErrors from "@/validation-errors";
import { useVuelidate } from "@vuelidate/core";
import { reactive, toRefs } from '@vue/composition-api'; 
export default {
 setup() {
    const state = reactive({
      email: "",
      repeatEmail: "",
    });
    // 传入state生成当前组件的校验规则
    const validations = getValidations(state)
    const $v = useVuelidate(validations, state);
    return {
      ...toRefs(state),
      $v // 必须返回$v，模板绑定校验状态、触发校验都需要用到
    }
 }
}

修改完成后重新运行项目，sameAs校验即可正常生效。

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