Всем привет. Подскажите best practies по работе с инпутами и

Question

Всем привет. Подскажите best practies по работе с инпутами и

их валидацией через vue.
Хочу сделать ограничения инпутов по длине и другим условиям.
В данный момент стоит просто валидация: [если не выполняется какое-то условие] - input красный, пользователь видит сообщение что не так с инпутом.

Подумываю может стоит сделать явно лимит без возможности вводить данные если какое-то условие не выполняется, например: лимит более 10 символов? не вводим данные.
Правда, меня напрягает то что вместо v-model="inputValue" скорее всего, придется перевести на формат:

// input template
:value="inputValue" @input="onInput"
// script
function onInput (e) {if (condition) ) inputValue.value = e.target.value }

- стоит ли делать вообще так?
- может есть какие-то best practies / статья именно по этой теме?
- vue3

#programming #russian #vue.js

0

30.08.2022

11 ответов

28 просмотров

Black_Yuzia Yuzia Автор вопроса

Артем 🇺🇦 Бондаренко
Сложна. Есть пара общепринятых либок (vuelidate, v...

а у vuealidate и/или vee-validate есть возможность ограничивать ввод данных?

0

30.08.2022

Дмитрий Кузнецов

Лучше написать в красном сообщении (или тултип) о том что введите от x до y, разрешенные символы такие-то. Это лучше чем насильно обрезать имхо. Например, большая часть инпутов для телефонов ломается при автозаполнении, и это люто бесит, когда вставляешь из буфера, а оно само «+78926…»

0

30.08.2022

Black_Yuzia Yuzia Автор вопроса

Дмитрий Кузнецов
Лучше написать в красном сообщении (или тултип) о ...

а, ну может

0

30.08.2022

Nikita Vologzhin

Валидировать итоговую строку можно на ивенте @keypress, который идет до @input. Если строка не соответствует условиям, то запускаем event.preventDefault()

0

30.08.2022

Дмитрий Кузнецов

Nikita Vologzhin
Валидировать итоговую строку можно на ивенте @keyp...

А оно на вставку мышкой (через контекстное меню) точно тригернет?)

0

30.08.2022

Black_Yuzia Yuzia Автор вопроса

Дмитрий Кузнецов
Лучше написать в красном сообщении (или тултип) о ...

Ну, тут еще нюанс есть. Вот есть например поле для ввода, а там формат: 2 буквы + 6 цифр Я бы сказал что удобно сразу ограничивать ввод, пропускать только 2 буквы, а потом 6 цифр, а буквы блочить

0

30.08.2022

Black_Yuzia Yuzia Автор вопроса

Nikita Vologzhin
Валидировать итоговую строку можно на ивенте @keyp...

гляну 👀

0

30.08.2022

Дмитрий Кузнецов

Black_Yuzia Yuzia
Ну, тут еще нюанс есть. Вот есть например поле для...

Такая техника гуглится по masked input, норм для всяких там купонов, серий паспортов

0

30.08.2022

Nikita Vologzhin

Дмитрий Кузнецов
А оно на вставку мышкой (через контекстное меню) т...

Должно, сейчас проверю

0

30.08.2022

Black_Yuzia Yuzia Автор вопроса

Дмитрий Кузнецов
Такая техника гуглится по masked input, норм для в...

да, как раз паспорт. Я так понимаю там просто указывается формат по типу: X{2}Y{6} (ну для примера чисто) и оно само ограничивает все?

0

30.08.2022

Артем 🇺🇦 Бондаренко · Accepted Answer

Сложна. Есть пара общепринятых либок (vuelidate, vee-validate) но как по мне «шо то …, шо это …, и это обе … такие что … я … … …» ((с) Эскобар). А если писать свои лесапеды, то кто-то точно наедит на то что исспользуюются не типовые решения, а городится свой огород🥲

169 похожих чатов

Всем привет. Подскажите best practies по работе с инпутами и

11 ответов

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