一、输入框非空校验
<Form.Item
label="Username"
name="username"
rules={[
{
required: true,
whitespace: true,
message: 'Please input your username!'
}
]}
getValueFromEvent={ event => event.target.value.trim() }
>
<Input />
</Form.Item>
whitespace: 如果字段仅包含空格则校验不通过。
二、嵌套结构与校验信息
name 属性支持嵌套数据结构。通过validateMessages或message自定义校验信息模板。
const validateMessages = {
required: '${label} is required!',
types: {
email: '${label} is not validate email!',
number: '${label} is not a validate number!'
},
number: {
range: '${label} must be between ${min} and ${max}'
},
};
<Form validateMessages={validateMessages}>
# 具体见官网
三、通过函数设置Form.Item的 API validateStatus校验状态
function validatePrimeNumber (number) {
if (number === 11) {
return {
validateStatus: 'success',
errorMsg: null
};
}
return {
validateStatus: 'error',
errorMsg: 'The prime between 8 and 12 is 11!'
};
}
<Form.Item validateStatus={number.validateStatus}>
<InputNumber min={8} max={12} value={number.value} onChange={onNumberChange} />
</Form.Item>
四、自定义校验的时机和内容
-
validateStatus: 校验状态，可选 ‘success’，’warning’，’error’，’validating’。 -
hasFeedback：用于给输入框添加反馈图标。 -
help：设置校验文案。
实例：使用正则表达式校验 - pattern
1、密码只能由大写字母（A-Z）、小写字母（a-z）、数字(0-9)、非字母数字字符（￥%）四种组成。
<FormItem
name="password"
rules={[
{
pattern: /^[a-zA-Z\d￥%]+$/,
message: '只能由大写字母（A-Z）、小写字母（a-z）、数字(0-9)、非字母数字字符（￥%）四种组成'
},
{ min: 8, message: '最小长度8位' }
]}
>
<Input.Password />
</FormItem>
2、常用正则表达式
# 手机号
$ /^1[34578]\d{9}$/
# 国内手机号码
$ /^[1][3,4,5,7,8][0-9]{9}$/
# 匹配邮箱
$ /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/
# 纯数字
$ /^[0-9]*$/
# 匹配 ip 地址
$ /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
# 账号 包含数字或字母，长度 2 到 20 个字符
$ /^[0-9a-zA-Z]{2,20}$/
# 账号名称 中文、数字、字母、下划线，位置不限，长度 2 到 20 个字符
$ /^[a-zA-Z0-9_\u4e00-\u9fa5]{2,20}$/
# 微信号 字母，数字，下划线和减号，长度为 6 到 20 个字符
$ /^[0-9a-zA-Z_\-]{6,20}$/
# 邮箱
$ /^([0-9A-Za-z\-_.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g
# 用户密码
$ /^[a-zA-Z\d￥%]+$/
# 只支持中文、大小写字母、数字和下划线，不能以下划线开头
$ /^(?!_)[0-9a-zA-Z_\u4e00-\u9fa5]+$/
# 英文字母，长度不能超过 20 个字符
$ /^[a-zA-Z]{0,20}$/
# 只能输入中文
$ /^[\u4e00-\u9fa5]{0,}$/
3、邮箱校验
<FormItem
name="userMail"
label="邮箱"
rules={[
{ required: true, message: '邮箱不能为空', whitespace: true },
{
pattern: regexp.userForm.email,
message: '请输入有效邮箱'
},
{ max: 64, message: '不能超过 64 个字符' }
]}
getValueFromEvent={ event => event.target.value.trim() }
>
<Input placeholder="请输入邮箱" />
</FormItem>
4、新增/编辑页中名称不能重复
<FormItem
name="name"
label="名称："
rules={[{ required: true, message: '名称不能为空' }, { validator: checkName }]}
validateTrigger="onBlur">
<Input placeholder="请输入名称" />
</FormItem>
// 判断数据名称是否唯一
const checkName = () => {
return new Promise(async (resolve, reject) => {
const name = form.getFieldValue("name");
const dsName = dataStandardInfo === undefined ? null : dataStandardInfo.name;
if (dsName === name) {
resolve()
} else {
const obj = sourceNameList.find(item => item.fieldValue === name);
obj ? reject('数据名称已使用') : resolve();
}
})
}
5、数字输入框只能输入整数
<InputNumber min={0} parser={limitDecimals} />
// 数字输入框只能输入整数
const limitDecimals = value => value && value.replace(/\D/g, '')