vue validator自定义校验

### 回答1：
Vue Validator是一个用于Vue.js的校验库，它可以帮助我们快速地实现表单校验功能。如果我们需要自定义校验规则，可以通过在Vue Validator中添加自定义校验器来实现。具体步骤如下：

1. 在Vue Validator中定义一个自定义校验器，可以使用Vue.extend方法来创建一个新的Vue实例，然后在这个实例中定义校验规则。

2. 在Vue Validator中注册自定义校验器，可以使用Vue.validator方法来注册自定义校验器，将自定义校验器的名称和校验规则传入即可。

3. 在模板中使用自定义校验器，可以在表单元素的v-validate属性中使用自定义校验器的名称，然后在错误提示信息中使用自定义校验器的名称即可。

例如，我们可以定义一个自定义校验器来验证手机号码的格式：

Vue.validator('phone', function (val) {
return /^1[3456789]\d{9}$/.test(val);
});

然后在模板中使用这个自定义校验器：

<input type="text" v-model="phone" v-validate="'required|phone'" />
<span v-show="errors.has('phone')">请输入正确的手机号码</span>

这样就可以实现对手机号码格式的校验了。

### 回答2：
Vue Validator 是一个非常强大的表单校验库，它可以帮助我们轻松地实现表单验证功能。Vue Validator 提供了一些常见的校验规则，例如必填、数字、手机号等。如果我们需要实现一些自定义的校验规则，也可以通过实现自定义校验器来实现。

Vue Validator 的自定义校验非常简单，只需要在 Vue 实例中定义一个自定义校验器对象，然后在表单元素的校验规则中使用即可。下面是一个简单的例子：

Vue.use(VeeValidate);

const customValidator = {
  getMessage(field, params, data) {
    return (data && data.message) || '输入值不正确';
  },
  validate(value, args) {
    if (args.some(arg => value.indexOf(arg) !== -1)) {
      return true;
    }
    return false;
  }
};

new Vue({
  el: '#app',
  data: {
    inputValue: '',
  },
  validations: {
    inputValue: {
      custom: customValidator,
    }
  },
});

在这个例子中，我们定义了一个名为 customValidator 的自定义校验器对象。这个校验器对象包含两个方法，getMessage 和 validate。其中，getMessage 方法用于返回校验失败的提示信息，validate 方法用于实现校验逻辑。

在 Vue 实例的 validations 属性中，我们定义了一个名为 inputValue 的表单元素，并使用了 custom 校验规则，这个规则对应了我们刚才定义的 customValidator 自定义校验器对象。

在页面中，我们只需要在表单元素上通过 v-model 绑定 input 中的数据，然后通过 v-validate 绑定校验规则即可：

<div id="app">
  <form>
    <label>输入值：</label>
    <input type="text" v-model="inputValue" v-validate="'custom:foo,bar'">
    <div class="errors">
      <span v-if="errors.has('inputValue')">{{errors.first('inputValue')}}</span>
    </div>
  </form>
</div>

通过这个例子，我们可以看到，在 Vue Validator 中自定义校验是非常简单的。只需要定义一个自定义校验器对象，并在 validations 中使用即可。通过自定义校验器对象，我们可以实现各种复杂的校验逻辑，方便快捷地完成表单校验。

### 回答3：
vue validator是vue.js的一个插件，用于表单数据的校验。vue validator提供了常用的校验规则，如必填、邮箱、手机号等，同时也支持自定义校验。

自定义校验是基于validator.js进行封装的，因此在使用自定义校验时，需要先了解validator.js中支持的校验规则。

首先，在vue组件中引入validator.js和vue validator插件：

import validate from 'validator';
import VeeValidate, { Validator } from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN';

Vue.use(VeeValidate);

Validator.extend('customRuleName', {
  getMessage: (field, args) => {
    return `自定义校验错误信息`;
  },
  validate: (value, args) => {
    // 校验逻辑
    return true/false;
  },
});

以上代码中，通过Validator.extend方法定义了一个自定义校验规则‘customRuleName’，该规则接收两个参数，分别是getMessage和validate。

getMessage是用于定义该规则的校验失败后的错误信息，可以接收两个参数，分别是校验字段的名称和自定义规则的参数。

validate是定义该规则的校验逻辑，同样接收两个参数，分别是校验字段的值和自定义规则的参数。

在以上代码中，自定义校验规则的参数是args，可以根据规则需要自行指定。

自定义规则定义完成后，只需要在vue组件中使用指定规则即可。在表单中添加属性‘v-validate:规则名称=""’即可使用自定义规则。

例如：

<input type="text" name="phone" v-model="phone" v-validate:customRuleName="">

以上代码中，该表单字段使用了自定义校验规则‘customRuleName’，当该表单字段值发生变化时，会触发vue validator的校验逻辑，如果校验不通过，则会自动显示‘getMessage’方法返回的错误信息。

自定义校验在vue表单开发中扮演着非常重要的角色，可以满足各种复杂的业务场景需求。但需要注意，在使用自定义校验时一定要严谨，保证校验逻辑的准确性和完整性。