VeeValidate的使用总结

一、安装和引入

npm install vee-validate --save
import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);

二、配置组件

const config = {
  aria: true,
  classNames: {},
  classes: false,
  delay: 0,
  dictionary: null,
  errorBagName: 'errors', // change if property conflicts
  events: 'input|blur',
  fieldsBagName: 'fields',
  i18n: null, // the vue-i18n plugin instance
  i18nRootKey: 'validations', // the nested key under which the validation messages will be located
  inject: true,
  locale: 'en',
  validity: false,
  useConstraintAttrs: true
};
Vue.use(VeeValidate, config);

delay代表输入多少ms之后进行校验，events代表验证的事件，strict=true代表没有设置规则的表单不进行校验，errorBagName属于高级应用，自定义errors，待研究,其他有查看官网

三、关于关于errors

errors.first('field') - 获取关于当前field的第一个错误信息
collect('field') - 获取关于当前field的所有错误信息(list)
has('field') - 当前filed是否有错误(true/false)
all() - 当前表单所有错误(list)
any() - 当前表单是否有任何错误(true/false)
add(String field, String msg) - 添加错误
clear() - 清除错误
count() - 错误数量
remove(String field) - 清除指定filed的所有错误

四、使用中文错误提示

import zh_CN from './assets/zh_CN';   //  '/assets/js/zh_CN'代表你存放语言包的目录，从node_modules/vee-validate/dist/locale目录下面拷贝到你的项目
Validator.localize(zh_CN);
Vue.use(VeeValidate, {
  locale: 'zh_CN',
})

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

//修改默认错误提示
const dictionary = {
  zh_CN: {
    messages: {
      email: () => '邮箱格式不正确哦'
    }
  }
};
Validator.localize(dictionary);

六、自定义规则

Validator.extend('qq', {
  messages: {
    zh_CN:field => 'qq号码输入不正确'
  },
  validate: value => {
    return /^[1-9][0-9]{4,14}$/.test(value);
  }

七、例子
HTML部分

 <div class="enroll" id="recommend-box">
                <div class="title">请填写您要荐购的书籍信息：</div>
                <div class="content">
                    <div class="info infoa">
                        <div class="group-input">
                            <span class="a">书&nbsp;名：</span>
                            <input v-model="title" v-validate="'required'" data-vv-as="书名" type="text" name="title" placeholder="请输入推荐书名" />
                        </div>
                        <div class="errors" v-show="errors.has('title')" v-cloak>{{ errors.first('title') }}</div>
                    </div>
                    <div class="info infoa">
                        <div class="group-input">
                            <span class="a">作&nbsp;者：</span>
                            <input v-model="author" v-validate="'required'" data-vv-as="作者" type="text" name="author" placeholder="请输入作者" />
                        </div>
                        <div class="errors" v-show="errors.has('author')" v-cloak>{{ errors.first('author') }}</div>
                    </div>
                    <div class="info infoa">
                       <div class="group-input">
                           <span class="a">出版社：</span>
                            <input v-model="publisher" v-validate="'required'" data-vv-as="出版社" type="text" name="publisher" placeholder="请输入出版社" />
                        </div>
                       <div class="errors" v-show="errors.has('publisher')" v-cloak>{{ errors.first('publisher') }}</div>
                    </div>
                    <div class="info infob">                  
                        <div class="group-input">
                            <span class="a">出版年：</span>
                            <input v-model="pubYear" v-validate="'required|pubYear|digits:4'" data-vv-as="出版年" type="text" name="pubYear" placeholder="请输入出版年" />
                        </div>
                        <div class="errors" v-show="errors.has('pubYear')" v-cloak>{{ errors.first('pubYear') }}</div>
                    </div>
                    <div class="info infob">
                        <div class="group-input">
                            <span class="a">语言类型：</span>
                            <input v-model="type" v-validate="'required'" data-vv-as="语言类型" type="text" name="type" placeholder="语言类型" />
                        </div>
                        <div class="errors" v-show="errors.has('type')" v-cloak>{{ errors.first('type') }}</div>
                    </div>
                    <div class="info infob">
                        <div class="group-input">
                            <span class="a">ISBN号：</span>
                            <input v-model="isbn" v-validate="'required|isbn'" data-vv-as="ISBN号" type="text" name="isbn" placeholder="ISBN号" />
                        </div>
                        <div class="errors" v-show="errors.has('isbn')" v-cloak>{{ errors.first('isbn') }}</div>
                    </div>

                    <div class="info infob more">
                        <div class="group-input">
                            <span class="a">推荐理由：</span>
                            <textarea v-model="remark" v-validate="'max:200'" data-vv-as="推荐理由" type="text" name="remark" placeholder="请输入推荐理由"></textarea>
                        </div>
                        <div class="errors" v-show="errors.has('remark')" v-cloak>{{ errors.first('remark') }}</div>
                    </div>
                     <div class="info info-btn">
                         <div class="btton" @click="validateBeforeSubmit()">提交</div>
                     </div>
                 </div>
            </div>

JS部分

<script type="text/javascript">
        var IndexPage = "http://localhost:8080/xxxx.html"
        var AuthCode = "12131";
        $(function () {
            recommend(AuthCode);
        })
        VeeValidate.Validator.localize('zh_CN');
        Vue.use(VeeValidate);

        VeeValidate.Validator.localize({
            zh_CN: {
                messages: {
                    required: function (name) { return name + '不能为空' },
                }
            }
        })
        VeeValidate.Validator.extend('isbn',{
            getMessage: function () { return " 请输入正确格式的isbn号" },
            validate: function (value) { return /^[\d-]*$/.test(value);}
        })
        VeeValidate.Validator.extend('pubYear', {
            getMessage: function () { return " 请输入正确的年份" },
            validate: function (value) { return /^(19|20)\d{2}$/.test(value); }
        })

        function recommend(AuthCode) {
            var classList = new Vue({
                el: '#recommend-box',
                data: function () {
                    return {
                        title: "",
                        author: "",
                        publisher: "",
                        pubYear: "",
                        type: "",
                        remark: "",
                        isbn: ""

                    }
                },
                methods: {
                    validateBeforeSubmit() {
                        this.$validator.validateAll().then((result) => {
                            if (result) {
                                $.ajax({
                                    url: '/xxxx',
                                    data: {
                                        Request: "xxxxx",
                                        title: this.title,
                                        author: this.author,
                                        publisher: this.publisher,
                                        pubYear: this.pubYear,
                                        type: this.type,
                                        remark: this.remark,
                                        isbn: this.isbn,
                                        certId: AuthCode
                                    },
                                    type: 'POST',
                                    dataType: "json",
                                    success: function (data) {
                                        var msg = data.msg;
                                        alert(msg);
                                        window.location.href = IndexPage;
                                    }
                                });
                                return;
                            }
                            alert("请输入完整推荐信息！")
                        });
                    }
                }
            })
        }
    </script>