ant-design-vue validate校验本应该是通过的,但是控制台报错catch到的errorFiled为空

如题
场景:该表单有两个<a-radio-group>一个input,一个提交按钮
因业务需要,两个单选选择后要发起一个查询,所以我在两个a-radio-group又加了个@change监听事件用来判断当两个<a-radio-group>的值不为空则发起请求查询。
点击submit的可以正常校验通过,执行提交,
通过change校验的两个条件都不为空,但是控制台还是catch到了错误,一直无法发起查询。是我哪里用法用错了吗?

image.png

  <a-form
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
              :scroll-to-first-error="true"
              name="form"
            >
              <a-form-item v-bind="validateInfos.radio1" label="条件1">
                <a-radio-group
                  name="radioGroup"
                  v-model:value=“radio1"
                  @change="onRadioChange()"
                >
               
                <a-radio value="001">ceshi1</a-radio>
                <a-radio value="002">ceshi2</a-radio>
                <a-radio value="003">ceshi3</a-radio>

                </a-radio-group>
              </a-form-item>

              <a-form-item v-bind="validateInfos.radio2" label="条件2">
                <a-radio-group
                  name="radioGroup2"
                  v-model:value="radio2"
                  @change="onRadioChange()"
                >
                  <a-radio value="1">1</a-radio>
                  <a-radio value="2">2</a-radio>
                
                </a-radio-group>
              </a-form-item>
            
              <a-form-item label="查询结果">
                <a-row>
                  <a-col span="14">
                    <span class="none_text">暂无信息</span>
                    <span class="enough">充足</span>
                    <span class="full">已满</span>
                  </a-col>
                  <a-col span="10" align="right" v-if="isAllowSignBtn">
                    <a-button
                      class="submit"
                      type="primary"
                      @click="onSubmit"
                      >提交</a-button
                    >
                  </a-col>
                </a-row>
              </a-form-item>
              <!-- 图形验证码 -->
              <a-form-item
                label="图形验证码"
                v-bind="validateInfos.ImgCode"
              >
                <a-row>
                  <a-col :lg="8" :md="10" :sm="12"
                    ><a-input
                      v-model:value="ImgCode"
                      placeholder="请输入图形验证码"
                  /></a-col>
                  <a-col :lg="4" :md="5" :sm="6" style="top: -1px"
                    ><img
                      class="img_code"
                      v-bind:src="ImgSrc"
                      @click="onRefreshImg()"
                  /></a-col>
                </a-row>
              </a-form-item>
              <!-- /图形验证码 -->
            </a-form>
            
            
   <script>
     // 校验规则
    const rulesRef = reactive({
      radio1: [
        {
          required: true,
          validator:async (rule, value) => {
    if (value === "") {
      return Promise.reject("条件1不能为空");
    } 
    else  {
      return Promise.resolve();
    }
  },
          trigger: "change",
          whitespace: true,
        },
      ],
      subId: [
        {
          required: true,
          validator:async (rule, value) => {
    if (value === "") {
      return Promise.reject("条件2不能为空");
    } 
    else  {
      return Promise.resolve();
    }
  },
          trigger: "change",
          whitespace: true,
        },
      ],
      ImgCode: [
        {
          required: true,
          validator: validateRule.validateImgCode,
          trigger: "change",
        },
      ]

    });

    const onSchoolIdChange = () => {
      validate(['radio1', 'radio2']).then(() => {
        console.log('校验通过,是否发起了查询');
     
      }).catch((error) =>{
      //控制台输出此信息,为什么??
        console.log('onRadioChange error',error);
      })
    }
    
   const onSubmit = () => {
   console.log('点击了提交')
    validate().then(() => {
        console.log('radio1,radio2,ImgCode校验通过')
    }).catch((error) => {
        console.log('error',error);
    })
   }
   <script>
阅读 5.6k
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题