快捷導(dǎo)航

element多個(gè)表單校驗(yàn)的實(shí)現(xiàn)

更新時(shí)間：2021年05月27日 17:05:52 作者：小白踩坑

在項(xiàng)目中，經(jīng)常會(huì)遇到表單檢驗(yàn)，在這里我分享在實(shí)際項(xiàng)目中遇到多個(gè)表單同時(shí)進(jìn)行校驗(yàn)以及我的解決方法，感興趣的可以了解一下

在項(xiàng)目中，經(jīng)常會(huì)遇到表單檢驗(yàn)，單個(gè)表單檢驗(yàn)可查看element的官網(wǎng)文檔，里面有詳細(xì)的介紹。在這里我分享在實(shí)際項(xiàng)目中遇到多個(gè)表單同時(shí)進(jìn)行校驗(yàn)以及我的解決方法，歡迎大家留言，一起探討相關(guān)技術(shù)，請多多指教。

這里主要用到 Promise 來解決。

關(guān)于Promise方法舉個(gè)例子來抽象理解：

周末想吃火鍋，打電話告訴小A，過來我這打火鍋，菜都齊了，就差點(diǎn)海鮮，你來的時(shí)候帶點(diǎn)。接著打電話找朋友小B，過來我這打火鍋，有海鮮，肉少了點(diǎn)，你來的時(shí)候帶點(diǎn)。在接著打電話找朋友小C:過來我這打火鍋，啥菜都有了，差點(diǎn)酒，你來的時(shí)候整幾瓶。還差一包火鍋底料，拿手機(jī)打電話，小D啊，來打活個(gè)，咋幾個(gè)都在，我這電爐不太行了，啥都準(zhǔn)備好了，你把電爐帶過來，順便帶包底料。

吃火鍋這個(gè)事就成了，美滋滋。

但這個(gè)事吧。總不會(huì)一直順利，總有人來不了對吧，來不了這火鍋就吃不成了。

其實(shí)多個(gè)表單驗(yàn)證，就和這差不多，每個(gè)表單都詢問一遍，如果大家都通過了，美滋滋，假如其中一個(gè)驗(yàn)證失敗，那對不起，還得告訴用戶，填對了再說。

通過Promise，對每個(gè)表單執(zhí)行詢問檢測，無論結(jié)果如果，先進(jìn)入Promise.all中，等待所有表單詢問完畢，如果大家就可以，就觸發(fā)then，美滋滋。反之，catch中執(zhí)行失敗響應(yīng)就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('驗(yàn)證不對'))
            }
          })
        })
      }
      Promise.all(formName.map(item => validates(item))).then(() => {
        console.log('成功')
      }).catch(() => {
        console.log('失敗')
      })
    }
  }

最后，在這里貼上完整代碼：

  <div class="home">
    <el-form :model="tableForm1" ref="tableForm1" :rules="rules1" label-width="100px" >
      <el-form-item label="價(jià)格" 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="年齡" 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="姓名" prop="name">
        <el-input v-model.number="tableForm3.name" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>

    <el-button type="primary" @click="submitForm">提交</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: '價(jià)格不能為空', trigger: 'blur' }]
      },
      rules2: {
        age: [{ required: true, message: '年齡不能為空', trigger: 'blur' }]
      },
      rules3: {
        name: [{ required: true, message: '姓名不能為空', 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('驗(yàn)證不對'))
            }
          })
        })
      }
      Promise.all(formName.map(item => validates(item))).then(() => {
        console.log('成功')
      }).catch(() => {
        console.log('失敗')
      })
    }
  }
}
</script>

到此這篇關(guān)于element多個(gè)表單校驗(yàn)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)element 表單校驗(yàn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: