antd-for-vue 表单验证失效 自定义表单验证使表单非空验证失效(其他验证失效)
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll里面可以接收校验字段数组, options, 和一个回调函数
- 错误代码
organizationId: {rules: [ {required: true, message: '请输入团支部!'}, { validator: tpMemberCount ,trigger: 'change'}, ], }, //导致失效的地方 //具体验证方法 let tpMemberCount = (rule, value, callback) => { console.log(value) try { getAction("/tp/tpOrganization/queryById", {id: value}).then((res) => { if (res.success) { let MemberCount = res.result.tyNumber console.log(MemberCount) callback(); if (MemberCount < 1) { callback(new Error('该支部下无团员,请重新选择。')); } } else { this.$message.warning("未查询到[" + res.result.orgName + "]组织人数,请手动填入"); callback(); } }); } catch (err){ callback(); } };
当不设置自定义校验方法时 其他校验均有效
- 修改子自定义的校验方法
- 解决过程代码
-
let tpMemberCount = (rule, value, callback) => { console.log(1) getAction("/tp/tpOrganization/queryById", {id: value}).then((res) => { if (res.success) { let MemberCount = res.result.tyNumber if (MemberCount < 1) { callback(new Error('该支部下无团员,请重新选择。')); console.log(2) }else { callback() } // if (value == undefined && value == null && value == ''){ // callback(new Error('请选择请团支部')); // console.log(3) // } } else { this.$message.warning("未查询到[" + res.result.orgName + "]组织人数,请手动填入"); callback(); console.log(4) } }); callback() console.log(5) };
结论在自定义的验证的方法中出现了问题
-
修改后正确代码
let tpMemberCount = (rule, value, callback) => { getAction("/tp/tpOrganization/queryById", {id: value}).then((res) => { if (res.success) { let MemberCount = res.result.tyNumber if (MemberCount < 1) { callback(new Error('该支部下无团员,请重新选择。')); }else { callback() } } else { this.$message.warning("未查询到[" + res.result.orgName + "]组织人数,请手动填入"); callback(); } }); };