antd form rules字数限制_antd Form rules中使用validator后form.validateFields()不能正常返回...

场景：

表单输入框验证要求：数字、非负数、非0开头、可保留两位小数。

主要在于对非0开头的自定义规则处理上。

代码：

//validator函数规则处理

const keyUpVal = (rule, value, callback) => {

if (value && value.length > 0 && parseInt(value.substr(0, 1)) === 0) {

callback('不能以0开头');

}else{

callback();

};

}

//表单

{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 || '',

})()}

页面：

首先，点击提交时控制台是有验证err提示的,但是表单里并没有报红色错误。

这时 console.log(123) 就是没有打印的。

rule err

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)也是正常执行的。

rule err

input

总结：

1.首先，对于validator也没有太深入的研究，具体逻辑和原理目前还不能很好的解释。但表单的抛错显示与否和form.validateFields是否执行，是有关系的。而且根据结果来看validator应该是有一些异步的处理。

2.不过，在我写博客时，我又尝试写回原来的代码进行了调试，结果竟然也是正常的，有点奇怪的额(真让人头大)。对于这个问题，我在最开始写代码的时候也并没有出现，这是在之后测试使用中发现的。不过这个bug最终还是没有很确定问题出在哪里。

3.虽然，问题算是解决了，但是自己并没有理解透彻，希望知道的大佬告知一下，先记录一下。