VeeValidate 是一個(gè)輕量級(jí)的表單驗(yàn)證插件路媚，內(nèi)置了豐富的校驗(yàn)規(guī)則和錯(cuò)誤提示，而且非常容易擴(kuò)展殊轴，下面簡(jiǎn)單介紹它的使用方法
安裝
npm i vee-validate
# or
yarn add vee-validate
基本使用
template
<ValidationProvider class="form-item" name="email" tag="div" rules="required|email" v-slot="{ errors }">
<label>郵箱</label>
<input v-model="email" type="text" />
<span class="ml-3">{{ errors[0] }}</span>
</ValidationProvider>
<ValidationProvider class="form-item" name="password" tag="div" rules="required|password:6,18" v-slot="{ errors }">
<label>密碼</label>
<input v-model="password" type="password" autocomplete="off" />
<span class="ml-3">{{ errors[0] }}</span>
</ValidationProvider>
script
import { ValidationProvider } from 'vee-validate'
export default {
name: 'HelloI18n',
components: { ValidationProvider },
data() {
return {
email: ''厌殉，
password: ''
}
}
}
ValidationProvider會(huì)自動(dòng)在其子孫結(jié)點(diǎn)中查找具有v-model、:value的輸入框并進(jìn)行校驗(yàn)踩叭。tag指定<ValidationProvider>渲染成的html元素磕潮。name指定字段的名字，通過name還可以配置字段名的多語言版本容贝，如果沒有為ValidationProvider提供name自脯，則字段名默認(rèn)為輸入框的id或者name屬性。rules指定校驗(yàn)規(guī)則斤富，應(yīng)用多個(gè)規(guī)則用|隔開膏潮，vee-validate內(nèi)置了許多校驗(yàn)規(guī)則，還可以通過extent自定義規(guī)則满力。
校驗(yàn)規(guī)則
一個(gè)項(xiàng)目中可能出現(xiàn)很多相同的輸入框焕参，為了讓校驗(yàn)規(guī)則在這些輸入框都能生效，可以在一個(gè)單獨(dú)文件中定義所有校驗(yàn)規(guī)則油额，然后在main.js中引入
utils/veevalidate.js
import { extend, localize } from 'vee-validate'
import { required, email, min, length, confirmed } from 'vee-validate/dist/rules'
import zh from 'vee-validate/dist/locale/zh_CN.json'
import en from 'vee-validate/dist/locale/en.json'
extend('email', email)
extend('min', min)
extend('required', required)
extend('length', length)
extend('confirmed', confirmed)
extend('password', {
validate(value, { min, max }) {
return value.length >= min && value.length <= max
},
params: ['min', 'max']
})
localize({
'zh-CN': {
names: {
email: '郵箱',
password: '密碼'
},
messages: {
...zh.messages,
required: '請(qǐng)輸入{_field_}',
email: '請(qǐng)輸入正確的郵箱格式',
password: '密碼必須是6到18位'
}
},
en: {
names: {
email: 'email',
password: 'password'
},
messages: {
...en.messages,
required: 'please input {_field_}',
email: 'please input correct email',
password: 'the password length should be 6 to 18'
}
}
})
localize('zh-CN')
自定義校驗(yàn)規(guī)則
extend('ruleName', rule)
第一個(gè)參數(shù)是規(guī)則名稱叠纷，第二個(gè)參數(shù)是規(guī)則的schema。如果希望在定義規(guī)則時(shí)同時(shí)定義錯(cuò)誤消息體潦嘶，可以像下面這樣寫
extend('required', {
...required, // 官方自帶的校驗(yàn)規(guī)則
message: '必填項(xiàng)!!!' // 自定義錯(cuò)誤消息
})
傳參
自定義規(guī)則支持傳參涩嚣，如rules="required|password:6,18"表示應(yīng)用required和password兩個(gè)規(guī)則，并向第二個(gè)規(guī)則傳遞了兩個(gè)參數(shù)掂僵，接收的參數(shù)需要在params進(jìn)行聲明
extend('password', {
validate(value, { min, max }) {
return value.length >= min && value.length <= max
},
params: ['min', 'max']
})
本地化
vee-validate提供localize方法設(shè)置語言環(huán)境
設(shè)置語言環(huán)境
import { localize } from 'vee-validate';
// Activate the Arabic locale.
localize('ar');
也可以在設(shè)置語言環(huán)境的同時(shí)加載該語境下的messages
import { localize } from 'vee-validate';
import ar from 'vee-validate/dist/locale/ar.json';
// Install and Activate the Arabic locale.
localize('ar', ar);
本地化字段名
默認(rèn)字段名是ValidationProvider的name屬性航厚，可以通過names來配置其他語言版本
localize({
'zh-CN': {
names: {
email: '郵箱',
password: '密碼'
}
}
})
本地化錯(cuò)誤消息
默認(rèn)提示信息都是英文的，通過設(shè)置messages可以在切換語言后顯示對(duì)應(yīng)語言的錯(cuò)誤提示信息锰蓬。...zh.messages是加載vee-validate內(nèi)置的錯(cuò)誤消息幔睬。{_field_}是一個(gè)占位符，它會(huì)被ValidationProvider的name屬性值所替代
import zh from 'vee-validate/dist/locale/zh_CN.json'
localize({
'zh-CN': {
messages: {
...zh.messages,
required: '請(qǐng)輸入{_field_}',
email: '請(qǐng)輸入正確的郵箱格式',
password: '密碼必須是6到18位'
}
}
})
為每個(gè)字段設(shè)置錯(cuò)誤消息
vee-validate提供了fields選項(xiàng)芹扭，可以為某個(gè)字段的每一個(gè)規(guī)則定義不同錯(cuò)誤提示消息
localize({
en: {
fields: {
password: {
required: 'Password cannot be empty!',
max: 'Are you really going to remember that?',
min: 'Too few, you want to get doxed?'
}
}
}
});
懶加載
如果要為不同語言構(gòu)建不同應(yīng)用版本麻顶，那么一次導(dǎo)入所有messages顯然不是很好的選擇，可以使用動(dòng)態(tài)導(dǎo)入方式代替
import { localize } from 'vee-validate';
function loadLocale(code) {
return import(`vee-validate/dist/locale/${code}.json`).then(locale => {
localize(code, locale);
});
}
驗(yàn)證整個(gè)表單
在提交表單的時(shí)候需要對(duì)整個(gè)表單進(jìn)行驗(yàn)證冯勉，這個(gè)時(shí)候需要用到ValidationObserver組件
template
<ValidationObserver tag="form" ref="obs">
<ValidationProvider class="form-item" name="email" tag="div" rules="required|email" v-slot="{ errors }">
<label>郵箱</label>
<input v-model="email" type="text" />
<span class="ml-3">{{ errors[0] }}</span>
</ValidationProvider>
<ValidationProvider class="form-item" name="password" tag="div" rules="required|password:6,18" v-slot="{ errors }">
<label>密碼</label>
<input v-model="password" type="password" autocomplete="off" />
<span class="ml-3">{{ errors[0] }}</span>
</ValidationProvider>
</ValidationObserver>
script
async submit() {
const isValid = await this.$refs.obs.validate()
if (!isValid) {
// 沒有通過校驗(yàn)
return false
}
// 通過校驗(yàn)
},
觸發(fā)方式
vee-validate提供了四種觸發(fā)驗(yàn)證的方式澈蚌，默認(rèn)情況下用戶輸入時(shí)觸發(fā)。
- Aggressive灼狰，輸入時(shí)觸發(fā)(默認(rèn))
- Passive宛瞄，表單提交時(shí)觸發(fā)
- Lazy，失去焦點(diǎn)(blur)或者更改(change)時(shí)觸發(fā)
- Eager，
Aggressive和Lazy的組合份汗，當(dāng)輸入框失去焦點(diǎn)(blur)或者內(nèi)容更改(change)時(shí)觸發(fā)一次校驗(yàn)盈电，如果無效，進(jìn)入Aggressive模式杯活，直到輸入變?yōu)橛行?/li>
