Как добавить проверку формы в Next.js?

Как добавить ввод тегов в NextJS Программирование и разработка

Формы играют решающую роль в современных веб-приложениях, обеспечивая точность и достоверность данных. Next.js, универсальная среда для создания приложений React, предлагает проверку форм, которая помогает проверять вводимые пользователем данные на соответствие заранее определенным критериям, обеспечивает немедленную обратную связь и повышает качество данных. В этой статье мы рассмотрим основные понятия, такие как обязательные поля, проверка формата данных и настраиваемые сообщения об ошибках.

Шаги по созданию приложения NextJS

Шаг 1. Создайте новый проект Next.js, используя следующую команду.

NPX:инструмент запуска пакетов в npm 5.2+, npx, — это простой интерфейс командной строки для запуска пакетов Node.

npx create-next-app form-validation-app

Шаг 2: Перейдите в каталог проекта:

cd form-validation-app

Структура проекта:

труктура про

Approach

Чтобы добавить проверку формы, мы собираемся использовать хуки useState и useEffect для динамического управления состоянием формы и правилами проверки.

Хук useState() в React инкапсулирует локальные переменные состояния в функциональные компоненты. Это специальная функция, которая принимает начальное состояние в качестве аргумента и возвращает массив из двух записей. Он содержит только сингулярные значения и требует вызовов useState для реализации нескольких состояний.

Хук useEffect в React обрабатывает побочные эффекты, такие как получение данных и обновление DOM, он запускается при каждом рендеринге и использует массивы зависимостей.

Пример. В этом примере мы увидим, как добавить проверку формы в Next.js.

  • App.js file

Javascript

import React, { useState, useEffect } from 'react';
 
const App = () => {
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [errors, setErrors] = useState({});
    const [isFormValid, setIsFormValid] = useState(false);
 
    useEffect(() => {
        validateForm();
    }, [name, email, password]);
    // Validate form
    const validateForm = () => {
        let errors = {};
 
        if (!name) {
            errors.name = 'Name is required.';
        }
 
        if (!email) {
            errors.email = 'Email is required.';
        } else if (!/\S+@\S+\.\S+/.test(email)) {
            errors.email = 'Email is invalid.';
        }
 
        if (!password) {
            errors.password = 'Password is required.';
        } else if (password.length < 6) {
            errors.password = 'Password must be at least 6 characters.';
        }
 
        setErrors(errors);
        setIsFormValid(Object.keys(errors).length === 0);
    };
    // Submit
    const handleSubmit = () => {
        if (isFormValid) {
            console.log('Form submitted successfully!');
        } else {
            console.log('Form has errors. Please correct them.');
        }
    };
 
    return (
        <div style={styles.container}>
            <div style={styles.form}>
                <h1 style={styles.heading}>
                    Geeksforgeeks || Form Validation In Next.js
                </h1>
                <h3 style={styles.subHeading}>Login Page</h3>
                <input
                    style={styles.input}
                    placeholder="Name"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                />
                {errors.name && <p style={styles.error}>{errors.name}</p>}
                <input
                    style={styles.input}
                    placeholder="Email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                />
                {errors.email && <p style={styles.error}>{errors.email}</p>}
                <input
                    style={styles.input}
                    placeholder="Password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    type="password"
                />
                {errors.password && <p style={styles.error}>{errors.password}</p>}
                <button
                    style={{ ...styles.button, opacity: isFormValid ? 1 : 0.5 }}
                    disabled={!isFormValid}
                    onClick={handleSubmit}
                >
                    Submit
                </button>
            </div>
        </div>
    );
};
 
const styles = {
    container: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        minHeight: '100vh',
        backgroundColor: '#f0f0f0',
    },
    heading: {
        fontWeight: 'bold',
        fontSize: '25px',
        color: "green",
        textAlign: "center",
    },
    subHeading: {
        fontWeight: 'bold',
        fontSize: '25px',
        textAlign: "center",
 
    },
    form: {
        backgroundColor: '#fff',
        padding: '20px',
        borderRadius: '8px',
        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
        width: '100%',
        maxWidth: '400px',
        margin: '0 auto',
    },
    input: {
        width: '100%',
        padding: '12px',
        marginBottom: '12px',
        border: '1px solid #ccc',
        borderRadius: '10px',
        fontSize: '16px',
        transition: 'border-color 0.2s ease',
    },
    button: {
        backgroundColor: 'green',
        color: '#fff',
        fontWeight: 'bold',
        fontSize: '16px',
        padding: '12px',
        border: 'none',
        borderRadius: '10px',
        cursor: 'pointer',
        width: '40%',
        transition: 'opacity 0.2s ease',
    },
    error: {
        color: 'red',
        fontSize: '14px',
        marginBottom: '6px',
    },
};
 
export default App;

Шаг для запуска:

Запустите приложение Next.js по URL-адресу http://localhost:3000, используя команду.

npm run dev

Выход :

устите приложение Nex

Читайте также:  Sprintf в C++
Оцените статью
bestprogrammer.ru
Добавить комментарий