快捷導(dǎo)航

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

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

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

在ant design框架開(kāi)發(fā)的項(xiàng)目中，使用 FormModel 實(shí)現(xiàn)表單功能。在對(duì)表單進(jìn)行校驗(yàn)時(shí)，只需要通過(guò) rules 屬性傳入約定的驗(yàn)證規(guī)則，并將 FormItem 的 prop 屬性設(shè)置為需校驗(yàn)的字段名即可。

更多配置詳見(jiàn)：https://1x.antdv.com/components/form-model-cn/

validate 會(huì)對(duì)整個(gè)表單進(jìn)行校驗(yàn)，只要綁定了 prop 屬性的表單項(xiàng) ，都會(huì)被校驗(yàn)。validateField 可以只對(duì)表單中的部分字段進(jìn)行校驗(yàn)。

代碼示例：

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="請(qǐng)輸入手機(jī)號(hào)" :maxLength="50" />
	</a-form-model-item>

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

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

	<a-form-model-item prop="confirmPassword">
		<a-input-password v-model="form.confirmPassword" size="large" placeholder="請(qǐng)確認(rèn)密碼" :maxLength="50" />
	</a-form-model-item>
</a-form-model>

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

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

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

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

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

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

// 再次輸入密碼校驗(yàn)
confirmPasswordCheck(rule, value, callback) {
  let { password } = this.form
  if (!value) {
    callback('請(qǐng)?jiān)俅屋斎朊艽a')
  }
  if (password) {
    if (password === value) {
      callback()
    } else {
      callback('兩次輸入密碼不一致，請(qǐng)重新輸入')
    }
  } else {
    callback('請(qǐng)先輸入密碼')
  }
},

參數(shù)校驗(yàn)

使用 validate 對(duì)整個(gè)表單進(jìn)行校驗(yàn)，回調(diào)函數(shù)返回值valid 為true時(shí)代表校驗(yàn)通過(guò)，false代表校驗(yàn)不通過(guò)。

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

使用 validateField 對(duì)某個(gè)表單項(xiàng)進(jìn)行校驗(yàn)，當(dāng)回調(diào)函數(shù)返回值valid 為空（‘’）時(shí)，表示校驗(yàn)通過(guò)，不為空時(shí)表示校驗(yàn)不通過(guò)。

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

使用 validateField 對(duì)多個(gè)表單項(xiàng)進(jìn)行校驗(yàn)

注意：表單項(xiàng)有幾個(gè)，回調(diào)函數(shù)就會(huì)執(zhí)行幾次，執(zhí)行順序?yàn)閿?shù)組書(shū)寫(xiě)順序，每次返回對(duì)應(yīng)表單項(xiàng)的校驗(yàn)結(jié)果。這樣會(huì)導(dǎo)致校驗(yàn)通過(guò)后的邏輯執(zhí)行多次。有兩種解決方案：

1、新建數(shù)組arr，回調(diào)函數(shù)每次執(zhí)行時(shí)，將結(jié)果push到arr中。在回調(diào)函數(shù)中對(duì)添加判斷邏輯，當(dāng)數(shù)組長(zhǎng)度與表單項(xiàng)相等，并且數(shù)組的每一項(xiàng)值都為空（‘’）時(shí)，代表校驗(yàn)通過(guò)

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

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

  // 校驗(yàn)不通過(guò)邏輯
  return
})

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

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

  // 校驗(yàn)成功后邏輯

})

附：element 中表單 validateField方法部分校驗(yàn)遇到的坑

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

總結(jié)

到此這篇關(guān)于Vue表單校驗(yàn)validate和validateField的使用及區(qū)別的文章就介紹到這了,更多相關(guān)表單校驗(yàn)validate和validateField使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: