1. 程式人生 > 其它 >vue + elementUI 多個表單同時校驗

vue + elementUI 多個表單同時校驗

在專案開發中會遇到多個表單塊同時做校驗的情況,這時候會因為程式碼分散或者呈現在不同元件而無法一次性校驗完成。

父元件呼叫

let valid = await this.$refs.formData.handleSubmitForm()

  子元件

//在data中定義
refArr: ['form1','form2']
//提交或者儲存
    handleSubmitForm() {
      const v = new Promise((resolve, reject) => {
        Promise.all(this.refArr.map(this.checkForm)).then(res => {
          const validateResult = res.every(item => !!item)
          if (validateResult) {
            resolve(validateResult)
            console.log(res, '表單都驗證成功了')
          } else {
            reject(validateResult)
            console.log(res, '表單未校驗通過')
          }
        })
      })
      return v
    },
    checkForm(formName) {
      let t = this
      return new Promise(resolve => {
        t.$refs[formName][0].validate(res => {
          resolve(res)
        })
      })
    },
    //清除表單內容
    handleresetFields() {
      this.refArr.forEach(el => {
        this.resetForm(el)
      })
    },
    resetForm(formName) {
      this.$refs[formName][0].resetFields()
    }