antd Form rules中使用validator后form
2020-07-23 本文已影响0人
sssgoEasy
场景:
表单输入框验证要求:数字、非负数、非0开头、可保留两位小数
。
主要在于对非0开头的自定义规则处理上。
代码:
//validator函数规则处理
const keyUpVal = (rule, value, callback) => {
if (value && value.length > 0 && parseInt(value.substr(0, 1)) === 0) {
callback('不能以0开头');
}else{
callback();
};
}
//表单
<FormItem label="月租金:" {...FormWidth}>
{getFieldDecorator('price', {
rules: [
{
required: true,
message: '请输入月租金',
},
{
validator: (rule, value, callback) => keyUpVal(rule, value, callback),
},
{
pattern: new RegExp(/^[0-9]{1,5}([.]{1}[0-9]{1,2})?$/),
message: '小于100000、非负数、保留2位',
},
],
initialValue: item.price || '',
})(<Input allowClear placeholder="请输入月租金,正整数" />)}
</FormItem>
页面:
首先,点击提交时控制台是有验证err提示的,但是表单里并没有报红色错误。
这时 console.log(123)
就是没有打印的。
input
问题:
form.validateFields((err, values) => {
console.log(123);
if (!err) {
//values
}else{
//err
}
}
就是 form.validateFields
不执行,console.log(123)
根本没有打印。
我在网上也找了很多类似问题,结果基本都是没有在if
的else
里返回callback
函数造成导致的。
我的这个写法是有返回,不过结果依然不行。
但是在后面调试中我发现了一个问题。
解决方法:
看了一些博客和回复有说可以使用promise
和async
处理,我就试了一下用promise
。
const keyUpVal = (rule, value, callback) => {
//增加了一层promise,通过resolve和reject进行正常和异常处理
return new Promise((resolve, reject) => {
if (value.length > 0 && parseInt(value.substr(0, 1)) === 0) {//符合异常规则
reject(callback('不能以0开头'));
} else {//正常
resolve(callback());
}
});
};
最终效果是可以了,也有报红提示的,form.validateFields 和 console.log(123)
也是正常执行的。
总结:
1.首先,对于validator
也没有太深入的研究,具体逻辑和原理目前还不能很好的解释。但表单的抛错显示与否和form.validateFields
是否执行,是有关系的。而且根据结果来看validator
应该是有一些异步的处理。
2.不过,在我写博客时,我又尝试写回原来的代码进行了调试,结果竟然也是正常的,有点奇怪的额(真让人头大)。对于这个问题,我在最开始写代码的时候也并没有出现,这是在之后测试使用中发现的。不过这个bug最终还是没有很确定问题出在哪里。
3.虽然,问题算是解决了,但是自己并没有理解透彻,希望知道的大佬告知一下,先记录一下。