Vuelidate自定义校验中如何向辅助函数传递待校验值？

当前写法存在两处和Vuelidate运行机制不匹配的错误，直接导致校验函数拿到的值为undefined：

• 自定义校验的导出格式完全不符合要求：你按照Vue mixin的结构，把校验函数包裹在methods字段中导出，但Vuelidate的自定义校验是独立的纯函数体系，不会解析Vue mixin结构的对象作为校验规则
• 校验传参逻辑和组件方法调用逻辑混淆：Vuelidate的校验函数执行上下文完全独立于Vue组件，不会通过组件实例自动传递字段值，而是会自动将对应字段的当前值作为第一个入参，传给注册到validations下的校验函数。

你当前能触发函数调用，大概率是把这个mixin全局注册到了Vue实例上，让方法挂到了所有组件的methods里，导致Vuelidate匹配到了这个同名方法，但由于调用逻辑和组件普通方法无差异，没有自动传入被校验的字段值，最终打印结果为undefined。

1. 重构date.js的导出逻辑 #

移除Vue mixin的包裹结构，直接导出独立的校验函数即可实现复用：

// @/mixins/customValidators/date.js
// 第一个入参为Vuelidate自动传入的被校验字段值
export function dateValidation(date) {
  console.log('date :', date)
  // 替换为实际的日期校验逻辑，例如判断值是否为合法日期
  return !isNaN(Date.parse(date))
}

如果需要带配置项的可复用校验（比如限定日期合法范围、固定校验日期格式），可以用高阶函数写法：第一层函数接收配置参数，第二层函数接收被校验值。

// 可配置校验示例：判断输入值是否落在指定日期区间
export function isDateInRange(minDate, maxDate) {
  return (dateValue) => {
    if (!dateValue) return true
    const parsedDate = new Date(dateValue)
    return parsedDate >= new Date(minDate) && parsedDate <= new Date(maxDate)
  }
}

2. 调整组件内的规则挂载 #

• 导入环节直接引用date.js中导出的独立校验函数，不要导入整个mixin结构的对象
• 在validations配置块中直接挂载导入的校验函数，Vuelidate会自动完成字段值的传递
  调整后的核心组件代码：

<script>
// 直接导入独立的校验函数
import { dateValidation } from '@/mixins/customValidators/date'
export default {
  auth: false,
  layout: 'notLoggedIn',
  data () {
    return {
      form: {
        date: ''
      }
    }
  },
  validations: {
    form: {
      date: {
        // 直接引用校验函数，Vuelidate会自动将当前form.date的值作为入参传入
        dateValidation
      }
    }
  }
}
</script>

如果你的校验逻辑需要访问组件内其他响应式数据（比如对比表单里的开始/结束日期），不需要把校验方法挂载到Vue组件上：Vuelidate会在校验函数执行时，把当前组件实例作为第二个参数传入，直接通过这个实例拿到组件内的其他值即可。

// 跨字段校验示例：校验结束日期晚于开始日期
function endDateValid(endDateValue, vm) {
  if (!endDateValue || !vm.form.startDate) return true
  return new Date(endDateValue) > new Date(vm.form.startDate)
}

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