react+antd+Form 表单格式限制验证

格式限制

1.输入框不能为空限制，如下：

<Form.Item
  label='测试表单'
  name='input'
  rules={[
    {required: true, message: "此项必填"},
  ]}
>
  <Input />
</Form.Item>

2.输入框字符限制，如下：

<Form.Item
  label='测试表单'
  name='input'
  rules={[
    { min:4, message: '密码不能少于4个字符' }, 
    { max:6, message: '密码不能大于6个字符' },
    { len:5, message: '长度需5个字符' }
  ]}
>
  <Input />
</Form.Item>

3. whitespace空格报错

<Form.Item
  label='测试表单'
  name='input'
  rules={[
    { whitespace: true, message: '不能输入空格' } 
  ]}
>
  <Input />
</Form.Item>

4.pattern正则验证

<Form.Item
  label='测试表单'
  name='input'
  rules={[
    { pattern: /^[0-9]+$/, message:'只能输入数字'} 
  ]}
>
  <Input />
</Form.Item>

5. 自定义校验

<Form.Item
  label='测试表单'
  name='input'
  rules={[
    { validator: checkFormItem }
  ]}
>
  <Input />
</Form.Item>

const checkFormItem = (rule, value, callback) => {
	setTimeOut(() => {
    	if(...){
        	callback('校验不通过的message')
        }
    }, 1000)
}