一、背景

在一個頁面中需要實現(xiàn)兩個Form表單，并在頁面提交時需要對兩個Form表單進(jìn)行校驗，兩個表單都校驗成功時才能提交

所用技術(shù)棧：Vue2+Element UI

二、實現(xiàn)效果

三、多個表單驗證

注意項：

兩個form表單，每個表單上都設(shè)置單獨的model和ref，不能同時使用，否則每個表單上的校驗提示會失效

<template>
  <div>
    <!-- 表單一區(qū)域 -->
    <el-form :inline="true" :model="form1Mode" class="demo-form-inline" ref="form1Ref" :rules="form1Rules">
      <el-form-item label="表單一" prop="user">
        <el-input v-model="form1Mode.user" placeholder="form1"></el-input>
      </el-form-item>
    </el-form>
    <!-- 表單二區(qū)域 -->
    <el-form :inline="true" :model="form2Mode" class="demo-form-inline" ref="form2Ref" :rules="form2Rules">
      <el-form-item label="表單二" prop="user">
        <el-input v-model="form2Mode.user" placeholder="form2"></el-input>
      </el-form-item>
    </el-form>
    <!-- 按鈕提交區(qū)域 -->
    <div>
      <el-button type="primary" @click="onSubmit">確定</el-button>
      <el-button>取消</el-button>
    </div>
  </div>
</template>

3.1、方式一：依次對兩個表單進(jìn)行校驗

<script>
export default {
  data() {
    return {
      form1Mode: {
        user: ''
      },
      form2Mode: {
        user: ''
      },
      form1Rules: {
        user: [{ required: true, message: '請輸入form1', trigger: 'blur' }]
      },
      form2Rules: {
        user: [{ required: true, message: '請輸入form2', trigger: 'blur' }]
      }
    }
  },
  methods: {
    //確定按鈕
    async onSubmit() {
      try {
        await this.$refs.form1Ref.validate()
        console.log('表單1校驗通過')
        await this.$refs.form2Ref.validate()
        console.log('表單2校驗通過')
        //都校驗成功之后，這里可以發(fā)請求
        this.$message.success('表單校驗成功')
      } catch (error) {
        console.error('表單校驗失敗', error)
      }
    }
  }
}
</script>

3.2、方式二：兩個表單同時校驗------使用Promise.all

<script>
export default {
  data() {
    return {
      form1Mode: {
        user: ''
      },
      form2Mode: {
        user: ''
      },
      form1Rules: {
        user: [{ required: true, message: '請輸入form1', trigger: 'blur' }]
      },
      form2Rules: {
        user: [{ required: true, message: '請輸入form2', trigger: 'blur' }]
      }
    }
  },
  methods: {
    //封裝驗證函數(shù)
    submitForm(formUser) {
      return new Promise((resolve, reject) => {
        this.$refs[formUser].validate((valid) => {
          if (valid) {
            resolve()
          } else {
            reject(new Error('錯誤'))
          }
        })
      })
    },
    //確定按鈕
    onSubmit() {
      Promise.all([this.submitForm('form1Ref'), this.submitForm('form2Ref')])
        .then(() => {
          //驗證成功后在此處發(fā)請求
          this.$message.success('驗證通過')
        })
        .catch(() => {
          this.$message.error('驗證失敗')
        })
    }
  }
}
</script>

最后，???? ?????? ?????文章來源地址http://www.zghlxwxcb.cn/news/detail-733757.html

到了這里，關(guān)于Element 多個Form表單 同時驗證的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！