舊版： "vee-validate": "^2.0.0-rc.13"

新版："vee-validate": "^2.1.0-beta.7"

安裝最新版的VeeValidate之後對其進行中文化操作時，

之前老一套（2.0版）中文化的做法如下圖：

系統報錯提示 addLocale 是不存在的，所以這個時候，要麼將版本降低至2.0版，要麼就再安裝一個玩意兒：vue-i18n

執行命令 yarn add vue-i18n

此時，新一套（2.1版）中文化的做法如下圖：

------------------------------- 2018.8.30 更新 -----------------------------

使用新版的中文配置時，發現between等兩個值直接的那種校驗顯示是異常滴！百般無奈只好退而求全了，新版中文不好搞呀，於是解除安裝後重新 install 一箇舊版的。

具體操作如下：

npm uninstall vue-i18n

npm uninstall vee-validate

npm install [email protected]

然後，我們開始對這個2.0版本的校驗器做一些配置，main.js 程式碼如下：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import './assets/iconfont.css'
import VeeValidate from 'vee-validate'
import zh from 'vee-validate/dist/locale/zh_CN'
import initFetch from './fetch/initFetch'
import './fetch/urlConfig'

// 阻止 vue 在啟動時生成生產提示
Vue.config.productionTip = false

// 全域性使用element-ui
Vue.use(ElementUi)

/* 配置表單驗證 -- start */
// 配置中文化提示
const { Validator } = VeeValidate
Validator.addLocale(zh)
// 引入校驗
Vue.use(VeeValidate, {
    locale: 'zh_CN',
    fieldsBagName: 'errorBag',
    events: 'blur|input'
})
// 修改預設錯誤提示
const dictionary = {
    zh_CN: {
        messages: {
            required: (field) => `${field}不能為空`,
            between: (field, data) => `${field}必須在${data[0]}~${data[1]}之間`,
            confirmed: (field, data) => `${field}必須與${data[0]}相匹配`,
            max: (field, data) => `${field}最大長度不能超過${data[0]}`,
            min: (field, data) => `${field}最小長度不能小於${data[0]}`,
            digits: (field, data) => `${field}必須為數字，且長度必須等於${data[0]}`,
            min_value: (field, data) => `${field}數值不能小於${data[0]}`,
            max_value: (field, data) => `${field}數值不能大於${data[0]}`,
            not_in: (field, data) => `${field}不能為${data.join(',')}`
        }
    }
}
Validator.updateDictionary(dictionary)

// 字元長度校驗
Validator.extend('minMax', {
    messages: {
        zh_CN: (field, data) => `${field}長度必須在${data[0]}~${data[1]}之間`
    },
    validate: (value, data) => {
        return value.length >= parseInt(data[0]) && value.length <= parseInt(data[1])
    }
})

// 非中文字元校驗
Validator.extend('noCN', {
    messages: {
        zh_CN: field => field + '不能包含中文字元'
    },
    validate: value => {
        return !/[\u4e00-\u9fa5]/.test(value)
    }
})

// 不能包含空格校驗
Validator.extend('noSpace', {
    messages: {
        zh_CN: field => field + '不能包含空格'
    },
    validate: value => {
        return /^\S*$/.test(value)
    }
})

/* 配置表單驗證 -- end */
// 新增Vue原型屬性
Vue.prototype.$apis = initFetch(window.baseUrl, router)
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})