如何使用 VeeValidate 3 和 vue.js 制定自定义验证规则答案

【问题标题】：How to make custom validation rules with VeeValidate 3 and vue.js如何使用 VeeValidate 3 和 vue.js 制定自定义验证规则
【发布时间】：2020-07-23 02:35:37
【问题描述】：

我想为表单创建自定义规则。

示例如下：

     <label class="form-label">Price range from</label>
     <validation-provider rules="required_if:price_to" name="Price range from"
            v-slot="{ errors }">
        <input v-model="price_range_from" type="number"
                        ref="price_from">
        <span class="validation-error form-span">{{ errors[0] }}</span>
    </validation-provider>
                        </div>
                        <div class="ml-2 w-100">
     <label class="form-label">Price range to</label>
     <validation-provider name="Price range to"
                                                 v-slot="{ errors }">
        <input v-model="price_range_to" type="number" class="form-control"
                       ref="price_to" name="price_range_to">
        <span class="validation-error form-span">{{ errors[0] }}</span>
     </validation-provider>

在这部分表单中，我想创建一个rule，它的逻辑如下：

input 的 price_range_from 是 required 如果 price_range_to 字段不是null。
input 的 price_range_from 不能更大然后price_range_to。
反之亦然。

脚本：

import {ValidationProvider, ValidationObserver, extend} from 'vee-validate';
import * as rules from "vee-validate/dist/rules";
import {required} from 'vee-validate/dist/rules';

Object.keys(rules).forEach(rule => {
    extend(rule, rules[rule]);
});

extend('required', {
    ...required,
    message: 'This field is required'
});

尝试阅读 [https://logaretm.github.io/vee-validate/guide/forms.html] 上的文档但找不到如何制定自定义规则的答案。

如果有人展示我可以理解并继续前进并制定更多自定义规则的示例，我会很高兴。

【问题讨论】：

标签： javascript forms vue.js vuejs2 vee-validate

【解决方案1】：

您可以通过定位其他字段来做到这一点：https://vee-validate.logaretm.com/v3/advanced/cross-field-validation.html#targeting-other-fields

import { extend } from 'vee-validate';

extend('password', {
  params: ['target'],
  validate(value, { target }) {
    return value === target;
  },
  message: 'Password confirmation does not match'
});

...

<ValidationObserver>
  <ValidationProvider rules="required|password:@confirm" v-slot="{ errors }">
    <input type="password" v-model="password">
    <span>{{ errors[0] }}</span>
  </ValidationProvider>


  <ValidationProvider name="confirm" rules="required" v-slot="{ errors }">
    <input type="password" v-model="confirmation">
    <span>{{ errors[0] }}</span>
  </ValidationProvider>
</ValidationObserver>

阅读文档以查看有关其工作原理的更多文章。基本上@confirm在自定义规则中变成target，对应输入上的name属性。

自定义规则中的validate 函数只返回一个布尔值来判断字段是否有效，因此您可以在其中添加任何自定义逻辑并确保它返回一个布尔值。

在您的情况下，听起来您想要两条不同的错误消息，因此您可以考虑制定两条自定义规则。

【讨论】：