react+antd系列之Form表单(2)：格式限制验证

格式限制antd中表单的功能很多，下面就为大家整理了一下antd中常用的几种表单输入格式验证：1. 输入框不能为空限制，如下： {getFieldDecorator(’name’, { rules: [{ required: true, message: ‘名称不能为空’, }], })( <Input placeholder=“请输入名称” /> )}2. 输入框字符限制，如下：字符长度范围限制： {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=“请输入昵称” /> )}3. 自定义校验 {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(); }validator属性自定义效验，必须返回一个callback4.whitespace空格报错 {getFieldDecorator(‘hobody’, { rules: [{ whitespace: true, message: ‘不能输入空格’, } ], })( <Input placeholder=“请输入昵称” /> )}若输入只有一个空格，则会报错5.pattern正则验证 {getFieldDecorator(‘qbc’, { rules: [{ message:‘只能输入数字’, pattern: /^[0-9]+$/ } ], })( <Input placeholder=“请输入ABC” />)}如果输入的不是数字，则提示错误完整代码地址：https://gitee.com/hope93/antd…