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

Введение

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

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

🎯 Задачи

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

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

🏆 Достижения

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

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

Skills Graph

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

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

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

├── 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 при изменении значения поля ввода.

1. Откройте файл FormInput.js, расположенный в директории components.

2. В функции setup компонента FormInput найдите раздел TODO для цели 1.

3. Реализуйте код для вызова события, чтобы обновить значение v-model компонента при изменении значения поля ввода (с классом form-input).

   watch(inputValue, (newValue) => {
     emit("update:modelValue", newValue);
   });

   Этот код использует функцию watch для наблюдения за изменениями реактивной переменной inputValue. При изменении значения оно отправляет событие с новым значением, чтобы обновить привязку v-model в родительском компоненте.

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

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

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

1. Откройте файл util.js, расположенный в директории js.

2. В функции is_email найдите раздел TODO для цели 2.

3. Реализуйте логику для валидации адреса электронной почты в соответствии с предоставленными требованиями:

   • Адрес электронной почты должен быть от 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);
   };

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

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

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

1. Откройте файл FormValidator.js, расположенный в директории components.

2. В функции validateForm найдите раздел TODO для цели 3.

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

   1. Если поле nickname пусто, добавьте сообщение об ошибке в объект errors с ключом "nickname".
   2. Для поля 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);
     });
   };

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

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

Резюме

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