版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hope93/article/details/84302341
格式限制
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" />
)}
如果输入的不是数字，则提示错误