Блог

Я использую React-typescript для своего приложения. Я создал один глобальный компонент ввода, который я могу импортировать в любой компонент. Я создал одну форму с email помощью amp; password validation . Для проверки электронной почты я использую регулярное выражение, и оно работает нормально. Мой пароль и подтвердите проверку пароля, все работает нормально. Теперь я решил, что если пользователь введет менее 8 символов, я поймаю ошибку. Для этого я использовал регулярное выражение. Эта логика также работает нормально. Я хочу отображать длину пароля в функции handleChange, когда пользователь будет вводить, пока они не наберут более 8 символов, я покажу ошибку. После отправки формы будет показано, что оба поля ввода пароля не совпадают. Но я не могу найти логику, когда я могу добавить ошибку при изменении дескриптора. Я делюсь своим кодом в codesandbox.

Это мой код проверки формы

 import React, { useState } from "react";
import "./styles.css";
import { TextInput } from "./input";

export default function App() {
  const [formState, setFormState] = useState({
    email: ``,
    password: ``,
    passwordConfirmation: ``,
    loading: false,
    accountCreationSuccessful: false,
    errorPasswordMessage: ``,
    errorEmailMessage: ``,
    passwordLength: ``
  });

  //destructure the state
  const {
    email,
    password,
    passwordConfirmation,
    loading,
    accountCreationSuccessful,
    errorPasswordMessage,
    errorEmailMessage,
    passwordLength
  } = formState;

  const isPasswordValid = (password: any, passwordConfirmation: any) => {
    if (!password || !passwordConfirmation) return false;
    return password === passwordConfirmation;
  };

  const isEmailValid = (value: any) => {
    const emailRegex = /^(([^<>()[]\.,;:s@"] (.[^<>()[]\.,;:s@"] )*)|(". "))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9] .) [a-zA-Z]{2,}))$/;
    return emailRegex.test(value);
  };

  const passLengthValidation = (value: any) => {
    const re = new RegExp(`^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,32}$`);
    return re.test(value);
  };

  const sendForm = (payload: any) => {
    return fetch(
      "https://run.mocky.io/v3/03659a5b-fed5-4c5f-b8d0-4b277e902ed3",
      {
        method: `POST`,
        headers: {
          Accept: `application/json`,
          "Content-Type": `application/json`
        },
        body: JSON.stringify(payload)
      }
    );
  };

  const handleChange = (e: any) => {
    setFormState({
      ...formState,
      [e.target.id]: e.target.value
    });
    //In here I want to display the error.when user will type short password
  };

  const onSubmit = async (e: any) => {
    e.preventDefault();

    setFormState({
      ...formState,
      errorPasswordMessage: isPasswordValid(password, passwordConfirmation)
        ? ``
        : `Upps sorry Password did not match 😔`,
      errorEmailMessage: isEmailValid(email)
        ? ``
        : `Upps sorry wrong email  😔`,
      passwordLength: passLengthValidation(password) ? `` : `too short password`
    });

    if (
      !isPasswordValid(formState.password, formState.passwordConfirmation) ||
      !isEmailValid(formState.email) ||
      !passLengthValidation(password)
    ) {
      return;
    }

    const response = await sendForm({
      email: formState.email,
      password: formState.password
    });

    if (response.ok) {
      setFormState({
        ...formState,
        accountCreationSuccessful: true,
        email: ``,
        password: ``,
        passwordConfirmation: ``
      });
    }
  };

  return (
    <div>
      <TextInput
        type="text"
        value={email}
        onChange={handleChange}
        id="email"
        label="Email"
        required
        error={errorEmailMessage}
      />
      <TextInput
        type="password"
        value={password}
        onChange={handleChange}
        id="password"
        required
        label="password"
        isPassword
        error={passwordLength} 
        // In here I want to display if the password is did not match  or password is too short(when user start typing). i know it should be conditional 
      />
      <TextInput
        type="password"
        value={passwordConfirmation}
        onChange={handleChange}
        id="passwordConfirmation"
        required
        label="Confirm password"
        isPassword
        error={errorPasswordMessage}
      />
      <button
        type="submit"
        name="action"
        onClick={onSubmit}
        disabled={!formState.email}
      >
        {formState.loading ? `loading...` : `save`}
      </button>
    </div>
  );
}
  

Вы можете проверить id для password поля и проверить e.target.value значение пароля и соответственно отобразить сообщение об ошибке.

 const handleChange = (e: any) => {
    let passwordError = ''
    
    if (e.target.id === 'password' amp;amp; password.length < 7) {
      passwordError = 'Password should be more than 8 characters'
    }
    
    setFormState({
      ...formState,
      [e.target.id]: e.target.value,
      errorPasswordMessage: passwordError
    });
    //In here I want to display the error.when user will type short password
  };