blogs

多form表单验证

怡然

151字小于1分钟

element-uiPromise

2024-06-03

相关信息

在开发中常见同一个页面有多个表单，提交时需每个表单都验证通过才可以正常提交，否则返回报错信息，可以使用Promise.all()进行校验。具体方法如下：

// 校验方法
submitForm(formName) {
  return new Promise((resolve, reject) => {
    this.$refs[formName].validate((valid) => {
      if (valid) {
        resolve()
      } else {
        reject(new Error('请检查表单填写'))
      }
    })
  })
},
// 提交按钮
onSubmit() {
  Promise.all([
    this.submitForm('form1'), 
    this.submitForm('form2')，
    ...
    ])
    .then(() => {
      // 此处可处理表单验证通过后的提交方法
    })
    .catch(() => {
      this.$message.error('验证失败')
    })
}