ant-design-vue validate校验本应该是通过的,但是控制台报错catch到的errorFiled为空
如题
场景:该表单有两个<a-radio-group>一个input,一个提交按钮
因业务需要,两个单选选择后要发起一个查询,所以我在两个a-radio-group又加了个@change监听事件用来判断当两个<a-radio-group>的值不为空则发起请求查询。
点击submit的可以正常校验通过,执行提交,
通过change校验的两个条件都不为空,但是控制台还是catch到了错误,一直无法发起查询。是我哪里用法用错了吗?
<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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
https://github.com/ant-design...
使用setTimeout就可以解决catch(error)的问题,虽然我还是不明白为什么,但是它确实奏效了!!!