antd 表单的两种校验方式
Posted jlyuan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了antd 表单的两种校验方式相关的知识，希望对你有一定的参考价值。
1.声明式表单验证：
<Form.Item
name="username"
rules={[
{
required: true,
message: ‘Please input your Username!‘,
},
{
max: 20,
message: ‘最长20位!‘,
},
{
min: 5,
message: ‘至少5位!!‘,
}, {
pattern: /^[A-Za-zd_]+$/,
message: ‘自能包含字母数字下划线字符!‘,
},
]}
>
<Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
</Form.Item>
2. validator自定义式验证：
<Form.Item
name="password"
rules={[
{
validator: (_, value) =>{
if(value.length >= 6 && value.length<=10) {
return Promise.resolve()
}else{
return Promise.reject(‘密码长度必须是6~10位‘)
}
}
}
]}
>
<Input
prefix={<LockOutlined className="site-form-item-icon" />}
type="password"
placeholder="Password"
/>
</Form.Item>
以上是关于antd 表单的两种校验方式的主要内容，如果未能解决你的问题，请参考以下文章
form表单的两种提交方式，submit和button的用法