欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ant-desigin-vue中form表單的使用解讀

 更新時(shí)間：2023年07月03日 10:04:21   作者：別樣紅。  
這篇文章主要介紹了ant-desigin-vue中form表單的使用解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

ant-desigin-vue中form表單使用

form表單的使用

form表單之獲取表單的數(shù)據(jù)

創(chuàng)建表單

  • 通過(guò)ant-design-vue去獲取表單的數(shù)據(jù)是使用v-decorator的方式去給每個(gè)項(xiàng)去注冊(cè)，這樣才能通過(guò)組件去拉取表單的數(shù)據(jù)，同時(shí)對(duì)必填項(xiàng)做校驗(yàn)；
<template>
? <a-form @submit="handleOk" :form="form">
? ? // :form="form" 必須優(yōu)先注冊(cè)
? ? <!-- 客戶姓名 -->
? ? <a-form-item
? ? ? ? :labelCol="labelCol" // 排列樣式
? ? ? ? :wrapperCol="wrapperCol"
? ? ? ? label='客戶姓名：'
? ? ? >
? ? ? <a-input
? ? ? ? v-decorator="[
? ? ? ? ? 'name', // 給表單賦值或拉取表單時(shí)，該input對(duì)應(yīng)的key
? ? ? ? ? {rules: [{ required: true, message: '請(qǐng)輸入客戶名稱!' }]}
? ? ? ? ]"
? ? ? ? placeholder="請(qǐng)輸入客戶名稱"/>
? ? </a-form-item>
? </a-form>
</template>
export default {
? data() {
? ? return {
? ? ? form: this.$form.createForm(this), // 只有這樣注冊(cè)后，才能通過(guò)表單拉取數(shù)據(jù)
? ? }
? }
}

拉取表單數(shù)據(jù)的方法

  • 通過(guò)validateFields的方法，能夠校驗(yàn)必填項(xiàng)是否有值，若無(wú)，則頁(yè)面會(huì)給出警告！
this.form.validateFields((err, values) => {
? if (err) {
? ? // 這里做邏輯處理
? ? console.log(values) // { name: '' }
? }
}

清空表單的方法

  • 執(zhí)行this.form.resetFields()，則會(huì)將表單清空。

給表單賦值

  • 值得一提的是，setFieldsValue只有通過(guò)這種方式給表單賦值，拉取表單的時(shí)候才能拉取到值，其他設(shè)置默認(rèn)值的方式，拉取表單時(shí)都無(wú)法獲取到默認(rèn)值。
?this.form.setFieldsValue({
? ?name: '設(shè)置值'
?})

給表單中添加自定義校驗(yàn)

  • 現(xiàn)在給表單添加自定義校驗(yàn)的方式，是從你開(kāi)始輸入時(shí)就在校驗(yàn)，討厭的警告一直存在，直到你輸入完整才會(huì)消失，個(gè)人覺(jué)得這種方式不太友好！
<a-form-item
? v-bind="formItemLayout"
? label="E-mail"
>
? <a-input
? ? v-decorator="[
? ? ? 'email',
? ? ? {
? ? ? ? rules: [{
? ? ? ? ? type: 'email', message: 'The input is not valid E-mail!',
? ? ? ? }, {
? ? ? ? ? required: true, message: 'Please input your E-mail!',
? ? ? ? }]
? ? ? }
? ? ]"
? />
</a-form-item>

推薦使用下面的方式做自定義校驗(yàn)，當(dāng)輸入框失去焦點(diǎn)后再去校驗(yàn)是否正確

這種方法的思路是：

  • 當(dāng)輸入框失去焦點(diǎn)時(shí)，校驗(yàn)是否為空同時(shí)是否匹配正則
  • 給該單個(gè)輸入框設(shè)置錯(cuò)誤信息，并在頁(yè)面給出警告。
<a-form-item
? :labelCol="labelCol"
? :wrapperCol="wrapperCol"
? label='手機(jī)：'
>
<a-input
? type="number"
? v-decorator="[
? ? 'phone',
? ? {
? ? ? rules: [
? ? ? ? { required: false, message: '請(qǐng)輸入手機(jī)號(hào)碼!' },]
? ? },
? ]"
? @blur="validatePhoneBlur"
? placeholder='請(qǐng)輸入手機(jī)號(hào)碼' />
</a-form-item>
// 校驗(yàn)事件
validatePhoneBlur(e) {
? const validatePhoneReg = /^1\d{10}$/
? if (e.target.value && !validatePhoneReg.test(e.target.value)) {
? ? const arr = [{
? ? ? message: '您輸入的手機(jī)格式不正確!',
? ? ? field: 'phone',
? ? }]
? ? this.form.setFields({ phone: { value: e.target.value, errors: arr } })
? }
},

使用ant-desigin-vue中form表單遇到的坑

form.validateFields() 不執(zhí)行

問(wèn)題：

提價(jià)表單時(shí)，發(fā)現(xiàn)驗(yàn)證不通過(guò)時(shí)正常提醒，但驗(yàn)證通過(guò)后點(diǎn)擊提交又沒(méi)反應(yīng)。

最后發(fā)現(xiàn)是因?yàn)関alidateFields函數(shù)沒(méi)被執(zhí)行，通過(guò)一步步排查原來(lái)是字段驗(yàn)證的部分有問(wèn)題。

const validateCode = (rule, value, callback) => {
	if (value == '') {
		callback(new Error('請(qǐng)輸入字典編號(hào)'));
	} 
    else if(!/^[A-z0-9-_]+$/.test(value)){
		callback(new Error('請(qǐng)輸入正確格式編號(hào)'));
	}
	else if(value.length>32){
		callback(new Error('最大長(zhǎng)度為 32 個(gè)字符'));
	}
};

上面的代碼中，在字典編號(hào)格式驗(yàn)證通過(guò)后，沒(méi)有寫else，沒(méi)有任何動(dòng)作，當(dāng)然也沒(méi)有調(diào)用callback 。

可是在 antd 中明確寫到自定義校驗(yàn)（注意，callback 必須被調(diào)用） ，所以造成了悲劇。

既然問(wèn)題找到了，哪就好解決了，接下來(lái)加入else判斷即可：

const validateCode = (rule, value, callback) => {
  if (value == '') {
    callback(new Error('請(qǐng)輸入字典編號(hào)'));
  } 
  else if(!/^[A-z0-9-_]+$/.test(value)){
    callback(new Error('請(qǐng)輸入正確格式編號(hào)'));
  }
  else if(value.length>32){
    callback(new Error('最大長(zhǎng)度為 32 個(gè)字符'));
  }
  else{
    callback()
  }
};

正好我的同事也遇到了相似的問(wèn)題，我想著小露一手的時(shí)候到了。不出意外的話...意外就出現(xiàn)了。

先看一下代碼：

validatePhone(rule, value, callback) {
      if (!value) {
        callback()
      } else {
        if (new RegExp(/^1[3|4|5|7|8][0-9]\d{8}$/).test(value)) {
          var params = {
            tableName: 'sys_user',
            fieldName: 'phone',
            fieldVal: value,
            dataId: this.userId
          }
          duplicateCheck(params).then(res => {
            if (res.success) {
              callback()
            } else {
              callback('手機(jī)號(hào)已存在!')
            }
          })
        } else {
          callback('請(qǐng)輸入正確格式的手機(jī)號(hào)碼!')
        }
      }
    }

咋一看沒(méi)問(wèn)題吧，每一個(gè)判斷下都有回調(diào)函數(shù)callback。離譜的是最后找了個(gè)把小時(shí)才發(fā)現(xiàn)原來(lái)是if判斷里有一個(gè)請(qǐng)求API（duplicateCheck）沒(méi)有引入，關(guān)鍵是還沒(méi)有任何報(bào)錯(cuò)提示。

總結(jié)：

  • 檢查每一個(gè)判斷里是否調(diào)用了callback函數(shù)
  • 如果判斷里發(fā)送了請(qǐng)求，一定記得提前引入API

表單驗(yàn)證 async-validator: ['xxx is not a string']

問(wèn)題：

在方法校驗(yàn)的時(shí)候，會(huì)有一部分非 String 類型表單項(xiàng)提示校驗(yàn)未通過(guò)，console中顯示 async-validator: ["xxx is not a string"]。

解決：

  • 去掉 :rules 規(guī)則中的 trigger 屬性即可；
  • 如果是驗(yàn)證數(shù)字格式的，就設(shè)為type: 'number’。如：
Money: { rules: [{ required: true, type: 'number', message: '請(qǐng)輸入金額！', trigger: 'change' }] },

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論