Валидация формы

function Form() {
    const [email, setEmail] = useState('');
    const [error, setError] = useState('');

    function handleSubmit(e: React.FormEvent) {
        e.preventDefault();

        if (!email.includes('@')) {
            setError('Введите корректный email');
            return;
        }

        setError('');
        // отправка
    }

    return (
        <form onSubmit={handleSubmit}>
            <input value={email} onChange={(e) => setEmail(e.target.value)} />
            {error && <p className="error">{error}</p>}
            <button>Отправить</button>
        </form>
    );
}

function Form() {
    const [email, setEmail] = useState('');

    const isValid = email === '' || email.includes('@');

    return (
        <input
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            className={isValid ? '' : 'invalid'}
        />
    );
}

const [email, setEmail] = useState('');
const [touched, setTouched] = useState(false);

const isValid = email.includes('@');

<input
    value={email}
    onChange={(e) => setEmail(e.target.value)}
    onBlur={() => setTouched(true)}
/>

{touched && !isValid && <p className="error">Некорректный email</p>}

const [values, setValues] = useState({ email: '', password: '' });
const [errors, setErrors] = useState<Record<string, string>>({});

function validate() {
    const newErrors: Record<string, string> = {};

    if (!values.email.includes('@')) {
        newErrors.email = 'Некорректный email';
    }

    if (values.password.length < 8) {
        newErrors.password = 'Пароль должен быть минимум 8 символов';
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
}

function handleSubmit(e: React.FormEvent) {
    e.preventDefault();

    if (!validate()) return;

    // отправка
}

<input
    name="email"
    value={values.email}
    onChange={handleChange}
    onBlur={validate}
/>
{errors.email && <p className="error">{errors.email}</p>}

<form>
    <input type="email" required />
    <input type="text" minLength={3} maxLength={20} />
    <input type="number" min={0} max={100} />
    <input type="text" pattern="[A-Za-z]+" />
</form>

<input
    required
    onInvalid={(e) => (e.target as HTMLInputElement).setCustomValidity('Введи email')}
    onInput={(e) => (e.target as HTMLInputElement).setCustomValidity('')}
/>

const [serverError, setServerError] = useState('');

async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();

    const res = await fetch('/api/register', {
        method: 'POST',
        body: JSON.stringify(values),
    });

    if (!res.ok) {
        const data = await res.json();
        setServerError(data.message);
        return;
    }
}