Vue表單校驗validate和validateField的使用及區(qū)別詳解

更新時間：2024年04月12日 08:42:17 作者：天邊月_

validateField?和?validate?都可以用于表單驗證,但是它們的作用有所不同,下面這篇文章主要給大家介紹了關于Vue表單校驗validate和validateField的使用及區(qū)別的相關資料,需要的朋友可以參考下

代碼示例：

template 表單渲染

<a-form-model ref="Form" :model="form" :rules="rules">
	<a-form-model-item prop="mobile">
		<a-input v-model="form.mobile" size="large" placeholder="請輸入手機號" :maxLength="50" />
	</a-form-model-item>

	<a-form-model-item prop="verificationCode" class="other">
		<a-input v-model="form.verificationCode" size="large" placeholder="請輸入驗證碼" :maxLength="6" />
		<a-button size="large" :disabled="state.smsSendBtn || !form.mobile" @click="getCode">
			{{ state.smsSendBtn ? '已發(fā)送(' + state.time + ')' : '獲取驗證碼' }}
		</a-button>
	</a-form-model-item>

	<a-form-model-item prop="password">
		<a-input-password v-model="form.password" size="large" placeholder="請輸入密碼" :maxLength="50" />
	</a-form-model-item>

	<a-form-model-item prop="confirmPassword">
		<a-input-password v-model="form.confirmPassword" size="large" placeholder="請確認密碼" :maxLength="50" />
	</a-form-model-item>
</a-form-model>

表單參數(shù)校驗規(guī)則

rules: {
	mobile: [{ required: true, validator: this.mobileCheck.bind(this), trigger: ['blur'] }],
	verificationCode: [{ required: true, message: '請輸驗證碼', trigger: ['blur'] }],
	password: [{ required: true, validator: this.passwordCheck.bind(this), trigger: ['blur'] }],
	confirmPassword: [{ required: true, validator: this.confirmPasswordCheck.bind(this), trigger: ['blur'] }]
}

// 手機號校驗
mobileCheck(rule, value, callback) {
  const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
  if (!value) {
    callback('請輸入手機號碼')
    return
  }
  if (!reg.test(value.replace(/(^\s*)|(\s*$)/g, ""))) {
    callback('請輸入正確手機號碼')
    return
  }
  callback()
}

// 密碼校驗
passwordCheck(rule, value, callback) {
  const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/
  if (!value) {
    callback('請輸入密碼')
    return
  }

  if (this.form.confirmPassword) {
    this.$refs.Form.validateField(['confirmPassword'])
  }

  if (!reg.test(value)) {
    callback('密碼必須為8-20位，由數(shù)字和大小寫字母組成')
    return
  }
  callback()
}

// 再次輸入密碼校驗
confirmPasswordCheck(rule, value, callback) {
  let { password } = this.form
  if (!value) {
    callback('請再次輸入密碼')
  }
  if (password) {
    if (password === value) {
      callback()
    } else {
      callback('兩次輸入密碼不一致，請重新輸入')
    }
  } else {
    callback('請先輸入密碼')
  }
},

參數(shù)校驗

使用 validate 對整個表單進行校驗，回調函數(shù)返回值valid 為true時代表校驗通過，false代表校驗不通過。

this.$refs.Form.validate(valid => {
  if (!valid) {
  	// 校驗不通過
  	return
  }
  
  // 校驗通過后邏輯
  ....
})

使用 validateField 對某個表單項進行校驗，當回調函數(shù)返回值valid 為空（‘’）時，表示校驗通過，不為空時表示校驗不通過。

this.$refs.Form.validateField(['mobile'], valid => {
  if (valid) {
  	// 校驗不通過
  	return
  }
  
  // 校驗通過后邏輯
  ....
})

使用 validateField 對多個表單項進行校驗

注意：表單項有幾個，回調函數(shù)就會執(zhí)行幾次，執(zhí)行順序為數(shù)組書寫順序，每次返回對應表單項的校驗結果。這樣會導致校驗通過后的邏輯執(zhí)行多次。有兩種解決方案：

1、新建數(shù)組arr，回調函數(shù)每次執(zhí)行時，將結果push到arr中。在回調函數(shù)中對添加判斷邏輯，當數(shù)組長度與表單項相等，并且數(shù)組的每一項值都為空（‘’）時，代表校驗通過

// 存放每次校驗結果valid
let validateFieldList = []
// 校驗方法
this.$refs.Form.validateField(['mobile', 'captcha'], valid => {
  if (!valid) {
    // 校驗通過后，將valid追加入數(shù)組
    validateFieldList.push(valid)
  }

  // 校驗數(shù)組長度與表單項相等，并且數(shù)組的每一項值都為空（‘'）
  if (validateFieldList.length == 2 && validateFieldList.every(item => item === '')) {
    //校驗通過的業(yè)務邏輯
  }

  // 校驗不通過邏輯
  return
})

2、使用Promise.all()方法，把每個表單項校驗封裝為promise函數(shù)，所有校驗函數(shù)都返回成功后，在執(zhí)行后續(xù)代碼邏輯

// 需要校驗的表單項
let fileids = ['mobile', 'captcha']
// Promise.all 里面參數(shù)為一個數(shù)組，數(shù)組的每一項是一個返回promise 的函數(shù)調用
Promise.all(fileids.map(item => new Promise((resolve, reject) => {
  // 將每次校驗結果返回
  this.$refs.Form.validateField(item, err => resolve(err))
}))).then(res => {
  // then 的第一個參數(shù)是所有promise都成功的調用，返回結果是一個數(shù)組，數(shù)組的每一項為函數(shù)promise 的返回結果
  if (res.filter(item => item).length) return

  // 校驗成功后邏輯

})

附：element 中表單 validateField方法部分校驗遇到的坑

    Step1() {
      this.$refs.dataForm.validateField(this.field, (valid) => {
        if (!valid) {
           // 校驗通過進行的操作
        }
      })
    },    
 
    // 多個字段需要校驗時候 上面寫法一個字段校驗通過即可進入if,并沒有校驗全部字段，改下面寫法：
 
    Step1() {
      const validateList = []   // 定義空數(shù)組
      this.$refs.dataForm.validateField(this.field, (valid) => {
        // this.field  為要校驗的部分rules數(shù)組
        validateList.push(valid)
      })
      if (validateList.every((item) => item === '')) {
        // 判斷全部為空時 進行的操作 
      }
    },