目錄1.安裝2.導(dǎo)入3.定義校驗(yàn)規(guī)則(最好是在utils文件夾中單獨(dú)封裝js文件導(dǎo)出)4.使用Form組件配置校驗(yàn)規(guī)則和錯(cuò)誤對(duì)象 (form 和 Field都是從插件中按需導(dǎo)出)5.使用 Field 組件，添加表單項(xiàng)目校驗(yàn)6.補(bǔ)充表單數(shù)據(jù)和驗(yàn)證規(guī)則數(shù)據(jù)1.安裝

npm i vee-validate@4.0.32.導(dǎo)入

import { Form, Field } from ’vee-validate’3.定義校驗(yàn)規(guī)則(最好是在utils文件夾中單獨(dú)封裝js文件導(dǎo)出)

// 創(chuàng)建js文件進(jìn)行導(dǎo)出export default { // 校驗(yàn)項(xiàng)account account (value) { if (!value) return ’不能為空’// 條件判斷, return true // 最后全部通過(guò)必須return true }, password (value) { if (!value) return ’請(qǐng)輸入密碼’ if (!/^w{6,24}$/.test(value)) return ’密碼是6-24個(gè)字符’ return true }, mobile (value) { if (!value) return ’請(qǐng)輸入手機(jī)號(hào)’ if (!/^1[3-9]d{9}$/.test(value)) return ’手機(jī)號(hào)格式錯(cuò)誤’ return true }, code (value) { if (!value) return ’請(qǐng)輸入驗(yàn)證碼’ if (!/^d{6}$/.test(value)) return ’驗(yàn)證碼是6個(gè)數(shù)字’ return true }, isAgree (value) { if (!value) return ’請(qǐng)勾選同意用戶協(xié)議’ return true }}4.使用Form組件配置校驗(yàn)規(guī)則和錯(cuò)誤對(duì)象 (form 和 Field都是從插件中按需導(dǎo)出)

// validation-schema='mySchema' 配置校驗(yàn)規(guī)則// v-slot：導(dǎo)出錯(cuò)誤對(duì)象<Form :validation-schema='mySchema' v-slot='{ errors }'> <!-- 表單元素 --></Form><script> import schema from ’@/utils/vee-validate-schema’ setup () { // 表單對(duì)象數(shù)據(jù) const form = reactive({ account: null, // 賬號(hào) password: null // 密碼 }) // 校驗(yàn)規(guī)則對(duì)象 const mySchema = { account: schema.account, password: schema.password } return { form, mySchema } } </script>5.使用 Field 組件，添加表單項(xiàng)目校驗(yàn)

//1. 把input改成 `Field` 組件，默認(rèn)解析成input//2. `Field` 添加name屬性，作用是指定使用schema中哪個(gè)校驗(yàn)規(guī)則//3. `Field`添加v-model，作用是提供表單數(shù)據(jù)的雙向綁定//4. 發(fā)生表單校驗(yàn)錯(cuò)誤，顯示錯(cuò)誤類(lèi)名`error`，提示紅色邊框<Field v-model='form.account' name='account' type='text' placeholder='請(qǐng)輸入用戶名' : // 如果返回錯(cuò)誤信息,為true 顯示類(lèi)error /> <!-- <input type='text' placeholder='請(qǐng)輸入用戶名' /> -->6.補(bǔ)充表單數(shù)據(jù)和驗(yàn)證規(guī)則數(shù)據(jù)

// 表單綁定的數(shù)據(jù)const form = reactive({ account: null, // 賬號(hào) password: null, // 密碼 isAgree: true // 是否選中})// 聲明當(dāng)前表單需要的校驗(yàn)數(shù)據(jù)規(guī)則const curSchema = reactive({ account: schema.account, // 賬號(hào) password: schema.password, // 密碼 isAgree: schema.isAgree // 是否選中})

以上就是Vue vee-validate插件的簡(jiǎn)單使用的詳細(xì)內(nèi)容，更多關(guān)于Vue vee-validate插件的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！