vue validator自定义校验

// 引入 Vue 和 VeeValidate 库
import Vue from 'vue';
import { ValidationProvider, extend, configure } from 'vee-validate';
import * as rules from 'vee-validate/dist/rules';

// 注册所有内置规则
Object.keys(rules).forEach(rule => {
  extend(rule, rules[rule]);
});

// 自定义校验规则，例如检查是否为有效的邮箱格式
extend('customEmail', {
  validate: value => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
  message: '请输入有效的邮箱地址'
});

// 配置 VeeValidate 的一些全局选项
configure({
  bails: false // 是否在遇到第一个错误时停止验证，默认为 true
});

// 在 Vue 中使用自定义的校验规则
new Vue({
  el: '#app',
  components: {
    ValidationProvider
  },
  data: {
    email: ''
  },
  methods: {
    submitForm() {
      // 提交表单逻辑
    }
  },
  template: `
    <form @submit.prevent="submitForm">
      <ValidationProvider rules="required|customEmail" v-slot="{ errors }">
        <input v-model="email" type="text" placeholder="请输入邮箱">
        <span>{{ errors[0] }}</span>
      </ValidationProvider>
      <button type="submit">提交</button>
    </form>
  `
});

解释说明：

1. 引入库：首先引入了 Vue 和 VeeValidate 库。
2. 注册内置规则：通过 extend 方法注册 VeeValidate 内置的所有校验规则。
3. 自定义校验规则：定义了一个名为 customEmail 的自定义校验规则，用于检查输入是否为有效的邮箱格式，并设置了错误提示信息。
4. 配置全局选项：通过 configure 方法配置了一些全局选项，如 bails 控制是否在遇到第一个错误时停止验证。
5. 使用自定义规则：在 Vue 实例中使用 ValidationProvider 组件，并通过 rules 属性应用自定义的校验规则。用户输入的邮箱会经过 required 和 customEmail 校验，如果不符合规则则显示相应的错误信息。

希望这个示例代码和解释对你有帮助！