vue element自定義表單驗(yàn)證請求后端接口驗(yàn)證
更新時間：2019年12月11日 09:35:05 作者：sunshine1213
這篇文章主要介紹了vue element自定義表單驗(yàn)證請求后端接口驗(yàn)證，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
做vue項(xiàng)目的時候遇到了一個需求，在驗(yàn)證某個表單項(xiàng)時不僅需要是必填項(xiàng)而且要去通過接口校驗(yàn)是否有重復(fù)值。
template
<el-form-item label="賬戶" prop="userid"> <el-input v-model="addForm.userid"></el-input> </el-form-item>
引入接口
import { checkUseridRepeat } from '@/api/user'
校驗(yàn)
data: () => {
var validateUserid = (rule, value, callback) => {
if (value === '') {
callback(new Error('必填'))
} else {
checkUseridRepeat().then(response => {
if ( response.code === '1') {
callback(new Error('已經(jīng)存在，不能重復(fù)'))
}
})
}
}
return {
addrules: { // 新增表單校驗(yàn)
userid: [
{ required: true, validator: validateUserid, trigger: 'blur' }
],
},
}
},
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue3中的伸縮菜單組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue中父子組件注意事項(xiàng),傳值及slot應(yīng)用技巧
這篇文章主要介紹了vue中父子組件注意事項(xiàng),傳值及slot應(yīng)用技巧,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
淺談在vue項(xiàng)目中如何定義全局變量和全局函數(shù)
本篇文章主要介紹了淺談在vue項(xiàng)目中如何定義全局變量和全局函數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
本文通過實(shí)例代碼給大家講解vue.js樹形組件之刪除雙擊增加分支功能，非常不錯，具有參考借鑒價值，需要的的朋友參考下2017-02-02
這篇文章主要給大家介紹了關(guān)于vue中watch和computed區(qū)別的相關(guān)資料,computed和watch都是vue框架中的用于監(jiān)聽數(shù)據(jù)變化的屬性,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
本文深入分析了副作用的實(shí)現(xiàn)以及執(zhí)行時機(jī)，并詳細(xì)分析了用于存儲副作用函數(shù)的targetMap的數(shù)據(jù)結(jié)構(gòu)及其實(shí)現(xiàn)原理，還深入分析了依賴收集track函數(shù)以及派發(fā)更新 trigger 函數(shù)的實(shí)現(xiàn),需要的朋友可以參考下2022-08-08
Vue.js 遞歸組件實(shí)現(xiàn)樹形菜單（實(shí)例分享）
本文主要對介紹利用Vue.js 的遞歸組件，實(shí)現(xiàn)了一個最基本的樹形菜單。具有很好的參考價值，下面就跟著小編一起來看下吧2016-12-12
Vuex 在Vue 組件中獲得Vuex 狀態(tài)state的方法
今天小編就為大家分享一篇Vuex 在Vue 組件中獲得Vuex 狀態(tài)state的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示懸浮框效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示懸浮框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
基于vue實(shí)現(xiàn)圖片驗(yàn)證碼倒計時60s功能
這篇文章主要介紹了基于vue實(shí)現(xiàn)圖片驗(yàn)證碼倒計時60s功能,本文通過截圖實(shí)例代碼的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12