VeeValidate 设置 rules

在 VeeValidate 中，你可以使用 `extend` 方法来扩展已有的验证规则，也可以使用 `defineRule` 方法来定义新的验证规则。

如果你需要扩展已有的验证规则，你可以使用 `extend` 方法。该方法接受两个参数：验证规则的名称和一个验证器函数。验证器函数有两个参数：要验证的值和选项对象。如果验证通过，应该返回 `true`，否则返回错误消息。

例如，你可以这样扩展 `required` 验证规则：

import { extend } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';

extend('required', {
  ...required,
  message: '该字段不能为空。'
});

这里我们首先从 `vee-validate/dist/rules` 中导入了 `required` 验证规则，然后使用 `extend` 方法扩展了该规则，将错误消息设置为中文提示。

如果你需要定义新的验证规则，你可以使用 `defineRule` 方法。该方法接受两个参数：验证规则的名称和一个验证器函数。验证器函数有两个参数：要验证的值和选项对象。如果验证通过，应该返回 `true`，否则返回错误消息。

例如，你可以这样定义一个新的验证规则 `even`：

import { defineRule } from 'vee-validate';

defineRule('even', value => {
  if (!value) {
    return true;
  }
  return parseInt(value) % 2 === 0 || '该字段必须为偶数。';
});

这里我们使用 `defineRule` 方法定义了一个新的验证规则 `even`，如果输入的值是偶数，返回 `true`，否则返回错误消息。

需要注意的是，如果你定义了一个新的验证规则，它不会自动添加到所有的表单元素中。你需要在表单元素的 `rules` 属性中手动添加该规则。例如：

<ValidationProvider rules="required|even" v-slot="{ errors }">
  <input type="text" v-model="value" />
  <span>{{ errors[0] }}</span>
</ValidationProvider>

在上面的例子中，我们在 `rules` 属性中添加了 `required` 和 `even` 两个验证规则。这样，当输入的值为空或不为偶数时，就会显示相应的错误消息。