今天主要記錄一下用vee-validate來進行表單校驗的幾個基本使用。包括最基礎的必填和長度校驗；異步請求服務的校驗（重名校驗），還有延遲校驗。如何引入等就不在這里贅述了，直接進入主題。
1.必填和長度校驗
直接采用v-validate屬性進行配置，不同的校驗采用 ‘|' 隔開。是否有報錯根據 errors.has('userName') 進行判斷，‘userName'對應的是表單的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>結果如下：
從結果我們可以看到，校驗的錯誤信息是展示了，但是默認都是英文的，這個可能有時跟我們實際開發的需求不是一致的。這個我們可以采用
vee-validate的國際化去進行中文的展示。但是這里我要介紹的是另一種方式，如果是系統只需要支持一種語言，我覺得用這種方式就可以。
直接采用 errors.first('userName:required') 即 ‘字段名：校驗規則' 的方式進行判斷進而展示對應提示信息的方式。這個方式可以讓表單在對應校驗不通過時展示我們自己定義對應的個性化提示信息。
優點是：配置簡單，方便實現個性化提示。
<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">重復</span> </el-col>結果：
其中 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">重復</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>總結
以上所述是小編給大家介紹的vue中vee validate表單校驗的幾種基本使用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
