тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Валидация инпутов на JavaScript

В данном видео я покажу вам реализацию валидации инпутов. В нашей реализации мы каждому инпуту с помощью атрибута data-rule будем добавлять свое правило валидации, а затем при потери фокуса в инпуте проверять введенные данные на корректность.

Исходники кода

input[data-rule].valid { border: 1px solid green; } .invalid { border: 1px solid red; } <form> <input data-rule="length" data-from="3" data-to="5"><br><br> <input data-rule="number"><br><br> <input data-rule="email"><br><br> <input data-rule="domain"> </form> let inputs = document.querySelectorAll('input[data-rule]'); for (let input of inputs) { input.addEventListener('blur', function() { let rule = this.dataset.rule; let value = this.value; let check; switch (rule) { case 'length': let length = value.length; let from = +this.dataset.from; let to = +this.dataset.to; check = length >= from && length <= to; break; case 'number': check = /^\d+$/.test(value); break; case 'email': break; case 'domain': break; } this.classList.remove('invalid'); this.classList.remove('valid'); if (check) { this.classList.add('valid'); } else { this.classList.add('invalid'); } }); }