Валидация инпутов на 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');
		}
	});
}