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

45次阅读

共计 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…

正文完
 0