antDesign Form表单校验（react）

<script>
        <Form name="basic" ref={formRef} onFinish={onFinish}>
            <Form.Item
                label='校验'
                name="check"
                rules={[
                    // 校验必填
                    {
                        required: true,
                        message: '请输入！'
                    },
                    // 校验输入字符数限制
                    {
                        validator: (_, value) =>
                            value && value.length > 500
                                ? Promise.reject(new Error('输入内容不能超过500个字符！'))
                                : Promise.resolve(),
                    },
                    // 校验输入的不能为负数
                    {
                        validator: (_, value) =>
                            value && value < 0
                                ? Promise.reject(new Error('输入内容不能为负数！'))
                                : Promise.resolve(),
                    },
                    // 校验手机号
                    {
                        pattern: /^1\d{10}$/,
                        message: '手机号格式错误！',
                    },
                    // 校验密码
                    {
                        validator: (_, value) =>
                            value && !/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[\W_]).{8,}$/.test(value)
                                ? Promise.reject(
                                    new Error('密码必须包含至少8个字符，一个字母，一个数字和一个特殊符号！')
                                )
                                : Promise.resolve()
                    },
                    // 校验两次输入的密码是否一致
                    {
                        validator: (_, value) =>
                            value && value !== formRef.current?.getFieldValue('newPassword')
                                ? Promise.reject(new Error('两次输入的密码不一致!'))
                                : Promise.resolve(),
                    }
                ]}
            >
                <Input />
            </Form.Item>
        </Form>
    </script>

注：本人前端小白 ，如有不对的地方还请多多指教

原文地址：https://blog.csdn.net/m0_63788547/article/details/137866985

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！