vue中vee validate表單校驗的幾種基本使用
今天主要記錄一下用vee-validate來進行表單校驗的幾個基本使用。包括最基礎(chǔ)的必填和長度校驗;異步請求服務(wù)的校驗(重名校驗),還有延遲校驗。如何引入等就不在這里贅述了,直接進入主題。
1.必填和長度校驗
直接采用v-validate屬性進行配置,不同的校驗采用 ‘|' 隔開。是否有報錯根據(jù) errors.has('userName') 進行判斷,‘userName'對應(yīng)的是表單的name屬性的值。
errors.first('userName)
會展示表單校驗中第一個錯誤信息。
<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é)果我們可以看到,校驗的錯誤信息是展示了,但是默認都是英文的,這個可能有時跟我們實際開發(fā)的需求不是一致的。這個我們可以采用
vee-validate的國際化去進行中文的展示。但是這里我要介紹的是另一種方式,如果是系統(tǒng)只需要支持一種語言,我覺得用這種方式就可以。
直接采用 errors.first('userName:required')
即 ‘字段名:校驗規(guī)則' 的方式進行判斷進而展示對應(yīng)提示信息的方式。這個方式可以讓表單在對應(yīng)校驗不通過時展示我們自己定義對應(yīng)的個性化提示信息。
優(yōu)點是:配置簡單,方便實現(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">用戶名為必填項</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.異步校驗 和延遲
異步校驗,主要就是兩部分,一個是校驗器的定義,一個是使用
定義部分:
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
" 就是延遲校驗的使用。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">用戶名為必填項</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表單校驗的幾種基本使用,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
vue跳轉(zhuǎn)頁面并且實現(xiàn)參數(shù)傳遞接受示例
這篇文章主要為大家介紹了vue跳轉(zhuǎn)頁面并且實現(xiàn)參數(shù)傳遞接受示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-06-06vue.js表單驗證插件(vee-validate)的使用教程詳解
這篇文章主要介紹了vue.js表單驗證插件(vee-validate)的使用,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05Element-UI實現(xiàn)復(fù)雜table表格結(jié)構(gòu)的操作代碼
Element-UI組件el-table用于展示多條結(jié)構(gòu)類似的數(shù)據(jù),可對數(shù)據(jù)進行排序、篩選、對比或其他自定義操作,本文給大家介紹Element-UI實現(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實現(xiàn)指令式動態(tài)追加小球動畫組件的步驟
這篇文章主要介紹了Vue實現(xiàn)指令式動態(tài)追加小球動畫組件的步驟,幫助大家更好的理解和實用vue,感興趣的朋友可以了解下2020-12-12