输入框不能为空限制:
{getFieldDecorator('name', { rules: [{ required: true, message: '名称不能为空', }], })( <Input placeholder="请输入名称" /> )}
输入框长度限制:
{getFieldDecorator('password', { rules: [{ required: true, message: '密码不能为空', }, { min:4, message: '密码不能少于4个字符', }, { max:6, message: '密码不能大于6个字符', }], })( <Input placeholder="请输入密码" type="password"/> )} {getFieldDecorator('nickname', { rules: [{ required: true, message: '昵称不能为空', }, { len: 4, message: '长度需4个字符', }], })( <Input placeholder="请输入昵称" /> )}
空格限制和数字限制
{getFieldDecorator('hobody', { rules: [{ whitespace: true, message: '不能输入空格', } ], })( <Input placeholder="请输入昵称" /> )} {getFieldDecorator('qbc', { rules: [{ message:'只能输入数字', pattern: /^[0-9]+$/ } ], //下面这个函数可以直接把其他字符过滤掉,无法输入到上面 getValueFromEvent: (event) => { return event.target.value.replace(/\D/g,'') }, })( <Input placeholder="请输入" /> )}
最重要的自定义验证:
{getFieldDecorator('passwordcomfire', { rules: [{ required: true, message: '请再次输入密码', }, { validator: passwordValidator }], })( <Input placeholder="请输入密码" type="password"/> )} // 密码验证 const passwordValidator = (rule, value, callback) => { const { getFieldValue } = form; if (value && value !== getFieldValue('password')) { callback('两次输入不一致!') } // 必须总是返回一个 callback,否则 validateFields 无法响应 callback(); }
当然我们也可以在form.validateFields里面来处理