vue中vee validate表單校驗(yàn)的幾種基本使用
今天主要記錄一下用vee-validate來進(jìn)行表單校驗(yàn)的幾個基本使用。包括最基礎(chǔ)的必填和長度校驗(yàn);異步請求服務(wù)的校驗(yàn)(重名校驗(yàn)),還有延遲校驗(yàn)。如何引入等就不在這里贅述了,直接進(jìn)入主題。
1.必填和長度校驗(yàn)
直接采用v-validate屬性進(jìn)行配置,不同的校驗(yàn)采用 ‘|' 隔開。是否有報(bào)錯根據(jù) errors.has('userName') 進(jìn)行判斷,‘userName'對應(yīng)的是表單的name屬性的值。
errors.first('userName)
會展示表單校驗(yàn)中第一個錯誤信息。
<el-col :span="4" class="form-label"> <label>用戶名</label> </el-col> <el-col :span="8"> <el-input name="userName" v-model="userName" v-validate="'required|min:2|max:20'"></el-input> <span v-show="errors.has('userName')" class="error">{{ errors.first('userName') }}</span> </el-col>
結(jié)果如下:
從結(jié)果我們可以看到,校驗(yàn)的錯誤信息是展示了,但是默認(rèn)都是英文的,這個可能有時跟我們實(shí)際開發(fā)的需求不是一致的。這個我們可以采用
vee-validate的國際化去進(jìn)行中文的展示。但是這里我要介紹的是另一種方式,如果是系統(tǒng)只需要支持一種語言,我覺得用這種方式就可以。
直接采用 errors.first('userName:required')
即 ‘字段名:校驗(yàn)規(guī)則' 的方式進(jìn)行判斷進(jìn)而展示對應(yīng)提示信息的方式。這個方式可以讓表單在對應(yīng)校驗(yàn)不通過時展示我們自己定義對應(yīng)的個性化提示信息。
優(yōu)點(diǎn)是:配置簡單,方便實(shí)現(xiàn)個性化提示。
<el-col :span="4" class="form-label"> <label>用戶名</label> </el-col> <el-col :span="8"> <el-input name="userName" v-model="userName" v-validate="'required|min:2|max:20'"></el-input> <span v-show="errors.first('userName:required')" class="error">用戶名為必填項(xiàng)</span> <span v-show="errors.first('userName:min')" class="error">用戶名的最小長度為2</span> <span v-show="errors.first('userName:max')" class="error">用戶名的最大長度為20</span> </el-col>
2.異步校驗(yàn) 和延遲
異步校驗(yàn),主要就是兩部分,一個是校驗(yàn)器的定義,一個是使用
定義部分:
import { Validator } from 'vee-validate'; const emailsDB = [ 'abcd@cc.com' ]; const isUnique = value => new Promise((resolve) => { setTimeout(() => { if (emailsDB.indexOf(value) === -1) { return resolve({ valid: true }); } return resolve({ valid: false, data: { message: `${value} 已存在.` } }); }, 200); }); Validator.extend('unique', { validate: isUnique, getMessage: (field, params, data) => data.message });
使用:
<el-col :span="4" class="form-label"> <label>郵箱</label> </el-col> <el-col :span="8"> <el-input name="email" v-model="email" v-validate="'unique'" data-vv-delay="1000"></el-input> <span v-show="errors.first('email:unique')" class="error">重復(fù)</span> </el-col>
結(jié)果:
其中 data-vv-delay="1000
" 就是延遲校驗(yàn)的使用。1000即1000毫秒
以下是幾個例子的完整代碼:
<template> <div> <el-form name="myForm" novalidate> <el-row> <el-col :span="4" class="form-label"> <label>郵箱</label> </el-col> <el-col :span="8"> <el-input name="email" v-model="email" v-validate="'unique'" data-vv-delay="1000"></el-input> <span v-show="errors.first('email:unique')" class="error">重復(fù)</span> </el-col> <el-col :span="4" class="form-label"> <label>用戶名</label> </el-col> <el-col :span="8"> <el-input name="userName" v-model="userName" v-validate="'required|min:2|max:20'"></el-input> <span v-show="errors.first('userName:required')" class="error">用戶名為必填項(xiàng)</span> <span v-show="errors.first('userName:min')" class="error">用戶名的最小長度為2</span> <span v-show="errors.first('userName:max')" class="error">用戶名的最大長度為20</span> </el-col> <!-- <el-col :span="8"> <el-input name="userName" v-model="userName" v-validate="'required|min:2|max:20'"></el-input> <span v-show="errors.has('userName')" class="error">{{ errors.first('userName') }}</span> </el-col> --> </el-row> </el-form> </div> </template> <script> import { Validator } from 'vee-validate'; const emailsDB = [ 'abcd@cc.com' ]; const isUnique = value => new Promise((resolve) => { setTimeout(() => { if (emailsDB.indexOf(value) === -1) { return resolve({ valid: true }); } return resolve({ valid: false, data: { message: `${value} 已存在.` } }); }, 200); }); Validator.extend('unique', { validate: isUnique, getMessage: (field, params, data) => data.message }); export default { data() { return { email: '', userName: '' } } } </script> <style scoped> .form-label { text-align: right; padding-right: 10px; } .error { color: red; } </style>
總結(jié)
以上所述是小編給大家介紹的vue中vee validate表單校驗(yàn)的幾種基本使用,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- 使用validate.js實(shí)現(xiàn)表單數(shù)據(jù)提交前的驗(yàn)證方法
- EasyValidate優(yōu)雅地校驗(yàn)提交數(shù)據(jù)完整性
- Struts2中validate數(shù)據(jù)校驗(yàn)的兩種方法詳解附Struts2常用校驗(yàn)器
- Vee-validate 父組件獲取子組件表單校驗(yàn)結(jié)果的實(shí)例代碼
- Vue.js + Nuxt.js 項(xiàng)目中使用 Vee-validate 表單校驗(yàn)
- validate?注冊頁的表單數(shù)據(jù)校驗(yàn)實(shí)現(xiàn)詳解
相關(guān)文章
vue跳轉(zhuǎn)頁面并且實(shí)現(xiàn)參數(shù)傳遞接受示例
這篇文章主要為大家介紹了vue跳轉(zhuǎn)頁面并且實(shí)現(xiàn)參數(shù)傳遞接受示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06vue.js表單驗(yàn)證插件(vee-validate)的使用教程詳解
這篇文章主要介紹了vue.js表單驗(yàn)證插件(vee-validate)的使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05Element-UI實(shí)現(xiàn)復(fù)雜table表格結(jié)構(gòu)的操作代碼
Element-UI組件el-table用于展示多條結(jié)構(gòu)類似的數(shù)據(jù),可對數(shù)據(jù)進(jìn)行排序、篩選、對比或其他自定義操作,本文給大家介紹Element-UI實(shí)現(xiàn)復(fù)雜table表格結(jié)構(gòu)的操作代碼,感興趣的朋友一起看看吧2023-12-12在vue中使用export?default導(dǎo)出的class類方式
這篇文章主要介紹了在vue中使用export?default導(dǎo)出的class類方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-03-03Vue使用自定義指令實(shí)現(xiàn)拖拽行為實(shí)例分析
這篇文章主要介紹了Vue使用自定義指令實(shí)現(xiàn)拖拽行為,結(jié)合實(shí)例形式分析了Vue使用自定義指令實(shí)現(xiàn)拖拽行為具體步驟、原理與操作注意事項(xiàng),需要的朋友可以參考下2020-06-06Vue實(shí)現(xiàn)指令式動態(tài)追加小球動畫組件的步驟
這篇文章主要介紹了Vue實(shí)現(xiàn)指令式動態(tài)追加小球動畫組件的步驟,幫助大家更好的理解和實(shí)用vue,感興趣的朋友可以了解下2020-12-12