1/??背景

1、表單校驗(yàn)是非常常見(jiàn)的需求，能夠有效的攔截大部分的錯(cuò)誤數(shù)據(jù)，提升效率。
2、快速的給使用者提示和反饋，用戶體驗(yàn)感非常好。
3、成熟的表單校驗(yàn)框架，開(kāi)發(fā)效率高，bug少。

最近使用的是vue3+antdv的架子，仔細(xì)探究一下表單校驗(yàn)的問(wèn)題，總結(jié)一下。

框架可能不同，主要看核心問(wèn)題，如果有幫助，歡迎一鍵三連。【春花秋時(shí)知多少】

2/??規(guī)則配置

首先查看官網(wǎng)的 模版，

構(gòu)建了一個(gè)表單，大概意思是直接寫(xiě)rules就可以使用了，我的目標(biāo)是這個(gè)字段需要長(zhǎng)度限制，

第一個(gè)常見(jiàn)錯(cuò)誤，rules的位置錯(cuò)誤，直接在item里面加了rule（或者rules ），都是無(wú)效的，需要加在表單上。

（注：antd文檔是在表單項(xiàng)里面配置rules的，一般會(huì)對(duì)比兩個(gè)組件的文檔，有時(shí)候真的有用?。?！）

 	...
      <a-form-item label="Activity name" name="name" :rules="[{ required: true, message: 'Please input your username!' }]">
        	<a-input v-model:value="formState.name" />
      </a-form-item>
</a-form>

上面的寫(xiě)法就是無(wú)效的，必須要放在 a-form,也就是表格上面，不能放在表單項(xiàng)上面。

    <a-form
	...
      :rules="rules"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
    ...
 </a-form>

對(duì)應(yīng)rules綁定位置,使用:rules 綁定對(duì)象

那它如何區(qū)分是哪個(gè)字段的校驗(yàn)規(guī)則呢？

rules是一個(gè)對(duì)象，對(duì)象的屬性名對(duì)應(yīng)字段的name名即可(類似map的key)，通過(guò)key去找規(guī)則。

而且對(duì)象的值是一個(gè)對(duì)象數(shù)組，可以創(chuàng)建多個(gè)規(guī)則疊加,不用所有規(guī)則寫(xiě)到一個(gè)對(duì)象里面。

const rules = {
  name: [
    {
      required: true,
      message: "ass",
    },
  ],
    passwd: [
    {
      min: 5,
      message: "need",
    },
  ],
};

3/?? 規(guī)則編寫(xiě)

這個(gè)官方只給的例子，不是很清楚，但是它說(shuō)本質(zhì)上是使用的 async-validator

然后看了下，大概有這幾個(gè)點(diǎn)需要注意，基本就能完成大部分的規(guī)則校驗(yàn)。

1、類型判斷，比如校驗(yàn)值必須是數(shù)字，用這個(gè)就可以快速限定類型。支持的類型如下

string
number
boolean
method
regexp RegExp
integer
float
array
object
enum
date
url
hex
email
any

還支持正則，對(duì)于對(duì)象和數(shù)組，還可以進(jìn)一步處理，非常方便。

對(duì)象可以使用 fields 來(lái)限定屬性

const descriptor = {
  address: {
    type: 'object',
    required: true,
    options: { first: true },
    fields: {
      street: { type: 'string', required: true },
      city: { type: 'string', required: true },
      zip: { type: 'string', required: true, len: 8, message: 'invalid zip' },
    },
  },
};

數(shù)組 可以使用下標(biāo)位置來(lái)限定

const descriptor = {
  roles: {
    type: 'array',
    required: true,
    len: 3,
    fields: {
      0: { type: 'string', required: true },
      1: { type: 'string', required: true },
      2: { type: 'string', required: true },
    },
  },
};

數(shù)組還可以使用統(tǒng)一的defaultField 來(lái)處理每一個(gè)

const descriptor = {
  urls: {
    type: 'array',
    required: true,
    defaultField: { type: 'url' },
  },
};

2、trigger 指定校驗(yàn)時(shí)機(jī)

文檔上只支持 change(改變) 和 blur(聚焦)，就是輸入的時(shí)候，和失去焦點(diǎn)的時(shí)候，比如提交的時(shí)候，根據(jù)需求選擇即可。

經(jīng)測(cè)試，默認(rèn)不處理 是 trigger: 'change'，輸入校驗(yàn)

可以使用數(shù)組，來(lái)同時(shí)滿足多個(gè) trigger: ['blur', 'change'],

單個(gè) trigger: 'blur'

4/?? 校驗(yàn)邏輯錯(cuò)誤，值為undifined.

本來(lái)都寫(xiě)好了，發(fā)現(xiàn)出現(xiàn)的邏輯不對(duì)，最簡(jiǎn)單的例子都實(shí)現(xiàn)不了。

const rules = {
  name: [
    {
      required: true,
      message: "must need",
    },
    {
      min: 5,
      message: "least 5.",
    },
  ],
};

針對(duì)同一個(gè)字段，兩條規(guī)則:
第一個(gè)規(guī)則：必填，如果沒(méi)填就提示第一個(gè)，
第二個(gè)規(guī)則: 至少5位。

結(jié)果只有第一個(gè)提示，而且一直提示，不會(huì)消失。

我甚至是懷疑是只有配置了required: true, 才能正常使用，顯然不是，這個(gè)表示的是不能為空。即使算輸入合法的也會(huì)提示，根本沒(méi)有校驗(yàn)邏輯。

后面查了半天，還需要配置一個(gè) :model="formState",即需要傳遞表單對(duì)象過(guò)去，校驗(yàn)表單項(xiàng)的值從這里面取，應(yīng)該是而不能直接獲取表單項(xiàng)的值。這個(gè) :model 就是需要把表單對(duì)象傳遞過(guò)去。

  
    <a-form
      :model="formState"
      :name="state.formConfig.name"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 8 }"
      :autocomplete="state.formConfig.autocomplete"
      :rules="rules"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
  
        <a-input v-model:value="item.value" />{{ item.value }}
      </a-form-item> -->

      <a-form-item label="Activity name" name="name">
        <a-input v-model:value="formState.name" />
      </a-form-item>
    </a-form>
...
const formState = reactive({
  name: "",
  region: undefined,
  date1: undefined,
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

const rules = {
  name: [
    {
      required: true,
      message: "must need",
    },
    {
      min: 5,
      message: "least 5.",
      // trigger: ["change", "blur"],
      // validator: checkeNickName,
    },
  ],
};

這個(gè)問(wèn)題困擾了我半天，寫(xiě)出來(lái)，希望能幫到大家。

自定義校驗(yàn)器

這個(gè)很簡(jiǎn)單，直接寫(xiě)一個(gè)自定義校驗(yàn)方法就行了。

然后校驗(yàn)規(guī)則里面指定自己的校驗(yàn)方法， validator: checkeNickName, 即可

(注：就是用這個(gè)方法，然后debug出上面的mode未設(shè)置的問(wèn)題，自定義方法里面的value一直是undifine,-。-)

const checkeNickName = function (rule, value, callback) {
  console.log(rule, value, callback);
  if (value) {
    if (value.length > 5) {
      return Promise.reject("用戶昵稱長(zhǎng)度應(yīng)小于5個(gè)字符");
    } else {
      return Promise.resolve();
    }
  } else {
    return Promise.reject("請(qǐng)輸入用戶昵稱");
  }
};
const rules = {
  name: [
    {
      required: true,
      message: "must need",
    },
    {
      min: 5,
      message: "least 5.",
      validator: checkeNickName,
    },
  ],
};

拿到了值，自己怎么處理就好寫(xiě)了，成功 返回 return Promise.resolve();

失敗返回 return Promise.reject("用戶昵稱長(zhǎng)度應(yīng)小于5個(gè)字符");,里面的參數(shù)是提示信息，可以自定義

??總結(jié)

1、規(guī)則配置位置要正確，大部分問(wèn)題都是配置錯(cuò)誤，盡量搞懂每個(gè)配置的作用
2、本質(zhì)上是對(duì)async-validator 的封裝，可以從源頭查詢問(wèn)題
3、antdv表單校驗(yàn)需要傳遞表單對(duì)象過(guò)去，這個(gè)是特有的規(guī)定，按照要求編寫(xiě)。
4、自定義校驗(yàn)，只需要寫(xiě)自定義校驗(yàn)方法 function (rule, value, callback),然后在rules的對(duì)象里面 使用 validator: checkeNickName, 調(diào)用這個(gè)方法即可文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-665342.html

到了這里，關(guān)于【前端】vue3 接入antdv表單校驗(yàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！