html表单设置只是数字,antd form设置只能输入数字

Antd form提供了强大的验证，并且支持自定义验证，到底有多少种方法设置输入框只能输入数字呢？

normalize

normalize:(value)=>newValue;

复制代码

这个方法在表单任何一个表单域发生改变都会调用，不单单是在设置这个函数的表单域变化时调用。

函数接收所在表单项输入数据作为参数，返回值赋值给所在表单域作为最终输入数据:

{getFieldDecorator('number', {

rules: [{

normalize:(value) => {

value = value && value.replace(/[^\d]+/g, '');

return value;

}

}],

})(

)}

复制代码

type

getFieldDecorator方法的验证规则rules下的对象中包含type属性，可选的类型有

string: 必须为字符串，这是默认值，所以我们在提交喝验证表单的时候会发现明明输入的是数字，却变成字符串了。

number: 必须是数字类型。

boolean: 必须是布尔类型。

method: 必须是方法。

regexp: 必须是正则公式或者是可以转化成正则的字符串。

integer: 必须是整数。

float: 必须是浮点类型。

array: 必须是数组。

object: 除了数组外的其他对象。

enum: 必须是枚举类型。

date: 必须是可以转化成日期的数据。

url: 必须是url。

hex: 必须是十六进制。

email: 必须是邮箱地址类型。

any: any。

如果想要空值只能输入正整数可以设置最小值和type结合:

{getFieldDecorator('number', {

rules: [{

type: 'integer', min:2, message: '数量为大于2的正整数'

}]

})(

)}

复制代码

需要注意的是，type默认值是string，所以如果上述验证换成下述是不能验证成功的，因为会一直提示你这个地方必须填字符串。

getFieldDecorator('number', {

rules: [{

type: 'integer', message: '数量为正整数'

},{

min:2, message: '数量为大于2的正整数'

}]

})(

)}

复制代码

validator

validator:(rule, value, callback)=>void;

复制代码

自定义验证函数:

{getFieldDecorator('number', {

rules: [{

validator: (rule, value, callback) => {

/[^\d]+/g.test(value) ? callback('必须是数字类型') : callback();

},

}]

})(

)}

复制代码

transform

transform:(value)=>newValue;

复制代码

getFieldDecorator方法的验证规则rules数组的对象中包含transform属性，可以在验证之前将输入框的数据按照函数中规则转化成函数返回值。

但是这个函数只是在验证之前做一些转化处理，并不能改变输入框的值：

{getFieldDecorator('number', {

rules: [{

type: 'integer', message: '只允许输入数字', transform: (value) => 2

}]

})(

)}

复制代码

上述使用的时候，输入框中即使输入了非数字类型，也不会展示错误信息，因为已经通过transform把所有输入值转化成2去验证了。

提供了三种可以限制输入框只能输入数字的方法和一种验证前转化数据的方法，感觉最方便的还是规定type属性的类型。

有不正确之处，欢迎指出，如果觉得有用，就给我个大拇指吧o(￣▽￣)o

生活的一部分是工作，工作的一部分是解决问题取悦生活，所以好好生活，好好工作，好好热爱(●ˇ∀ˇ●)