VeeValidate 2.2.15 html文件中便用自定义验证

在 VeeValidate 2.2.15 中，你可以在 HTML 文件中使用自定义的验证器来验证表单输入。在一个表单元素上使用自定义验证器，你需要使用 `v-validate` 指令，并将自定义验证器的名称作为参数传递给它。

例如，假设你定义了一个名为 `customValidator` 的自定义验证器，你可以在 HTML 中这样使用它：

<template>
  <form @submit.prevent="submit">
    <div>
      <label for="input">Input</label>
      <input type="text" id="input" v-model="inputValue" v-validate="'customValidator'">
      <span v-show="errors.has('customValidator')"> {{ errors.first('customValidator') }}</span>
    </div>
    <button type="submit">Submit</button>
  </form>
</template>

在上面的代码中，我们在 `input` 元素上使用了 `v-validate` 指令，并传入了我们刚刚定义的 `customValidator` 验证器的名称。这样，在用户输入时，VeeValidate 会自动调用我们的验证器来验证用户的输入，并在验证失败时显示一个自定义的错误信息。

为了在 Vue 组件中使用 VeeValidate，你需要在组件的 `data` 函数中定义一个 `errors` 对象，这个对象将保存所有的验证错误信息。你还需要在组件的 `methods` 中定义一个 `submit` 方法，这个方法将在提交表单时触发，并在表单验证通过时执行你的业务逻辑。

<script>
import { extend } from 'vee-validate';
import { isNumeric } from 'validator';

export default {
  data() {
    return {
      inputValue: '',
      errors: {}
    }
  },
  created() {
    extend('customValidator', {
      validate: value => isNumeric(value),
      message: 'This field must be numeric'
    });
  },
  methods: {
    submit() {
      if (this.errors.any()) {
        // 表单验证失败，执行你的错误处理逻辑
      } else {
        // 表单验证通过，执行你的业务逻辑
      }
    }
  }
}
</script>

在上面的代码中，我们在组件的 `created` 钩子中定义了我们的 `customValidator` 验证器，这样在这个组件中，我们就可以使用它来验证表单输入。在 `submit` 方法中，我们检查了 `errors` 对象，如果它包含任何验证错误，就说明表单验证失败，否则表单验证通过，我们可以执行我们的业务逻辑。