Simple Validation Form In React Using UseHooks And LocalStorage With Some Tailwind🥳🎉

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

Я не хочу писать длинный блог, поэтому давайте погрузимся в код. 👨💻 👩💻

Сначала напишем простой jsx-код:

<div
      className="login grid place-content-center  
    bg-gradient-to-r from-purple-900 via-purple-1000 to-blue-800 "
    >
      <form
        className="card grid place-content-center  h-96 w-96  
       "
        onSubmit={handleSubmit}
      >
        <label htmlFor="">name:</label>
        <input
          type="text"
          value={name}
          placeholder="Enter Your Name"
          onChange={(e) => setName(e.target.value)}
        />
        {errors.name}

        <label htmlFor="email">Email:</label>
        <input
          type="email"
          placeholder="email address"
          id="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        {errors.email}

        <label htmlFor="password">Password:</label>
        <input
          type="text"
          placeholder="password"
          value={password}
          id="password"
          onChange={(e) => setPassword(e.target.value)}
        />
        {errors.password}

        <label htmlFor="phoneNumber">phone Number:</label>
        <input
          type="text"
          value={phoneNumber}
          placeholder="phone Number"
          id="phoneNumber"
          onChange={(e) => setPhoneNumber(e.target.value)}
        />

        <div className="buttons flex gap-3 justify-center mt-5">
          <button type="submit" className="btn-1">
            Sign Up
          </button>
          <button>
            <Link
              className="
        "
              to="/login"
            >
             Login{" "}
            </Link>
          </button>
        </div>
      </form>
    </div>

Вход в полноэкранный режим Выход из полноэкранного режима

2- Второе Пришло время сделать эту форму динамической:
Сначала нам нужно инициировать крючки UseState, которые мы используем

 const [email, setEmail] = useState("")
         const [password, setPassword] = useState("")
         const [name, setName] = useState("")
         const [phoneNumber, setPhoneNumber] = useState("")
         const [errors, setErrors] = useState({})
Вход в полноэкранный режим Выйти из полноэкранного режима

Подготовьте кнопку отправки следующим образом

const handleSubmit = (e) => {
    e.preventDefault()
    formValidation()
    setUsers([...users, { email: email, password: password }])
  }
Войти в полноэкранный режим Выйти из полноэкранного режима

Пришло время задать некоторые условия для правильного реестра

 const formValidation = () => {
    let newErrors = {}
    if (name === "") {
      newErrors.name = <h1 className="text-red-800 text-center">
        Name Can't Be Blanck</h1>
    }
    if (email === "") {span
      newErrors.email = <span className="text-red-800 text-center">
         Email Address Is Required</span>
    } else if (/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(email)) {
      newErrors.email = <span className="text-red-800 text-center">
        Email address is invalid</span>
    } else {
      newErrors.email = <h1 className="text-green-800 text-center ">
        Email is Valid</h1>
    }
    if (password === "") {
      newErrors.password = <span className="text-red-800 text-center">
        Password Is Required</span>
    } else if (!/^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,15}$/.test(password)) {
      newErrors.password = <span className="text-red-800 text-center">
        Invalid Password Format</span>
    } else {
      newErrors.password = <span className="text-green-800 text-center ">
        Correct Password</span>
    }
    setErrors(newErrors)
  }
Войти в полноэкранный режим Выйти из полноэкранного режима

> И последний шаг — сохранение данных пользователя в localstorage таким образом:

Мы можем инициировать локальное хранилище

const [users, setUsers] = useState(() => {
    const data = localStorage.getItem("data")
    return data ? JSON.parse(data) : []
  })
Войти в полноэкранный режим Выйти из полноэкранного режима

И используя UseHooks, чтобы посмотреть, нет ли пользователя в localstorage, прежде чем установить нового.

useEffect(() => {
    localStorage.setItem("data", JSON.stringify(users))
  }, [users])

Войти в полноэкранный режим Выход из полноэкранного режима

👉 Посетите мой аккаунт на github

> Заключение:

В итоге, я попытался написать простую форму валидации, чтобы научиться использовать хуки, а также сохранять их в localstorage. Надеюсь, что я смог помочь вам, и удачи всегда

Оцените статью
devanswers.ru
Добавить комментарий