技术流

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) 就是没有打印的。

rule err
input

问题:

        form.validateFields((err, values) => {
            console.log(123);
            if (!err) { 
                //values
              }else{
                //err
              }
        }

就是 form.validateFields 不执行,console.log(123)根本没有打印。
我在网上也找了很多类似问题,结果基本都是没有在ifelse里返回callback函数造成导致的。
我的这个写法是有返回,不过结果依然不行。
但是在后面调试中我发现了一个问题。

解决方法:

看了一些博客和回复有说可以使用promiseasync处理,我就试了一下用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)也是正常执行的。

rule err input

总结:

1.首先,对于validator也没有太深入的研究,具体逻辑和原理目前还不能很好的解释。但表单的抛错显示与否和form.validateFields是否执行,是有关系的。而且根据结果来看validator应该是有一些异步的处理。
2.不过,在我写博客时,我又尝试写回原来的代码进行了调试,结果竟然也是正常的,有点奇怪的额(真让人头大)。对于这个问题,我在最开始写代码的时候也并没有出现,这是在之后测试使用中发现的。不过这个bug最终还是没有很确定问题出在哪里。
3.虽然,问题算是解决了,但是自己并没有理解透彻,希望知道的大佬告知一下,先记录一下。

上一篇下一篇

猜你喜欢

热点阅读