Errors and warnings? Більше схожі на тих, хто псує вечірки! Коли ви вперше намагаєтесь створити пароль на новій роботі, а ІТ-шник дихає вам у спину, пам'ятаєте ті божевільні, але такі логічні правила? Я колись подумав, що розробка програмного забезпечення не для мене після того, як провалив створення пароля 15 разів — 12 символів, без повторюваних слів чи дат, і це зайняло 20 хвилин! Повідомлення про помилку було однаковим кожного разу, і хоча я розумію, це ж пароль після всього. Я точно не хочу, щоб хтось відчував себе дурнем, користуючись моїм додатком!
У цій статті ми оживляємо наш Vue проект з Vuelidate, щоб допомогти користувачам зрозуміти, чому вони не можуть рухатися далі, перетворюючи фрустрацію на захоплення!
Давайте поринемо в кроки, які нам потрібно зробити!
Встановлення Vuelidate
Спочатку виконайте наступну команду в терміналі вашого проекту:
npm install @vuelidate/core @vuelidate/validators
Створення компонента помилок
Далі давайте пильно стежити за значенням моделі, переконуючись, що вона танцює в ритмі правил валідації, які ми встановили в пропсі validationArgs.
Створення валідатора
Ці правила валідації як охоронці на вході в клуб вашого додатку, переконуючись, що всі дані форми одягнені, як слід, перед тим, як потрапити в базу даних. Вони створені для того, щоб забезпечити користувачам кращий досвід при збереженні чистоти даних!
import { required, helpers } from '@vuelidate/validators';
const allowedCoffeeTypes = ['Espresso', 'Latte', 'Cappuccino', 'Americano', 'Mocha', 'Macchiato'];
const coffeeType = helpers.withMessage(
`Тип кави має бути одним з: ${allowedCoffeeTypes.join(', ')}`,
(value: string) => allowedCoffeeTypes.includes(value)
);
export const coffeeReviewValidator = (store: any) => {
return {
coffeeType: { coffeeType },
texture: { required: helpers.withMessage("Вкажіть текстуру", required) },
taste: { required: helpers.withMessage("Вкажіть смак", required) },
aroma: { required: helpers.withMessage("Вкажіть аромат", required) },
notes: { },
cost: { required: helpers.withMessage("Вкажіть вартість", required) },
rating: { },
termsAndConditions: { required: helpers.withMessage("Необхідно погодитись з умовами", required) },
};
};
};
Додавання пропсів помилок до наших компонентів
Подивіться, як ми додаємо компонент помилок — ось цей :validation пропс? Він отримує VIP-пропуск прямо з пропса валідації в нашому input.vue. Це як безкоштовний доступ до закулісся для обробки помилок!
Ми додали цей новий пропс до нашого text.vue:
validation?: ValidationArgs
Та-да! Ось наш оновлений компонент — погляньте, як майстерно ми створили цей інпут.
Помилки та попередження? Більше схожі на тих, хто псує вечірки! Коли ви вперше намагаєтесь створити пароль на новій роботі, а ІТ-шник дихає вам у спину, пам'ятаєте ті божевільні, але такі логічні правила? Я колись подумав, що розробка програмного забезпечення не для мене після того, як провалив створення пароля 15 разів — 12 символів, без повторюваних слів чи дат, і це зайняло 20 хвилин! Повідомлення про помилку було однаковим кожного разу, і хоча я розумію, це ж пароль після всього. Я точно не хочу, щоб хтось відчував себе дурнем, користуючись моїм додатком!
У цій статті ми оживляємо наш Vue проект з Vuelidate, щоб допомогти користувачам зрозуміти, чому вони не можуть рухатися далі, перетворюючи фрустрацію на захоплення!
Давайте поринемо в кроки, які нам потрібно зробити!
Встановлення Vuelidate
Спочатку виконайте наступну команду в терміналі вашого проекту:
npm install @vuelidate/core @vuelidate/validators
Створення компонента помилок
Далі давайте пильно стежити за значенням моделі, переконуючись, що вона танцює в ритмі правил валідації, які ми встановили в пропсі validationArgs.
Створення валідатора
Ці правила валідації як охоронці на вході в клуб вашого додатку, переконуючись, що всі дані форми одягнені, як слід, перед тим, як потрапити в базу даних. Вони створені для того, щоб забезпечити користувачам кращий досвід при збереженні чистоти даних!
import { required, helpers } from '@vuelidate/validators';
const allowedCoffeeTypes = ['Espresso', 'Latte', 'Cappuccino', 'Americano', 'Mocha', 'Macchiato'];
const coffeeType = helpers.withMessage(
`Тип кави має бути одним з: ${allowedCoffeeTypes.join(', ')}`,
(value: string) => allowedCoffeeTypes.includes(value)
);
export const coffeeReviewValidator = (store: any) => {
return {
coffeeType: { coffeeType },
texture: { required: helpers.withMessage("Вкажіть текстуру", required) },
taste: { required: helpers.withMessage("Вкажіть смак", required) },
aroma: { required: helpers.withMessage("Вкажіть аромат", required) },
notes: { },
cost: { required: helpers.withMessage("Вкажіть вартість", required) },
rating: { },
termsAndConditions: { required: helpers.withMessage("Необхідно погодитись з умовами", required) },
};
};
};
Додавання пропсів помилок до наших компонентів
Подивіться, як ми додаємо компонент помилок — ось цей :validation пропс? Він отримує VIP-пропуск прямо з пропса валідації в нашому input.vue. Це як безкоштовний доступ до закулісся для обробки помилок!
Ми додали цей новий пропс до нашого text.vue:
validation?: ValidationArgs
Та-да! Ось наш оновлений компонент — погляньте, як майстерно ми створили цей інпут.
Це як спостерігати за шеф-кухарем, який ідеально прикрашає страву:
Додавання валідатора до Coffee.vue
Тепер, коли ви додаєте наш компонент текстового введення, ви можете додати валідатор з того першого блоку коду. Це як додавання секретного інгредієнта до рецепту бездоганної обробки форм!
Тестуємо!
Чудово, тепер, коли логіка на місці, можемо провести деякі налаштування офлайн. Перегляньте прогрес на формі огляду кави, натиснувши тут.
[
GitHub - DanielPaulWilkinson/vue-component-libary
Сприяйте розвитку DanielPaulWilkinson/vue-component-libary, створивши акаунт на GitHub.
github.com
](https://github.com/DanielPaulWilkinson/vue-component-libary?source=post_page-----ecd10d60e843--------------------------------)
Як завжди, коментуйте будь-які покращення, які у вас є, бо я завжди розвиваюсь. Не забувайте ставити лайки та підписуватись на більше контенту про Vue!
Це як спостерігати за шеф-кухарем, який ідеально прикрашає страву:
Додавання валідатора до Coffee.vue
Тепер, коли ви додаєте наш компонент текстового введення, ви можете додати валідатор з того першого блоку коду. Це як додавання секретного інгредієнта до рецепту бездоганної обробки форм!
Тестуємо!
Чудово, тепер, коли логіка на місці, можемо провести деякі налаштування офлайн. Перегляньте прогрес на формі огляду кави, натиснувши тут.
[
GitHub - DanielPaulWilkinson/vue-component-libary
Сприяйте розвитку DanielPaulWilkinson/vue-component-libary, створивши акаунт на GitHub.
github.com
](https://github.com/DanielPaulWilkinson/vue-component-libary?source=post_page-----ecd10d60e843--------------------------------)
Як завжди, коментуйте будь-які покращення, які у вас є, бо я завжди розвиваюсь. Не забувайте ставити лайки та підписуватись на більше контенту про Vue!
Перекладено з: Elevate Your Vue 3 Forms: Seamlessly Integrating an Error Component with the Composition API