前置-先来看看下面预期效果是什么

  • 当我们点击提交表单的时候,下面的输出结果是什么?红色*代表必填字段

  • 很明显你可能会角色在**测试这一行当中会提示信息,**但是却不会

问题原因及解决

  • 在使用ant - design vue的表单验证的时候,如果不填写name属性,那么最后校验的时候是不会进行校验的
1
2
3
4
5
6
<!--不进行校验,缺少name-->
<a-form-item label="测试"  :rules="[{ required: true, message: '测试不能为空', whitespace: true },]">
    <div style="position: relative;display: inline-block">
        <a-input v-model:value="dataForm.name" :maxlength="20" style="width: 500px;" placeholder="请输入" />
     </div>
</a-form-item>
  • 所以老老实实加上name属性吧
1
2
3
4
5
6
<!--加上name就会校验了-->
<a-form-item label="测试" name="name" :rules="[{ required: true, message: '测试不能为空', whitespace: true },]">
    <div style="position: relative;display: inline-block">
        <a-input v-model:value="dataForm.name" :maxlength="20" style="width: 500px;" placeholder="请输入" />
     </div>
</a-form-item>

值得一提

  • 有时候我们使用了自定义规则校验,无论是trigger:change还是trigger:blur,但数据更新后,都无法将警告提示进行自动更改

  • 从而如果有警告提示信息,尽管用户在之后输入了新值,也依旧会有报错,那么要怎么解决呢?

    • 很简单<a-form-item></a-form-item>添加ref,调用ref当中的clearValidate即可

  • 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
  <a-form-item ref="groupChat" label="选择群聊" name="chatId" :rules="[{required:true,trigger:'change',validator:validatorChatGroup}]">
              <SelectChatGroup :corpId="$route.query?.corpId ?? null" v-model="dataForm.chatId.chatIds" />
              <SelectedChatGroupList v-if=" dataForm.chatId.chatIds.length" v-model="dataForm.chatId.chatIds"/>
</a-form-item>

//对自定义属性进行监视,当有值的时候就调用里面的方法进行清除提示
watch:{
    'dataForm.chatId.chatIds':{
        handler(){
            this.$refs.groupChat.clearValidate();
        },
    }
},