亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

ant-desigin-vue中form表單使用

form表單的使用

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

創(chuàng)建表單

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

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

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

清空表單的方法

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

給表單賦值

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

給表單中添加自定義校驗

  • 現(xiàn)在給表單添加自定義校驗的方式，是從你開始輸入時就在校驗，討厭的警告一直存在，直到你輸入完整才會消失，個人覺得這種方式不太友好！
<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>

推薦使用下面的方式做自定義校驗，當輸入框失去焦點后再去校驗是否正確

這種方法的思路是：

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

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

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

問題：

提價表單時，發(fā)現(xiàn)驗證不通過時正常提醒，但驗證通過后點擊提交又沒反應(yīng)。

最后發(fā)現(xiàn)是因為validateFields函數(shù)沒被執(zhí)行，通過一步步排查原來是字段驗證的部分有問題。

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

上面的代碼中，在字典編號格式驗證通過后，沒有寫else，沒有任何動作，當然也沒有調(diào)用callback 。

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

既然問題找到了，哪就好解決了，接下來加入else判斷即可：

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

正好我的同事也遇到了相似的問題，我想著小露一手的時候到了。不出意外的話...意外就出現(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('手機號已存在!')
            }
          })
        } else {
          callback('請輸入正確格式的手機號碼!')
        }
      }
    }

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

總結(jié)：

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

表單驗證 async-validator: ['xxx is not a string']

問題：

在方法校驗的時候，會有一部分非 String 類型表單項提示校驗未通過，console中顯示 async-validator: ["xxx is not a string"]。

解決：

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

總結(jié)

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

相關(guān)文章

最新評論