Как создать проверку формы с помощью библиотеки Yup в Reactjs

Проверка формы — важная часть любого веб-приложения. Это помогает гарантировать, что данные, введенные пользователями, являются правильными и полными. Да, это популярная библиотека проверки для Reactjs, которая позволяет легко создавать и управлять проверкой форм.

Чтобы использовать Yup, сначала необходимо установить его с помощью npm: npm install yup

После установки Yup вы можете приступить к созданию схемы проверки. Схема проверки — это объект, определяющий правила проверки данных в форме.

Например, следующая схема проверяет имя пользователя и пароль:

const schema = Yup.object().shape({
  username: Yup.string().required(),
  password: Yup.string().required().minLength(8),
});

Правило required() указывает, что поле является обязательным. Правило minLength() указывает, что длина поля должна быть не менее 8 символов.

Затем вы можете использовать метод validate() для проверки данных в вашей форме:

const formData = {
  username: "user123",
  password: "password123",
};

const errors = schema.validate(formData);

if (errors.length > 0) {
  // There are errors in the form data
} else {
  // The form data is valid
}

Объект errors будет содержать массив сообщений об ошибках, если данные формы недействительны.

Да, также предусмотрен ряд других правил проверки, таких как email(), url() и number(). Полный список доступных правил проверки вы можете найти в документации Yup.

Вот пример того, как использовать Yup для проверки формы, которая позволяет пользователям создавать новую учетную запись:

const schema = Yup.object().shape({
  username: Yup.string().required().minLength(3).maxLength(25),
  email: Yup.string().email().required(),
  password: Yup.string().required().minLength(8).maxLenght(25),
});

const handleSubmit = (e) => {
  e.preventDefault();

  const formData = {
    username: e.target.username.value,
    email: e.target.email.value,
    password: e.target.password.value,
  };

  const errors = schema.validate(formData);

  if (errors.length > 0) {
    // There are errors in the form data
    alert(errors.join("\n"));
  } else {
    // The form data is valid, do something with it
  }
};

const App = () => {
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" placeholder="Username" />
      <input type="email" name="email" placeholder="Email" />
      <input type="password" name="password" placeholder="Password" />
      <button type="submit">Create Account</button>
    </form>
  );
};

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

Как создать проверку формы с помощью библиотеки Yup в Reactjs

Похожие вопросы