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>