ant design表单校验踩坑

版权声明：本文为博主原创文章，未经博主允许不得转载。 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是框架提供的转数字的方法.