vee-validate vue 2.0自定义表单验证

亲测可用

学习vee-validate，首先可以去阅读官方文档，更为详细可以阅读官网中的规则。

一、安装

您可以通过npm或通过CDN安装此插件。

1. NPM

npm install vee-validate --save

2. CDN

<script src="path/to/vue.js"></script>
<script src="path/to/vee-validate.js"></script>
<script>
    Vue.use(VeeValidate); // good to go.
</script>

或者你可以使用ES6导入它：

import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

二、使用中文提示

没有配置过的错误提示默认使用英文显示的，如果想要用中文显示需要我们手动配置一下，首先还是在main.js中引入

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

Validator.localize('cn', cn);

三、修改默认的错误提示信息

// 修改默认错误提示
const dict = {
    cn: {messages: {required: (name) => `${name}不能为空!`}}  // name接受alias的值.
}
Validator.localize(dict);

demo中修改了required的错误提示信息，因为使用的中文（前面引入的），所以是cn。最后用localize方法加入到Validator中。

四、使用自定义规则

Validator.extend('mobile', {
    getMessage: field => "请输入正确的手机号码",
    validate: value => value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
});

extend的第一个参数就是自定义的规则的名字，可以像使用默认规则一样使用它，getMessage中是错误提示信息，validate是验证规则，返回一个布尔值或promise.

完整例子

<template>
  <div class="">
    <form @submit.prevent="applyCoupon" class="">
      <label class="">手机号</label>
      <p class="">
        <input v-model="phone" name="phone" :class="" type="text"
               placeholder="请输入手机号"><br>
        <span v-show="errors.has('phone')" class="error">{{ errors.first('phone') }}</span>
      </p>
      <label class="">姓名</label>
      <p class="">
        <input v-model="name" name="name" :class="" type="text"
               placeholder="请输入手机号"><br>
        <span v-show="errors.has('name')" class="error">{{ errors.first('name') }}</span>
      </p>

      <p class="">
        <button type="submit" class="" name="button">确定</button>
      </p>
    </form>
  </div>
</template>
<script>
  import VeeValidate, {Validator} from 'vee-validate';
  import cn from 'vee-validate/dist/locale/zh_CN';

  Validator.localize('cn', cn);

  const dict = {
    cn: {messages: {required: (name) => `${name}不能为空!`}}
  }
  Validator.localize(dict);

  export default {
    name: 'coupon-example',
    validator: null,
    data: () => ({
      phone: '',
      name: '',
      errors: null
    }),
    computed: {},
    methods: {
      applyCoupon() {  // 提交执行函数
        this.validator.validate('name', this.name).then((result) => this.discounted = result);
        this.validator.validate('phone', this.phone).then((result) => this.discounted = result);
      }
    },
    created() {
      this.validator = new Validator({});

      Validator.extend('mobile', {
        getMessage: field => "请输入正确的手机号码",
        validate: value => value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
      });
      Validator.extend('name', {
        getMessage: field => "请输入正确姓名",
        validate: value => value == 'tom'
      });

      this.validator.attach({name: 'name', rules: 'required|name', alias: '姓名'});
      this.validator.attach({name: 'phone', rules: 'required|mobile', alias: '手机'});
      // 使用attach以FieldOptions作为其第一个参数的方法添加验证规则。

      this.$set(this, 'errors', this.validator.errors);
    }
  };
</script>
<style>
  .error {
    font-size: 12px;
    color: #ff1c13;
  }
</style>

第一次使用vee-validate，勿喷。有什么好的建议请联系博主邮箱
15517072173@163.com