共计 1203 个字符，预计需要花费 4 分钟才能阅读完成。
格式限制
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 属性自定义效验，必须返回一个 callback
4.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…