Нативная валидация

Валидация форм это всегда попаболь. Особенно это печально тем, что о нативной валидации мало кто знает и ее сложно или порой невозможно кастомизировать. И вот один из довольно старых методов кастомизации - setCustomValidity.

Сам узнал о не из этой статьи - https://expressionstatement.com/html-form-validation-is-heavily-underused

Тут очень много примеров на реакте, но всё это так же легко пишется и на vue.

Метод очень простой - мы сетим строку ошибки когда нам это нужно и сетим пустую строку, если считаем что всё валидно. Строка ошибки выведется нативным способ как на скрине. Таже сам input будет иметь состояние :invalid и на это можно удобно навесить стили в css.