Form validation is often encountered in projects, and individual form validation is described in detail on Element’s official documentation. Here I share my solution and verification of multiple forms encountered in the actual project. Welcome to leave a message and discuss relevant technologies together. Please give me more advice.

I’m going to use Promise here.

Here’s an abstract example of the Promise method:

Want to eat hot pot on the weekend, call small A, come over my hot pot, dishes are together, almost seafood, when you come to take some. Then make a phone call to look for friend small B, come over me this dozen hot pot, have seafood, meat little point, you come of time take point. Small C: Come to me to play hot pot, what dishes have, almost wine, you come to the whole bottle. Also poor a bag of hot pot bottom material, take a mobile phone call, small D ah, to dozen live, how several are in, I this electric stove is not too good, what are ready, you bring electric stove over, incidentally bring bag bottom material.

Eat hot pot this thing is done, sweet.

But about this. It can’t always go well. Someone can’t make it, right? If they can’t make it, they can’t eat it.

In fact, many forms of verification, and this is about the same, each form is asked again, if we have passed, flattered, if one of the verification failed, that sorry, but also tell the user, fill in the right again.

Through the Promise, perform query detection on each form, no matter the result if, enter promise.all first, wait for all forms to complete the query, if you can, then trigger, elated. Otherwise, a failed response in catch is 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(' Error '))}})} promise.all (formName.map(item => validates(item))).then(() => {console.log(' success ')) }).catch(() => {console.log(' failed ')})}}Copy the code

Finally, post the full code here:

<div class="home"> <el-form :model="tableForm1" ref="tableForm1" :rules="rules1" label-width="100px" > <el-form-item <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=" age" prop="age"> <el-input v-model.number="tableForm2.age" autocomplete="off"></el-input> </el-form-item> </el-form> <el-form :model="tableForm3" ref="tableForm3" : rules3 ="rules3" label-width="100px" > <el-form-item label=" prop "> <el-input v-model.number="tableForm3.name" autocomplete="off"></el-input> </el-form-item> </el-form> <el-button </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: 'Price cannot be empty ', trigger: 'blur'}]}, rules2: {price: [{required: true, message:' Price cannot be empty ', trigger: 'blur'}]}, rules2: {age: [{required: true, message: 'Age cannot be empty ', trigger: 'blur'}]}, rules3: {name: [{required: true, message: 'Name cannot be empty ', 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(' Error '))}})} promise.all (formName.map(item => validates(item))).then(() => {console.log(' success ')) }). The catch (() = > {the console. The log (' failure ')})}}} < / script >Copy the code

Ha ha, today is another beautiful happy day.