element多個表單校驗的實現
阿新 • • 發佈:2021-05-28
在專案中,經常會遇到表單檢驗,單個表單檢驗可檢視element的官網文件,裡面有詳細的介紹。在這裡我分享在實際專案中遇到多個表單同時進行校驗以及我的解決方法,歡迎大家留言,一起探討相關技術,請多多指教。
這裡主要用到 Promise 來解決。
關於Promise方法舉個例子來抽象理解:
週末想吃火鍋,打電話告訴小A,過來我這打火鍋,菜都齊了,就差點海鮮,你來的時候帶點。接著打電話找朋友小B,過來我這打火鍋,有海鮮,肉少了點,你來的時候帶點。在接著打電話找朋友小C:過來我這打火鍋,啥菜都有了,差點酒,你來的時候整幾瓶。還差一包火鍋底料,拿手機打電話,小D啊,來打活個,咋幾個都在,我這電爐不太行了,啥都準備好了,你把電爐帶過來,順便帶包底料。
吃火鍋這個事就成了,美滋滋。
但這個事吧。總不會一直順利,總有人來不了對吧,來不了這火鍋就吃不成了。
其實多個表單驗證,就和這差不多,每個表單都詢問一遍,如果大家都通過了,美滋滋,假如其中一個驗證失敗,那對不起,還得告訴使用者,填對了再說。
通過Promise,對每個表單執行詢問檢測,無論結果如果,先進入Promise.all中,等待所有表單詢問完畢,如果大家就可以,就觸發then,美滋滋。反之,catch中執行失敗響應就ok了。
const formName = ['tableForm1','tablehttp://www.cppcns.comForm2','tableForm3'] const validates = (item) => { return new Promise((resolve,r程式設計客棧eject) => { if (!this.$refs[item]) { resolve() return false } this.$refs[item].validate((valid) => { if (valid) { resolve() } else { reject(new Error('驗證不對')) } }) }) } 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="價格" 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" http://www.cppcns.comref="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: '價格不能為空',trigger: 'blur' }] },rules2: { age: [{ required: true,message: '年齡不能為空',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',reject) => { if (!this.$refs[item]) { resolve() return false } this.$refs[item].validate((valid) => { 程式設計客棧 if (valid) { resolve() } else { reject(new Error('驗證不對')) } }) }) } Promise.all(formName.map(item => validates(item))).then(() => { console.log('成功') }).catch(() => { console.log('失敗') }) } } } </script>
到此這篇關於element多個表單校驗的實現的文章就介紹到這了,更多相關element 表單校驗內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!