Веб-формы стали неотъемлемой частью веб-приложений. Они часто используется для сбора такой информации о пользователе, как имя, адрес электронной почты, местоположение, возраст и т. д. Но вполне возможно, что какой-то пользователь может ввести данные не в том формате, в котором вы ожидаете.
Чтобы сэкономить время и избежать ненужной нагрузки на ресурсы вашего сервера, вы можете проверить данные формы на стороне клиента (то есть в системе пользователя), используя JavaScript, прежде чем передавать их на веб-сервер для дальнейшей обработки.
Проверка на стороне клиента также полезна для создания лучшего пользовательского взаимодействия; она быстрее, потому что проверка происходит в веб-браузере пользователя, тогда как проверка на стороне сервера происходит на сервере, который требует, чтобы вводимые пользователем данные были сначала отправлены на сервер, где происходит обработка; пользователь также должен дождаться ответа сервера, чтобы узнать, что именно пошло не так.
В этом разделе мы более подробно рассмотрим, как выполнять валидацию форм на JavaScript и обрабатывать любые ошибки ввода.
Проверка на стороне клиента не является заменой или альтернативой проверке на стороне сервера. Вы должны всегда проверять данные формы на стороне сервера, даже если они уже проверены на стороне клиента, потому что пользователь может отключить JavaScript в своем браузере.
Проверка формы с помощью JavaScript
Процесс проверки формы обычно состоит из двух частей — проверки обязательных полей и проверки формата данных, которая выполняется для обеспечения того, чтобы тип и формат данных, введенных в форму был валидным.
Что ж, давайте посмотрим как это работает.
Создание HTML-формы
Давайте сначала создадим простую HTML-форму, которую мы будем проверять на стороне клиента, используя JavaScript, когда пользователь нажимает кнопку отправки (submit). Для этого создадим HTML-файл с именем application-form.html
и поместим в него следующий код, а затем сохраним его где-нибудь в вашей системе.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple HTML Form</title>
<link rel="stylesheet" href="style.css">
<script src="validator.js"></script>
</head>
<body>
<form name="contactForm" onsubmit="return validateForm()" action="confirmation.php" method="post">
<h2>Форма заявки</h2>
<div class="row">
<label>Имя</label>
<input type="text" name="name">
<div class="error" id="nameErr"></div>
</div>
<div class="row">
<label>Email</label>
<input type="text" name="email">
<div class="error" id="emailErr"></div>
</div>
<div class="row">
<label>Номер телефона</label>
<input type="text" name="mobile" maxlength="10">
<div class="error" id="mobileErr"></div>
</div>
<div class="row">
<label>Страна</label>
<select name="country">
<option>Select</option>
<option>Australia</option>
<option>India</option>
<option>United States</option>
<option>United Kingdom</option>
</select>
<div class="error" id="countryErr"></div>
</div>
<div class="row">
<label>Пол</label>
<div class="form-inline">
<label><input type="radio" name="gender" value="male">Мужской</label>
<label><input type="radio" name="gender" value="female">Женский</label>
</div>
<div class="error" id="genderErr"></div>
</div>
<div class="row">
<label>Хобби <i>(не обязательно)</i></label>
<div class="form-inline">
<label><input type="checkbox" name="hobbies[]" value="sports">Спорт</label>
<label><input type="checkbox" name="hobbies[]" value="movies">Кино</label>
<label><input type="checkbox" name="hobbies[]" value="music">Музыка</label>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</body>
</html>
Создание скрипта валидации формы
Теперь мы собираемся создать файл JavaScript, который содержит наш полный скрипт проверки.
Что ж, давайте создадим файл JavaScript с именем validator.js
и поместим в него следующий код, а затем сохраним его в том же месте, где вы сохранили предыдущий HTML-файл. Просмотрите каждую строку следующего примера кода, чтобы понять, как работает проверка JavaScript:
// Определяем функции для отображения сообщения об ошибке
function printError(elemId, hintMsg) {
document.getElementById(elemId).innerHTML = hintMsg;
}
// Определяем функции для проверки формы
function validateForm() {
// Получение значений элементов формы
var name = document.contactForm.name.value;
var email = document.contactForm.email.value;
var mobile = document.contactForm.mobile.value;
var country = document.contactForm.country.value;
var gender = document.contactForm.gender.value;
var hobbies = [];
var checkboxes = document.getElementsByName("hobbies[]");
for(var i=0; i < checkboxes.length; i++) {
if(checkboxes[i].checked) {
// Заполняем массив хобби выбранными значениями
hobbies.push(checkboxes[i].value);
}
}
// Определяем переменные ошибок со значением по умолчанию
var nameErr = emailErr = mobileErr = countryErr = genderErr = true;
// Проверяем имя
if(name == "") {
printError("nameErr", "Пожалуйста, введите ваше имя");
} else {
var regex = /^[a-zA-Z\s]+$/;
if(regex.test(name) === false) {
printError("nameErr", "Пожалуйста, введите правильное имя");
} else {
printError("nameErr", "");
nameErr = false;
}
}
// Проверяем адрес электронной почты
if(email == "") {
printError("emailErr", "Пожалуйста, введите адрес вашей электронной почты");
} else {
// Регулярное выражение для базовой проверки электронной почты
var regex = /^\S+@\S+\.\S+$/;
if(regex.test(email) === false) {
printError("emailErr", "Пожалуйста, введите действительный адрес электронной почты");
} else{
printError("emailErr", "");
emailErr = false;
}
}
// Проверяем номер мобильного телефона
if(mobile == "") {
printError("mobileErr", "Пожалуйста, введите номер вашего мобильного телефона");
} else {
var regex = /^[1-9]\d{9}$/;
if(regex.test(mobile) === false) {
printError("mobileErr", "Пожалуйста, введите действительный 10-значный номер мобильного телефона");
} else{
printError("mobileErr", "");
mobileErr = false;
}
}
// Проверяем страну
if(country == "Select") {
printError("countryErr", "Пожалуйста, выберите вашу страну");
} else {
printError("countryErr", "");
countryErr = false;
}
// Проверяем пол
if(gender == "") {
printError("genderErr", "Пожалуйста, выберите ваш пол");
} else {
printError("genderErr", "");
genderErr = false;
}
// Запрещаем отправку формы в случае ошибок
if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) {
return false;
} else {
// Создаем строки из входных данных для предварительного просмотра
var dataPreview = "Вы ввели следующие данные: \n" +
"Имя: " + name + "\n" +
"Email: " + email + "\n" +
"Номер: " + mobile + "\n" +
"Страна: " + country + "\n" +
"Пол: " + gender + "\n";
if(hobbies.length) {
dataPreview += "Hobbies: " + hobbies.join(", ");
}
// Отображаем входные данные в диалоговом окне перед отправкой формы
alert(dataPreview);
}
};
Доступ к значению отдельного поля формы можно получить с помощью синтаксиса document.formName.fieldName.value
или document.getElementsByName(name).value
. Но, чтобы получить значения из поля формы, которое поддерживает множественный выбор, например, группу чекбоксов, вам нужно использовать оператор цикла, как показано в примере выше (строки с 14 по 21).
Чтобы проверить, является ли формат входных данных правильным или нет, мы должны использовать регулярные выражения. Это один из наиболее эффективных методов проверки пользовательских данных.
Вышеприведенный скрипт также отображает данные, введенные пользователем в диалоговом окне для предварительного просмотра перед отправкой формы на веб-сервер.
Вы можете проверить формат электронной почты с помощью регулярного выражения. Но пользователь может ввести адрес электронной почты, который правильно отформатирован, но не существует. Поэтому для проверки подлинности электронной почты отправьте пользователю электронное письмо с подтверждением и убедитесь, что электронное письмо действительно существует.
Добавление стилей для формы
Наконец, создайте файл с именем style.css
и поместите в него следующий код, затем сохраните его также в том же месте, где вы сохранили два предыдущих файла. Это правила для визуального оформления нашей формы.
body {
font-size: 16px;
background: #f9f9f9;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
h2 {
text-align: center;
text-decoration: underline;
}
form {
width: 300px;
background: #fff;
padding: 15px 40px 40px;
border: 1px solid #ccc;
margin: 50px auto 0;
border-radius: 5px;
}
label {
display: block;
margin-bottom: 5px
}
label i {
color: #999;
font-size: 80%;
}
input, select {
border: 1px solid #ccc;
padding: 10px;
display: block;
width: 100%;
box-sizing: border-box;
border-radius: 2px;
}
.row {
padding-bottom: 10px;
}
.form-inline {
border: 1px solid #ccc;
padding: 8px 10px 4px;
border-radius: 2px;
}
.form-inline label, .form-inline input {
display: inline-block;
width: auto;
padding-right: 15px;
}
.error {
color: red;
font-size: 90%;
}
input[type="submit"] {
font-size: 110%;
font-weight: 100;
background: #006dcc;
border-color: #016BC1;
box-shadow: 0 3px 0 #0165b6;
color: #fff;
margin-top: 10px;
cursor: pointer;
}
input[type="submit"]:hover {
background: #0165b6;
}
Теперь откройте файл application-form.html
в веб-браузере и попробуйте заполнить некоторые данные и посмотреть, как скрипт реагирует на ввод недопустимых данных в поле формы.
Чтобы узнать о проверке на стороне сервера, ознакомьтесь с Руководством по валидации форм в PHP.