解決 el-form 異步校驗導致重復校驗的問題

業(yè)務邏輯

最近項目上有個業(yè)務，確認表單，需要用到手機驗證碼，驗證是否為本人操作。這挺常見的，但是需要用戶填寫完，輸入框失去焦點時就將驗證碼發(fā)送后臺進行驗證，而且驗證碼只能輸一次。

觸發(fā)場景

若用戶輸入完驗證碼后，鼠標焦點并未離開，直接點擊確認的話，因為 validator 異步的關系，鼠標離開焦點觸發(fā)一次校驗，確認也觸發(fā)一次校驗，導致 重復校驗，用戶體驗極差

解決辦法

用watch 動態(tài)監(jiān)聽 form 表單里驗證碼輸入框的值，并進行相應判斷，輸入長度為6時自動觸發(fā)驗證

<template>
	<el-form ref="form" :model="form" :rules="rules" label-width="160px" label-suffix=" :">
		<el-form-item label="手機驗證碼" prop="sms" :rules="{ validator : sms , required : true , trigger : 'blur'}" key="sms">
            	<!-- 驗證碼輸入框 -->
                <el-input v-model="form.sms"  maxlength="6" show-word-limit/>
            	<!-- 發(fā)送驗證碼組件 -->
                <simple-sms  :api="POST_DSP_SEND" />
            </el-form-item>
	</el-form>
</template>

<script>
watch : {
	'form.sms': function (val) { //單個數(shù)據(jù)驗證
  		if(val!= undefined && val.length == 6){
    		this.validateField('sms')
  		}
	}
} ,
methods : {
	//表單單項驗證
    validateField(fieldName) {
      this.$refs.form.validateField(fieldName)
    } ,
    // 驗證碼驗證
    sms(r , v , c) {
      if (!v) {
        return c(new Error('請輸入驗證碼'))
      } else if (this.validPass){  // validPass 字段代表驗證成功
        c()
      }
      if(!this.loading){
        this.loading = true
        http.post(this.POST_DSP_VERIFY, {code: v}).then(() => {
          // 驗證成功
          this.validPass = true
          return c()
        }).catch(() => {
          return c(new Error('請輸入正確驗證碼'))
        }).finally(()=>{
          // 按鈕啟用
          this.loading = false
        })
      }
    },
}
</script>

這里主要是提供一個思路，利用watch去監(jiān)聽form的數(shù)據(jù)來觸發(fā)驗證；也能通過禁用確認按鈕先進行驗證來完成，如果你有更好的辦法，非常歡迎你在評論教教我