本教程主要講解 VeeValidate 的用法廓鞠，希望通過寫這篇文章可以對自己和讀者帶來方便
創(chuàng)建項目
這里直接使用了 vue 的腳手架 vue cli 創(chuàng)建項目撇吞，具體方法參考官網(wǎng)vue cli 創(chuàng)建項目
基礎知識
基本用法
注冊 ValidationProvider
有兩種注冊方法：第一種可以是直接在組件中使用 ValidationProvider 組件（推薦用法）
import { ValidationProvider } from 'vee-validate';
export default {
components: {
ValidationProvider
}
};
第二種方法是直接進行全局注冊，這樣單個組件中就不需要重復注冊栈幸，當然實際業(yè)務中應該不會經(jīng)常用到表格校驗汤求。
import { ValidationProvider } from 'vee-validate';
Vue.component('ValidationProvider', ValidationProvider);
在組件模版中使用 ValidationProvider
<ValidationProvider v-slot="{ errors }">
<input v-model="value" type="text">
<span>{{ errors[0] }}</span>
</ValidationProvider>
- ValidationProvider：將 input 標簽和 span 標簽里面的內(nèi)容包裹起來
- v-model：ValidationProvider 通過該屬性可以搜索到需要驗證的值
- v-slot：ValidationProvider 通過該屬性將信息傳遞出來挨稿。
增加規(guī)則
import { extend } from 'vee-validate'
extend('minmax', {
validate (value, { min, max }) {
return value.length >= min && value.length <= max;
},
params: ['min', 'max']
})
- extend：可以定義規(guī)則的名稱（minmax）和 validate 函數(shù), params 屬性，如果有需要可以定義多個規(guī)則
- validate: 可以定義具體的驗證方法鸟妙，其中 value 對應表格中輸入的值焦人，{min,max} 對應 params 數(shù)組中的取值
- params: 定義 validate 函數(shù)中使用到的參數(shù)
<ValidationProvider rules="minmax:2,8" v-slot="{ errors }">
<input v-model="email" name="test" type="text" />
<span>{{ errors[0] }}</span>
</ValidationProvider>
-
rules 參數(shù)直接使用前面定義的 minmax 規(guī)則，后面還傳入了兩個參數(shù)圆仔，2和8垃瞧；如果使用了多個規(guī)則，規(guī)則名稱之間可以使用“｜”符號隔開
錯誤狀態(tài)1.png
- 輸入框的值不符合定義的規(guī)則坪郭，右側會出現(xiàn)提示信息个从。如圖所示，當輸入框的內(nèi)容長度小于2或者大于8的時候，右側出現(xiàn)提示信息“test is not valid”嗦锐。其中“test”是 input 輸入框中定義的 name
- 輸入框的值符合定義的規(guī)則嫌松，右側沒有提示信息。如圖所示奕污，當輸入框的內(nèi)容長度大于等于2并且小于等于8的時候萎羔，右側沒有出現(xiàn)提示信息。
增加信息
前面長度不符合規(guī)則的默認提示顯然不夠友好碳默。為了自定義提示信息贾陷，可以在 extend 函數(shù)中增加 message 屬性
import { extend } from 'vee-validate'
extend('minmax', {
validate (value, { min, max }) {
return value.length >= min && value.length <= max;
},
params: ['min', 'max'],
message:'The length of {_field_} must be between {min} and {max}'
})
-
message: 定義不符合規(guī)則的情況下，出現(xiàn)的提示信息嘱根。其中 {_field_}對應ValidationProvider 中使用的 name髓废，如果沒有定義這個 name，會自動去找 html 中的 name 或者 id 屬性该抒，前面的報錯信息正是使用到了 input 中 name 的屬性值 test慌洪；另外，{min} 和 {max} 對應 params 屬性的值凑保。
截屏2020-02-26上午12.34.06.png 輸入框的內(nèi)容不符合規(guī)則要求的時候冈爹，會出現(xiàn)提示信息： The length of test must be between 2 and 8
可用的規(guī)則
除了自定義規(guī)則，VeeValidate 也自帶了很多規(guī)則欧引，詳細內(nèi)容可參考官方文檔的詳細規(guī)則频伤，下面例舉其中一個規(guī)則的使用方法
import { extend } from 'vee-validate'
import { min } from 'vee-validate/dist/rules'
extend('min',min)
- 通過 extend 函數(shù)引用自帶規(guī)則 min
<ValidationProvider name="email" rules="min:4" v-slot="{ errors,classes }">
<div class="control" :class="classes">
<input v-model="email" name="test" type="text" />
<span>{{ errors[0] }}</span>
</div>
</ValidationProvider>
- rules: ValidationProvider 的 rules 屬性就可以直接設置輸入的值要大于等于4
