Ant Design of Vue表单自定义验证validator_ant design vue validator-CSDN博客

本文链接：https://blog.csdn.net/mrsun_web/article/details/120890226

本文详细讲解了Ant Design Vue中的表单验证，包括rule基本用法、自定义validator实现复杂校验，并通过实例演示如何在data中设置rules和使用checkProgramName验证器确保节目名称唯一性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.表单验证

1.1rule用法

注意：表单必须绑定rules验证规则才能生效

在data中声明rules校验规则，具体规则可以查询文档，这里重点说下自定义校验validator

1.2validator用法

validator验证器，可以对格式进行复杂限制，跟rule一样需要设置对应表单项的prop属性，然后绑定validator，validator绑定验证规则变量（注意验证规则变量是处在data的return外面）。且需要注意的是callback回调函数一定要被调用

<a-modal :width="700" title="添加节目" :visible="addvisible" :confirm-loading="confirmLoading" centered
      @ok="submitForm('dynamicValidateForm')" @cancel="resetForm('dynamicValidateForm')">
      <a-form-model ref="dynamicValidateForm" :model="dynamicValidateForm" v-bind="formItemLayoutWithOutLabel" :rules="rules">
        <a-form-model-item v-bind="layout" label="节目名称" prop="programName">
          <a-input style="width: 60%" v-model="dynamicValidateForm.programName" placeholder="请输入节目名称" />
        </a-form-model-item>
        <a-form-model-item v-bind="layout" label="屏幕数" prop="screenCount">
          <a-input style="width: 60%" v-model="dynamicValidateForm.screenCount" placeholder="请输入显示屏幕数" />
        </a-form-model-item>

</a-modal>

 data () {
    //节目名称校验
    var checkProgramName=(rule, value, callback)=>{
      this.proData.forEach(item=>{
        if(item.programName==value){
          callback(new Error("节目名称已存在,请修改名称后进行添加！"))
        }
      })
      if(value==""){
          callback(new Error("节目名称无效，请修改名称后进行添加！"))
      }
      callback()
    };

1.3整体代码

data () {
    //节目名称校验
    var checkProgramName=(rule, value, callback)=>{
      this.proData.forEach(item=>{
        if(item.programName==value){
          callback(new Error("节目名称已存在,请修改名称后进行添加！"))
        }
      })
      if(value.trim()==""){
          callback(new Error("节目名称无效，请修改名称后进行添加！"))
      }
      callback()
    };
    return {
      //节目名称校验
      rules:{
        programName: [
            { required: true, validator:checkProgramName, trigger: 'blur'},
          ],
      },