Добавить проверку в formitem в reactjs

В моем коде responsejs я хочу добавить проверку пароля и электронной почты. Как?

            <Col span = {12}>
                <FormItem>
                    {getFieldDecorator('Password', {
                        initialValue: "",
                        rules: [{
                            required: true, message: 'Please Input your Password!',
                        }],
                    })(
                        <Input placeholder = "Password" />
                    )}
                </FormItem>
            </Col>

            <Col span = {12}>
                <FormItem>
                    {getFieldDecorator('Email', {
                        initialValue: "",
                        rules: [{
                            required: true, message: 'Please Input your Email!',
                        }],
                    })(
                        <Input placeholder = "Email" />
                    )}
                </FormItem>
            </Col>

Также я хочу скрыть пароль пулями или чем-то еще

Добро пожаловать в SO @Levina! Чтобы помочь вам лучше, нам понадобятся дополнительные сведения об используемых вами технологиях. Похоже, вы используете Ant Design, верно? Если да, не забудьте включить antd в свой тег этого сообщения.

— 11.10.2018 13:58

Да, это так.....

— 11.10.2018 13:59

Ваш вопрос нуждается в более подробной информации, как и я предполагаю, вы используете библиотеку Ant для своего проекта, на этот вопрос никогда не было ответа. потому что вы не пытались решить свою проблему. даже вы не искали примеров или функций для проверки тренда. Я проголосовал за ваш вопрос, но попробуйте отредактировать его.

— 11.10.2018 14:15

reactjs antd

11.10.2018 13:48

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

2 738

Ответы 1

Ознакомьтесь с этим кодом с простой проверкой адреса электронной почты и пароля: https://codepen.io/lukejsimonetti/pen/XxgbgP?editors=0010

Вы близки. Похоже, вам не хватает type в правилах. Что-то вроде этого:

            <FormItem
                {...formItemLayout}
                label = "E-mail"
            >
                {getFieldDecorator('email', {
                    rules: [{
                        // declare the type and message here
                        type: 'email', message: 'The input is not valid E-mail!',
                    }, {
                        required: true, message: 'Please input your E-mail!',
                    }],
                })(
                    <Input />
                )}
            </FormItem>
            <FormItem
                {...formItemLayout}
                label = "Password"
            >
                {getFieldDecorator('password', {
                    rules: [{
                        required: true, message: 'Please input your password!',
                    }, {

                        // run some custom validator function here on your class
                        validator: this.compareToConfirmPassword,
                    }],
                })(
                    <Input type = "password" />
                )}
            </FormItem>

Взято из документации Ant Design здесь: https://ant.design/components/form/#components-form-demo-register

11.10.2018 14:12