Как сделать правильную валидацию в React?

Question

Есть такой проект, где при открытии модального окна, у нас должна срабатывать проверка, что адрес электронной почты введён верно и что пароль должен быть больше 6 символов.

У меня есть файл с валидацией почты:

function validationEmails(email) {
  const firstCharCode = email.charCodeAt(0);
  if (firstCharCode >= 48 && firstCharCode <= 57) {
    return false;
  }

  const tlds = [
    '.aero',
    '.biz',
    '.cat',
    '.com',
    '.coop',
    '.edu',
    '.gov',
    '.info',
    '.int',
    '.jobs',
    '.mil',
    '.mobi',
    '.museum',
    '.name',
    '.net',
    '.org',
    '.pro',
    '.tel',
    '.travel',
    '.asia',
    '.eu',
    '.ru',
    '.ua',
    '.uk',
    '.us',
    '.au',
    '.cn',
    '.de',
    '.fr',
    '.in',
    '.it',
    '.jp',
    '.kr',
    '.mx',
    '.nl',
    '.pl',
    '.se',
    '.sg',
    '.tw',
    '.pizza',
  ];

  if (email.includes('@')) {
    const indexAt = email.indexOf('@');
    const indexDot = email.indexOf('.', indexAt);

    if (indexDot !== -1 && indexDot > indexAt + 1) {
      const domainPart = email.substring(indexAt + 1, indexDot);
      if (domainPart.length > 0) {
        if (
          email.indexOf(' ') === -1 &&
          email.charAt(0) !== '.' &&
          !email.includes('..')
        ) {
          const domain = email.substring(indexDot);
          if (tlds.includes(domain)) {
            return true;
          }
          return false;
        }
      }
    }
  }
  return false;
}

export default validationEmails;

Который я подключаю в другой компоненте Main и пытаюсь сделать проверку электронной почты.

import { useState } from 'react';
import validationEmail from './../../../public/assets/valdationEmail';
import style from './Main.module.css';

function Main() {
  const [login, setLogin] = useState(false);
  const [register, setRegister] = useState(false);
  const [error, setError] = useState('');

  const closeAuthWindow = () => {
    setLogin(false);
    setRegister(false);
  };

  return (
    <div className={style.main}>
      <div className={style.left}>
        <div className={style.icon}>
          <img src="/assets/images/main/icon.png" alt="Icon" />
        </div>
        <div className={style.text}>
          <p>Оставайся на связи с друзьями, даже когда их нет рядом</p>
        </div>
        <div className={style.buttons}>
          <button
            type="button"
            className={style.buttonBlue}
            onClick={() => setRegister(true)}
          >
            Зарегистрироваться
          </button>
          <button
            type="button"
            className={style.buttonBorder}
            onClick={() => setLogin(true)}
          >
            Войти
          </button>
          {(login || register) && (
            <div className={`${style.authWindow} ${style.authWindowLogin}`}>
              <div className={`${style.authBlock} ${style.authBlockLogin}`}>
                <div className={style.authUp}>
                  <div className={style.authText}>
                    {login ? <h2>Авторизация</h2> : <h2>Регистрация</h2>}
                  </div>
                  <button
                    type="button"
                    className={style.closeAuthButton}
                    onClick={closeAuthWindow}
                  >
                    <img
                      src="./assets/images/blockWin/close.png"
                      alt="Закрыть"
                    />
                  </button>
                </div>
                {login && (
                  <div className={style.authInputs}>
                    <input
                      type="email"
                      className={style.authInput}
                      id="loginEmail"
                      placeholder="Электронная почта"
                      onChange={(e) => validationEmail(e.target.value)}
                      required
                    />
                    {validationEmail && <div id="loginEmailError" className={style.error}>
                      Адрес не валиден
                    </div>}
                    <input
                      type="password"
                      className={style.authInput}
                      id="loginPassword"
                      placeholder="Пароль"
                      onChange={(e) => {if(e.target.value.length < 6){
                        setError(true);
                      }else{setError(false);}}}
                      required
                    />
                    {error && <div id="loginPasswordError" className={style.error}>
                      Пароль не валиден
                    </div>}
                  </div>
                )}
                {register && (
                  <div className={style.authInputs}>
                    <input
                      type="email"
                      className={style.authInput}
                      id="email"
                      placeholder="Электронная почта"
                      required
                    />
                    <div id="emailError" className={style.error}>
                      Адрес не валиден
                    </div>
                    <input
                      type="password"
                      className={style.authInput}
                      id="password"
                      placeholder="Пароль"
                      required
                    />
                    <div id="passwordError" className={style.error}>
                      Пароль не валиден
                    </div>
                    <input
                      type="password"
                      className={style.authInput}
                      id="confirmPassword"
                      placeholder="Подтверждение пароля"
                      required
                    />
                  </div>
                )}
                <div className={style.authEntry}>
                  {login ? (
                    <button
                      type="button"
                      id="loginSubmitButton"
                      className={style.buttonBlue}
                    >
                      Войти
                    </button>
                  ) : (
                    <button
                      type="button"
                      id="submitButton"
                      className={style.buttonBlue}
                    >
                      Зарегистрироваться
                    </button>
                  )}
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
      <div className={style.right}>
        <div className={style.img}></div>
      </div>
    </div>
  );
}

export default Main;

Не получается разобраться уже 2 часа, поэтому обращаюсь к профессионалам

Answer 1

пытаюсь сделать проверку электронной почты

Наворотил ты конечно изрядно... Хороший пример как не стоит писать на Реакте.

Предложу вот такую структуру. Там комментарием помечено место для валидации. Для примера выводится в консоль что успели ввести в поля. Эти данные и нужно будет проверять.

//
function Input({variant, exit}){
  const [data, setData] = React.useState(def())
  const [tit, txt] = text(variant)
  const act = e => {
    e.preventDefault()
    // тут можно делать любые проверки формы
    console.log(data)
  }
  const fn = fnc(setData)
  return <section>
    <h2>{tit}</h2>
    <button onClick={exit}>Закрыть</button>
    <form onSubmit={act}>
      <div>
        <input onChange={fn('email')} type='email' value={data.email} placeholder='Электронная почта' />
        <input onChange={fn('ps1')} value={data.ps1} type="password" placeholder='Пароль' />
        {variant === 1 && <input onChange={fn('ps2')} value={data.ps2} type="password" placeholder='Повторить пароль' />}
      </div>
      <button>{txt}</button>
    </form>
  </section>
}
//
function def(){
  return {
    email: '',
    ps1: '',
    ps2: '',
  }
}
//
function fnc(set){
  return key => e => set(o => ({...o, [key]: e.target.value}))
}
//
function text(v){
  return v === 1 
    ? ['Регистрация', 'Зарегистрироваться']
    : ['Авторизация', 'Войти']
}
//
function Nav({act}){
  return <nav>
    <h1>Оставайся на связи с друзьями, даже когда их нет рядом</h1>
    <div>
      <button onClick={_ => act(1)}>Зарегистрироваться</button>
      <button onClick={_ => act(2)}>Войти</button>
    </div>
  </nav>
}
//
function Main(){
  const [variant, setVariant] = React.useState(false)
  const exit = _ => setVariant(false)
  return <main>
    <Nav act={setVariant} />
    {variant && <Input variant={variant} exit={exit} />}
  </main>
}


const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<Main />);

<div id="like_button_container"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

БЛОГ НА HUSL

Как сделать правильную валидацию в React?

Ответы (1 шт):