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

发布于 2022-09-12 23:06:53 字数 4417 浏览 13 评论 0

如题
场景:该表单有两个<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>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

安静被遗忘 2022-09-19 23:06:53

https://github.com/ant-design...
使用setTimeout就可以解决catch(error)的问题,虽然我还是不明白为什么,但是它确实奏效了!!!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文