您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)element多個(gè)表單校驗(yàn)的實(shí)現(xiàn)方法的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
在項(xiàng)目中,經(jīng)常會(huì)遇到表單檢驗(yàn),單個(gè)表單檢驗(yàn)可查看element的官網(wǎng)文檔,里面有詳細(xì)的介紹。在這里我分享在實(shí)際項(xiàng)目中遇到多個(gè)表單同時(shí)進(jìn)行校驗(yàn)以及我的解決方法,歡迎大家留言,一起探討相關(guān)技術(shù),請多多指教。
這里主要用到 Promise 來解決。
關(guān)于Promise方法舉個(gè)例子來抽象理解:
周末想吃火鍋,打電話告訴小A,過來我這打火鍋,菜都齊了,就差點(diǎn)海鮮,你來的時(shí)候帶點(diǎn)。接著打電話找朋友小B,過來我這打火鍋,有海鮮,肉少了點(diǎn),你來的時(shí)候帶點(diǎn)。在接著打電話找朋友小C:過來我這打火鍋,啥菜都有了,差點(diǎn)酒,你來的時(shí)候整幾瓶。還差一包火鍋底料,拿手機(jī)打電話,小D啊,來打活個(gè),咋幾個(gè)都在,我這電爐不太行了,啥都準(zhǔn)備好了,你把電爐帶過來,順便帶包底料。
吃火鍋這個(gè)事就成了,美滋滋。
但這個(gè)事吧??偛粫?huì)一直順利,總有人來不了對吧,來不了這火鍋就吃不成了。
其實(shí)多個(gè)表單驗(yàn)證,就和這差不多,每個(gè)表單都詢問一遍,如果大家都通過了,美滋滋,假如其中一個(gè)驗(yàn)證失敗,那對不起,還得告訴用戶,填對了再說。
通過Promise,對每個(gè)表單執(zhí)行詢問檢測,無論結(jié)果如果,先進(jìn)入Promise.all中,等待所有表單詢問完畢,如果大家就可以,就觸發(fā)then,美滋滋。反之,catch中執(zhí)行失敗響應(yīng)就ok了。
const formName = ['tableForm1', 'tableForm2', 'tableForm3'] const validates = (item) => { return new Promise((resolve, reject) => { if (!this.$refs[item]) { resolve() return false } this.$refs[item].validate((valid) => { if (valid) { resolve() } else { reject(new Error('驗(yàn)證不對')) } }) }) } Promise.all(formName.map(item => validates(item))).then(() => { console.log('成功') }).catch(() => { console.log('失敗') }) } }
最后,在這里貼上完整代碼:
<div class="home"> <el-form :model="tableForm1" ref="tableForm1" :rules="rules1" label-width="100px" > <el-form-item label="價(jià)格" prop="price"> <el-input v-model.number="tableForm1.price" autocomplete="off"></el-input> </el-form-item> </el-form> <el-form :model="tableForm2" ref="tableForm2" :rules="rules2" label-width="100px" > <el-form-item label="年齡" prop="age"> <el-input v-model.number="tableForm2.age" autocomplete="off"></el-input> </el-form-item> </el-form> <el-form :model="tableForm3" ref="tableForm3" :rules="rules3" label-width="100px" > <el-form-item label="姓名" prop="name"> <el-input v-model.number="tableForm3.name" autocomplete="off"></el-input> </el-form-item> </el-form> <el-button type="primary" @click="submitForm">提交</el-button> <el-button @click="resetForm">重置</el-button> </div> </template> <script> export default { name: 'Home', data () { return { tableForm1: { price: '' }, tableForm2: { age: '' }, tableForm3: { name: '' }, rules1: { price: [{ required: true, message: '價(jià)格不能為空', trigger: 'blur' }] }, rules2: { age: [{ required: true, message: '年齡不能為空', trigger: 'blur' }] }, rules3: { name: [{ required: true, message: '姓名不能為空', trigger: 'blur' }] } } }, methods: { resetForm () { this.$refs.tableForm1.resetFields() this.$refs.tableForm2.resetFields() this.$refs.tableForm3.resetFields() }, submitForm () { const formName = ['tableForm1', 'tableForm2', 'tableForm3'] const validates = (item) => { return new Promise((resolve, reject) => { if (!this.$refs[item]) { resolve() return false } this.$refs[item].validate((valid) => { if (valid) { resolve() } else { reject(new Error('驗(yàn)證不對')) } }) }) } Promise.all(formName.map(item => validates(item))).then(() => { console.log('成功') }).catch(() => { console.log('失敗') }) } } } </script>
感謝各位的閱讀!關(guān)于“element多個(gè)表單校驗(yàn)的實(shí)現(xiàn)方法”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。