Implementation of element multiple form validation

In the project, form testing is often encountered. For a single form test, you can view the official website document of element, which has a detailed introduction. Here I share my experience of checking multiple forms at the same time in an actual project and my solution. Welcome everyone to leave a message and discuss related technologies together. Please give me more advice.

Promise is mainly used here to solve this problem.

Let's take an example to abstractly understand the Promise method:

If you want to eat hotpot on the weekend, call Xiao A and tell him to come over to my place for hotpot. All the dishes are ready except for the seafood. You can bring some when you come. Then I called my friend Xiao B and asked him to come over to my place for hotpot. There is seafood, but not enough meat. You can bring some when you come. Then I called my friend Xiao C: Come over to my place for hotpot. I have all the dishes and we're almost done with wine. Bring me a few bottles when you come. I'm still short of a packet of hot pot base. I took out my cell phone and called, "Xiao D, come and help me. Why are all of you here? My electric stove is not working properly. Everything is ready. Can you bring the stove over here and also the packet of base?"

Eating hotpot is now a done deal, so delicious.

But this matter. Things won't always go smoothly, there will always be people who can't come, right? If they can't come, we can't enjoy the hotpot.

In fact, multiple form verification is similar to this. Each form is asked once. If everyone passes, you’re happy. If one of the verification fails, I’m sorry, but I have to tell the user to fill it out correctly first.

Through Promise, query detection is performed on each form. Regardless of the result, enter Promise.all first and wait for all forms to be queried. If everyone is OK, then trigger then, which is great. On the contrary, if the execution fails in the catch, the response 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('Verification is incorrect'))
            }
          })
        })
      }
      Promise.all(formName.map(item => validates(item))).then(() => {
        console.log('success')
      }).catch(() => {
        console.log('failed')
      })
    }
  }

Finally, here is the complete code:

  <div class="home">
    <el-form :model="tableForm1" ref="tableForm1" :rules="rules1" label-width="100px" >
      <el-form-item label="Price" 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="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" :rules="rules3" label-width="100px" >
      <el-form-item label="Name" prop="name">
        <el-input v-model.number="tableForm3.name" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>

    <el-button type="primary" @click="submitForm">Submit</el-button>
    <el-button @click="resetForm">Reset</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: {
        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('Verification is incorrect'))
            }
          })
        })
      }
      Promise.all(formName.map(item => validates(item))).then(() => {
        console.log('success')
      }).catch(() => {
        console.log('failed')
      })
    }
  }
}
</script>

This is the end of this article about the implementation of multiple form validation in element. For more relevant element form validation content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Vue ElementUI Form form validation
Vue Element-ui form validation rule implementation
Vue element-ui parent component controls the form validation operation of the child component
Detailed explanation of element-ui form validation rules configuration common black technology
Vue elementUI form validation implementation code (multi-layer nesting)
Vue elementUI form validation function array multi-layer nesting
Vue+element realizes form validation function
Element implementation of form validation rendered by v-for loop

<<: Detailed tutorial on installing mysql 8.0.13 (rpm) on Centos7

>>: How to set up automatic daily database backup in Linux