Проверка ввода данных

---

Нет комментариев.

---

Пример: для программ типа калькулятора нужно вводить числа, чтобы производить с ними различные вычисления и нужна проверка (валидация) на то, что пользователь ввёл числа, а не буквы или символы.

Для ввода данных служит элемент input, у него и будем проверять валидацию.

Валидация input через HTML происходит с помощью атрибута pattern.

Примеры атрибута "pattern"

<label>
<p>Введите число</p>
<input type="text" title="Используйте числовой формат" pattern="^[0-9]+$">
</label>

<label>
<p>Введите число от 1 до 9</p>
<input type="text" title="Введите число от 1 до 9" pattern="[1-9]">
</label>

<label>
<p>Введите не более 5 цифр</p>
<input type="text" title="Разрешено не более 5 цифр" pattern="[0-9]{1,5}">
</label>

<label>
<p>Введите от 7 до 9 цифр</p>
<input type="text" title="Разрешено от 7 до 9 цифр" pattern="[0-9]{7,9}">
</label>

<label>
<p>Только русские слова</p>
<input
type="text"
title="Разрешено использовать только пробелы и русские буквы"
pattern="^[А-Яа-яЁё\s]+$"
/>
</label>
<label>
<p>Только латинские слова</p>
<input
type="text"
title="Разрешено использовать только пробелы и латинские буквы"
pattern="^[a-zA-Z\s]+$">
</label>

<label>
<p>Только русские или латинские слова с пробелами, не менее 6 символов</p>
<input
type="text"
title="Разрешено использовать только пробелы и русские или латинские буквы, не менее 6"
pattern="^[A-Za-zА-Яа-яЁё\s]{6,}">
</label>
<label>
<p>Введите телефон в формате: +7 (777) 777-77-77 (Россия)</p>
<input
type="tel"
title="Используйте формат: +7 (777) 777-77-77"
pattern="[+]7\s[\(]\d{3}[\)]\s\d{3}[\-]\d{2}[\-]\d{2}">
</label>


Атрибут required делает заполнение поля обязательным.

Атрибуты minlength, maxlength задаёт минимальное и (или) максимальное допустимое количество символов. Например minlength="6".

Пример валидации на HTML

<label>
<p>Введите число ОТ 10 ДО 999 </p>
<input type="text" title="Используйте числовой формат" minlength="2" maxlength="3" required pattern="^[0-9]+$">
</label>

Использование CSS при валидации

/* Верный ввод */
input:valid {
border-color: green;
color: green;
box-shadow: none;
}
/* Не верный ввод */
input:invalid {
border-color: red;
color: red;
box-shadow: none;
}
/* Верный ввод при фокусе */
input:focus:valid {
border-color: green;
color: green;
box-shadow: none;
}
/* Не верный ввод при фокусе */
input:focus:invalid {
border-color: red;
color: red;
box-shadow: none;
}
/* Верный ввод при фокусе обязательного input */
input:focus:required:valid {
border-color: green;
color: green;
box-shadow: none;
}
/* Не верный ввод при фокусе обязательного input */
input:focus:required:invalid {
border-color: red;
color: red;
box-shadow: none;
}


Введите число ОТ 10 ДО 999

Введите что нибудь и щёлкните вне элемента INPUT.

Элемент подсвечивается красным если он пустой или ввод не валидный, в нашем случае в атрибуте pattern задан ввод только чисел, любой символ или буква будет подсвечивать красным, сообщая об ошибке.

Пустое поле подсвечивает красным цветом атрибут required который сигнализирует что поле обязательно для заполнения.

Атрибуты minlength="2" maxlength="3" следят за тем, чтобы было введено от двух до трёх символов. Один символ, подсветка останется красной. Больше трёх символов ввести не удаться.

При правильном вводе, красная подсветка исчезнет, а введённые числа станут зелёными.

Пример валидации на JavaScript

Проверка заполнения формы

JavaScript


function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Необходимо ввести имя");
return false;
}
}


html


<form name="myForm" action="//cwmax.ru/blog/validation.php" onsubmit="return validateForm()" method="post">
Имя: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>


Пример

Имя:

Проверка ввода чисел

JavaScript


function myFunction() {
var x;
var text = "Все в порядке";

x = document.getElementById("numb").value;

if (isNaN(x) || x < 1 || x > 10) {
text = "Ввод не верен";
}
document.getElementById("demo").innerHTML = text;
}


html


<p>Введите число от 1 до 10</p>
<input type="text" id="numb" required>
<button type="button" onclick="myFunction()">Ввод</button>
<p id="demo"></p>


Пример

Введите число от 1 до 10

Ввод

Необычный способ проверки валидности email.

JavaScript


function myFunction() {
const email = document.getElementById("mail");

email.addEventListener("input", function (event) {
if (email.validity.typeMismatch) {
email.setCustomValidity("Введите корректный email");
} else {
email.setCustomValidity("");
}
});


html


<form>
<label for="mail">Email</label>
<input type="email" id="mail" name="mail">
<button>Submit</button>
</form>


Пример

Email Submit

Остальные проверки валидации на JS


var regex = /^[a-zA-Z\s]+$/;
if(regex.test(name) === false) {
printError("nameErr", "Пожалуйста, введите правильное имя");

var regex = /^[1-9]\d{9}$/;
if(regex.test(mobile) === false) {
printError("mobileErr", "Пожалуйста, введите действительный 10-значный номер мобильного телефона");
}