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>