版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/deng1456694385/article/details/87641964
antd的表单校验有很多预设规则,类型如下
- string: Must be of type string. This is the default type.
- number: Must be of type number.
- boolean: Must be of type boolean.
- method: Must be of type function.
- regexp: Must be an instance of RegExp or a string that does not generate an exception when creating a new * RegExp.
- integer: Must be of type number and an integer.
- float: Must be of type number and a floating point number.
- array: Must be an array as determined by Array.isArray.
- object: Must be of type object and not Array.isArray.
- enum: Value must exist in the enum.
- date: Value must be valid as determined by Date
- url: Must be of type url.
- hex: Must be of type hex.
- email: Must be of type email.
但是我用了type:'integer'
发现校验规则出来无论填入什么都提示错误
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="查询频率" className="required">
{form.getFieldDecorator('queryFreq', {
rules: [{ type: 'integer', required: true, message: '查询频率必填且为整数!'}],initialValue:current.queryFreq
})(<Input placeholder="请输入查询频率" />)}
</FormItem>
然后好像github的官方库中也有很多人提了issues
,我的想法是因为是普通的输入框,输入的内容被当成字符串校验,导致错误,所以可以在校验之前将value
处理成数字,如下:
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="查询频率" className="required">
{form.getFieldDecorator('queryFreq', {
rules: [{ type: 'integer', required: true, message: '查询频率必填且为整数!',transform:(value)=> {return Number(value)}}],initialValue:current.queryFreq
})(<Input placeholder="请输入查询频率" />)}
</FormItem>
这样就可以使用了.
Number
是框架提供的转数字的方法.