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-z\d_]+$/,
                                    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 表单的两种校验方式

上一篇:clamav安装


下一篇:useCallback和useMemo源码分析