vee-validate的使用

官網地址：http://vee-validate.logaretm.com/

這是一個插件Vue.js可以驗證輸入字段,顯示錯誤,在一個簡單而強大的方法。
學習vee-validate，首先可以去閱讀官方文檔，更為詳細可以閱讀官網中的規則。

下面來簡單總結一下使用方法：
一、安裝

npm install vee-validate@next --save

后面加@next是為了安裝vue2.0的版本

二、引入
使用的是vue-cli腳手架工具，需要在main.js中

import VeeValidate from 'vee-validate'
Vue.use(VeeValidate);

 

三、簡單的使用
這個時候其實已經可以使用了，先上demo

<div>
　　<label for="email">郵箱：</label>
　　<input v-validate ="'required|email'" type="text" id="email" name="myEmail">
</div>
<span v-show="errors.has('myEmail')">{{ errors.first('myEmail')}}</span>

解釋一下：v-validate后面的required和email是官方已經規定好的幾種默認錯誤類型中的兩個，這個可以閱讀官方文檔。
span中用到了errors的幾個方法，這里的參數都是定義了驗證規則的表單的name。列舉幾個errors的方法:

• first(‘field’)

field中（也就是剛剛說過的name表單）中的第一個錯誤

• collect(‘field’)

field中所有的錯誤

• has(‘field’)

field中是否有錯誤

• all()

當前表單中的所有錯誤

• any()

當前表單中是否有錯誤

• count()

當前表單中的錯誤數量

• clear()

清除當前表單中的所有錯誤

四、使用中文錯誤提示
沒有配置過的錯誤提示默認使用英文顯示的，如果想要用中文顯示需要我們手動配置一下
首先還是在main.js中引入

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

緊接着再加一句

Validator.addLocale(zh_CN);

最后需要把第一步的Vue.use(VeeValidate)改為

Vue.use(VeeValidate, {
　　locale: 'zh_CN',
});

現在錯誤提示已經是中文了
五、配置組件
上一點中的配置中文其實已經是對組件的配置了，再說一說其他的配置。

//配置
const config = {
　　errorBagName: 'errors', // change if property conflicts.
　　fieldsBagName: 'fields',
　　delay: 0,
　　locale: 'zh_CN',
　　strict: true,
　　enableAutoClasses: false,
　　classNames: {
　　touched: 'touched', // the control has been blurred
　　untouched: 'untouched', // the control hasn't been blurred
　　valid: 'valid', // model is valid
　　invalid: 'invalid', // model is invalid
　　pristine: 'pristine', // control has not been interacted with
　　dirty: 'dirty' // control has been interacted with
},
events: 'blur',
inject: true
};
Vue.use(VeeValidate, config);

delay是指對錯誤提示的延遲時間；locale就是上一點中對中文的配置，只是這里統一寫到了config中；strict=true代表沒有設置規則的表單不進行校驗，events默認是input|blur，就是在用戶輸入和表單失去焦點時都進行校驗，這里我改成了blur，即只有失去焦點時才開始驗證。

五、修改默認的錯誤提示信息

//修改默認錯誤提示
const dictionary = {
　　zh_CN: {
　　messages: {
　　　　email: () => '郵箱格式不正確哦'
　　　　}
　　}
};
Validator.updateDictionary(dictionary);

demo中修改了email的錯誤提示信息，因為使用的中文（前面引入的），所以是zh_CN。最后用updateDictionary方法加入到Validator中。

六、自定義規則

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

extend的第一個參數就是自定義的規則的名字，可以像使用默認規則一樣使用它，messages中是錯誤提示信息，validate是驗證規則，返回一個布爾值或promise.

main.js引入

import validate, { config } from './public/js/vee-validate'; //表單驗證插件配置
Vue.use(validate, config);

import validate, {Validator} from 'vee-validate';
const messagesCn = {
　　after: (field, [target]) => ` ${field}必須在${target}之后`,
　　alpha_dash: (field) => ` ${field}能夠包含字母數字字符，包括破折號、下划線`,
　　alpha_num: (field) => `${field} 只能包含字母數字字符.`,
　　alpha_spaces: (field) => ` ${field} 只能包含字母字符，包括空格.`,
　　alpha: (field) => ` ${field} 只能包含字母字符.`,
　　before: (field, [target]) => ` ${field} 必須在${target} 之前.`,
　　between: (field, [min, max]) => ` ${field} 必須在${min}~${max}之間.`,
　　confirmed: (field, [confirmedField]) => ` ${field} 不能和${confirmedField}匹配.`,
　　date_between: (field, [min, max]) => ` ${field}必須在${min}和${max}之間.`,
　　date_format: (field, [format]) => ` ${field}必須在在${format}格式中.`,
　　decimal: (field, [decimals] = ['*']) => ` ${field} 必須是數字的而且最多包含${decimals === '*' ? '' : decimals}位小數.`,
　　digits: (field, [length]) => ` ${field} 必須是${length}位數字`,
　　dimensions: (field, [width, height]) => ` ${field}必須是 ${width} 像素到 ${height} 像素.`,
　　email: (field) => ` ${field} 必須是有效的郵箱.`,
　　ext: (field) => ` ${field} 必須是有效的文件.`,
　　image: (field) => ` ${field} 必須是圖片.`,
　　in: (field) => ` ${field} 必須是一個有效值.`,
　　ip: (field) => ` ${field} 必須是一個有效的地址.`,
　　max: (field, [length]) => ` ${field} 不能大於${length}個字.`,
　　mimes: (field) => ` ${field} 必須是有效的文件類型.`,
　　min: (field, [length]) => ` ${field} 不能少於${length}個字.`,
　　not_in: (field) => ` ${field}必須是一個有效值.`,
　　numeric: (field) => ` ${field}只能包含數字.`,
　　regex: (field) => ` ${field} 格式無效.`,
　　required: (field) => `${field}不能為空.`,
　　size: (field, [size]) => ` ${field} 必須小於 ${size} KB.`,
　　url: (field) => ` ${field}不是有效的url.`,
　　phone: (field) => ` ${field} 格式不正確.`,
　　msgCode: (field) => ` ${field} 格式不正確.`,
　　nickname: (field) => ` ${field} 只能包含字母、數字或中文.`,
　　minChar: (field, [length]) => ` ${field}不能小於${length}個字符.`,
　　maxChar: (field, [length]) => ` ${field}不能大於${length}個字符.`
}
//手機號碼
Validator.extend('phone', {
　　getMessage: field => field + ' 格式不正確',
　　validate: value => !!/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value)
});
//6位手機短信驗證碼
Validator.extend('msgCode', {
　　getMessage: field => field + ' 格式不正確',
　　validate: value => !!/^[a-zA-Z0-9]{6}$/.test(value)
});
//昵稱
Validator.extend('nickname', {
　　getMessage: field => field + ' 只能包含字母、數字或中文',
　　validate: value => !!/^[a-zA-Z0-9\u4e00-\u9fa5]+$/.test(value)
});
//最小字符
Validator.extend('minChar', {
　　getMessage:(field,params) => {
　　return field+ '不能小於'+params[0]+'個字符.'
},
validate: (value,params) => {
　　return !(value.replace(/[^\x00-\xff]/g, 'xx').length<parseInt(params[0]))
}
})
// 最大字符
Validator.extend('maxChar', {
　　getMessage:(field,params) => {
　　return field+ '不能大於'+params[0]+'個字符.'
},
validate: (value,params) => {
　　return !(value.replace(/[^\x00-\xff]/g, 'xx').length>parseInt(params[0]))
　　}
})
export const config = {
　　errorBagName: 'errors', // change if property conflicts
　　// fieldsBagName: 'fields',
　　fieldsBagName: 'fieldsBag',
　　locale: 'zh_CN',
　　dictionary: {
　　　　zh_CN: {
　　　　　　messages: messagesCn
　　　　}
　　}
};
export default validate