公司的新項(xiàng)目是用vue3.0+ant design vue去寫的，但是最近發(fā)現(xiàn)表單校驗(yàn)時(shí)有些表單內(nèi)的元素沒法校驗(yàn)。

<a-row :gutter="16">
    <a-col :span="12">
        <a-form-item name="group">
            <label class="form-label">Group</label>
            <a-select v-model:value="formState.group" placeholder="select group">
                <a-select-option v-for="item in groupList" :value="item.group_id" :key="item.group_id">
                    {{ item.name }}
                </a-select-option>
            </a-select>
        </a-form-item>
    </a-col>
    <a-col :span="12">
      <!-- 其他內(nèi)容 -->
    </a-col>
</a-row>

代碼里是有添加rule去校驗(yàn)的

const formRef = ref<any>(null)
const formState: UnwrapRef<FormState> = reactive({
    group: undefined,
    role: undefined
 });
const rules = {
    group: [
        {required: true, message: '請選擇用戶組', trigger: 'change'},
    ]
}
return {
 rules,
 formRef 
}

但無論是select組件chang時(shí)還是填滿表單再提交，都是校驗(yàn)不通過，表單提示表單項(xiàng)信息未填。
然后注意到官方文檔有這么 一段內(nèi)容

注意：
Form.Item 會對唯一子元素進(jìn)行劫持，并監(jiān)聽 blur 和 change 事件，來達(dá)到自動校驗(yàn)的目的，所以請確保表單域沒有其它元素包裹。如果有多個(gè)子元素，將只會監(jiān)聽第一個(gè)子元素的變化。
官方給出的解決示例如下

<a-form-item name="form.name" ref="name" :autoLink="false">
  <a-input v-model:value="other" />
  <span>hahha</span>
  <div>
    <a-input
      v-model:value="form.name"
      @blur="() => {$refs.name.onFieldBlur()}"
      @change="() => {$refs.name.onFieldChange()}"
    />
  </div>
</a-form-item>

照搬到項(xiàng)目里，控制臺打印出報(bào)錯(cuò)信息，提示該ref并沒有此方法
懵住了...最后參照文章
但與文章不同的是，我沒有validateField方法，細(xì)看打印出refs的內(nèi)容，發(fā)現(xiàn)他有validateFields這樣一個(gè)方法

console.log

于是替換過來，發(fā)現(xiàn)問題解決，代碼如下

<a-row :gutter="16">
    <a-col :span="12">
        <a-form-item name="group">
            <label class="form-label">Group</label>
            <a-select v-model:value="formState.group" placeholder="select group">
                <a-select-option v-for="item in groupList" :value="item.group_id" :key="item.group_id">
                    {{ item.name }}
                </a-select-option>
            </a-select>
        </a-form-item>
    </a-col>
</a-row>

const formRef = ref<any>(null)
const formState: UnwrapRef<FormState> = reactive({
    group: undefined
 });
const rules = {
    group: [
        {required: true, message: '請選擇用戶組', trigger: 'change'},
    ]
}
const codeverif = (item:string) => {
    console.log(unref(formRef))
    unref(formRef).validateFields(item)
}
return {
 rules,
 formRef 
}

但是，天啊怎么還有但是...
提交表單時(shí)又出現(xiàn)了新問題,控制臺報(bào)錯(cuò)信息如下

console.log

按照字面意思去理解，就是跟表單輸入的type有關(guān)，那就把校驗(yàn)規(guī)則里的type字段給補(bǔ)上（但很奇怪，type明明不是必選的）

const rules = {
    group: [
        {required: true,type: number, message: '請選擇用戶組', trigger: 'change'},
    ]
}

最后，表單終于能正常校驗(yàn)了，不報(bào)錯(cuò)了