vue validator用法加代码

Vue.js 提供了一个名为 VeeValidate 的插件，它可以方便地为表单添加验证功能。下面是一个简单的示例：

首先，在你的 Vue.js 项目中安装 VeeValidate：

npm install vee-validate --save

然后，在 Vue.js 组件中导入 VeeValidate：

import { Validator } from 'vee-validate';

接下来，你可以使用 `Validator.extend` 方法来添加自定义验证规则。例如，下面的代码添加了一个名为 `isEmailOrPhone` 的验证规则，用于验证输入的值是否为电子邮件地址或手机号码：

Validator.extend('isEmailOrPhone', {
  validate: value => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    const phoneRegex = /^\d{11}$/;
    return emailRegex.test(value) || phoneRegex.test(value);
  },
  getMessage: field => `The ${field} field must be a valid email address or phone number.`
});

现在，你可以在你的表单输入框中使用 `v-validate` 指令来添加验证规则。例如，下面的代码将一个名为 `emailOrPhone` 的输入框与 `isEmailOrPhone` 验证规则关联起来：

<input type="text" name="emailOrPhone" v-model="emailOrPhone" v-validate="'isEmailOrPhone'">

最后，在你的 Vue.js 组件中，你可以使用 `$validator` 对象来访问验证器。例如，下面的代码使用 `$validator.validateAll` 方法来验证整个表单：

export default {
  data() {
    return {
      emailOrPhone: ''
    };
  },
  methods: {
    submit() {
      this.$validator.validateAll().then(result => {
        if (result) {
          // 表单验证通过，可以提交表单。
        } else {
          // 表单验证不通过，需要显示错误信息。
        }
      });
    }
  }
}