Реализация пользовательской валидации форм с использованием Vue.js

Введение

В этом проекте вы научитесь реализовывать пользовательский валидатор форм с использованием Vue.js. Пользовательский валидатор форм позволяет вам валидировать поля формы и проверять валидность данных перед тем, как пользователь отправит форму.

👀 Предпросмотр

Анимация демонстрации валидации форм

🎯 Задачи

В этом проекте вы научитесь:

Как реализовать компонент FormInput, чтобы обновлять значение v-model компонента при изменении значения поля ввода.
Как реализовать функцию is_email, чтобы валидировать адрес электронной почты на основе конкретных правил.
Как реализовать функцию validateForm, чтобы валидировать данные формы на основе определенных правил валидации.

🏆 Достижения

После завершения этого проекта вы сможете:

Создать пользовательский валидатор форм в Vue.js.
Валидировать поля формы с использованием пользовательских правил валидации.
Обрабатывать ошибки валидации форм и отображать их пользователю.

Настройка структуры проекта

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте папку проекта. Структура каталогов следующая:

├── components
│   ├── FormInput.js
│   └── FormValidator.js
├── css
├── index.html
├── js
│   └── util.js
└── lib
    └── vue.global.js

где:

index.html - главная страница.
css - папка для хранения стилей проекта.
lib - папка для хранения зависимостей проекта.
components/FormInput.js - компонент input.
components/FormValidator.js - компонент валидатора форм.
js/util.js - вспомогательная функция, требуемая проектом.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите ее вручную, чтобы увидеть страницу.

Реализация компонента FormInput

В этом шаге вы научитесь реализовывать компонент FormInput, чтобы обновлять значение v-model компонента в index.html при изменении значения поля ввода.

Откройте файл FormInput.js, расположенный в директории components.
В функции setup компонента FormInput найдите раздел TODO для цели 1.
Реализуйте код для вызова события, чтобы обновить значение v-model компонента при изменении значения поля ввода (с классом form-input).
```
watch(inputValue, (newValue) => {
  emit("update:modelValue", newValue);
});
```
Этот код использует функцию watch для наблюдения за изменениями реактивной переменной inputValue. При изменении значения оно отправляет событие с новым значением, чтобы обновить привязку v-model в родительском компоненте.
Сохраните изменения в файле FormInput.js.

Реализация функции is_email

В этом шаге вы научитесь реализовывать функцию is_email в файле util.js для валидации адреса электронной почты.

Откройте файл util.js, расположенный в директории js.
В функции is_email найдите раздел TODO для цели 2.
Реализуйте логику для валидации адреса электронной почты в соответствии с предоставленными требованиями:
- Адрес электронной почты должен быть от 6 до 20 символов в длину.
- Адрес электронной почты должен состоять из части имени пользователя и части домена, разделенных символом @.
- Часть имени пользователя должна быть не менее 1 символа в длину и может содержать цифры или буквы.
- Часть домена должна содержать точку в середине, а часть перед точкой должна быть не менее 1 символа в длину, в то время как часть после точки должна быть от 2 до 4 буквами.
Вот пример реализации:
```
const is_email = (val) => {
  const emailRegex = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+.[a-zA-Z]{2,4}$/;
  return emailRegex.test(val);
};
```
Сохраните изменения в файле util.js.

Реализация функции validateForm

В этом шаге вы научитесь реализовывать функцию validateForm в файле FormValidator.js для валидации данных формы.

Откройте файл FormValidator.js, расположенный в директории components.
В функции validateForm найдите раздел TODO для цели 3.

Реализуйте логику для валидации данных формы на основе предоставленного объекта formRules. Валидация должна соответствовать следующим правилам:

Если поле nickname пусто, добавьте сообщение об ошибке в объект errors с ключом "nickname".
Для поля email:

Если поле пусто, добавьте сообщение об ошибке в объект errors с ключом "email".
Если адрес электронной почты не соответствует правилам или не находится в правильном диапазоне длины, добавьте сообщение об ошибке в объект errors с ключом "email".

Вот пример реализации:

const validateForm = () => {
  return new Promise((resolve, reject) => {
    errors.value = {}; // Очистить предыдущее сообщение об ошибке

    // Валидировать никнейм
    try {
      props.rules.nickname.map((item) => {
        item?.validator(null, props.formData.nickname, (err) => {
          if (err) {
            throw "nickname|" + err.message;
          }
        });
      });
    } catch (e) {
      const parseErr = e.split("|"),
        errKey = parseErr[0],
        errValue = parseErr[1];
      errors.value[errKey] = errValue;
    }

    // Валидировать email
    try {
      props.rules.email.map((item) => {
        if (item?.required) {
          if (props.formData.email == "") throw "email|" + item.message;
        }
        if (item?.type) {
          if (!validateByType(item.type, props.formData.email))
            throw "email|" + item.message;
          if (props.formData.email.length < 6) throw "email|" + item.message;
          if (props.formData.email.length > 20)
            throw "email|" + item.message;
        }
      });
    } catch (e) {
      const parseErr = e.split("|"),
        errKey = parseErr[0],
        errValue = parseErr[1];
      errors.value[errKey] = errValue;
    }

    if (hasErrors.value) {
      resolve(false); // Ошибка существует, валидация не пройдена
    } else {
      resolve(true);
    }

    emit("valid", errors.value);
  });
};

Сохраните изменения в файле FormValidator.js.

Поздравляем! Теперь вы завершили реализацию пользовательского валидатора форм. Теперь вы можете протестировать приложение, запустив проект и взаимодействуя с формой. Завершенный эффект выглядит так:

Завершенный эффект

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.

Настройка пользовательской валидации форм с использованием Vue.js