如何在vee-validate中实现带自定义消息的跨字段验证并显示min、max值

实现方法 #

你可以按照以下两步实现需求：

• 第一步：定义自定义验证规则时，要么在params配置项中显式声明需要用到的min、max参数，要么在校验不通过的返回结果中通过data字段传递你要暴露到提示消息的数值。
• 第二步：自定义验证消息时，直接使用{参数名}格式的占位符，即可自动注入对应的参数值。

基础规则示例代码

import { extend } from 'vee-validate';

// 自定义数值区间校验规则
extend('numRange', {
  // 声明要传递到提示消息的参数
  params: ['min', 'max'],
  validate(value, { min, max }) {
    const num = Number(value);
    return num >= Number(min) && num <= Number(max);
  },
  // 消息中直接用占位符引用参数
  message: '当前输入值必须介于{min}和{max}之间'
});

跨字段验证场景示例代码

如果你的min和max取自其他表单字段的动态值，可以在校验逻辑里取值后通过data返回：

import { extend } from 'vee-validate';

extend('crossFieldRange', {
  // 传入的是目标字段的引用
  params: ['minField', 'maxField'],
  validate(value, { minField, maxField }) {
    const minVal = Number(minField);
    const maxVal = Number(maxField);
    const inputVal = Number(value);
    const isValid = inputVal >= minVal && inputVal <= maxVal;
    if (!isValid) {
      // 返回参数给消息模板
      return {
        valid: false,
        data: {
          min: minVal,
          max: maxVal
        }
      };
    }
    return true;
  },
  message: '输入值需在{min}~{max}范围内'
});

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