Валидация данных вносимых в формы

Валидация данных внесенных в формы на страницах — важная задача, решение которой ложится на плечи разработчика. Если не проверять данные вводимые в формы, то возможны последствия различной степени тяжести — от некорректно работающих скриптов, до sql-инъекций, которые выведут из строя работающий сайт.

На прошлой паре мы познакомились с различными способами валидации на стороне клиента. Давайте применем полученные знания для валидации данных вводимых в две формы Интернет-магазина. Для начала рассмотрим файл, который отвечает за корзину пользователя.

Корзина пользователя представлена файлов basket.php внутри которого клиент может ввести свой email и получить письмо с описанием покупки в свой почтовый ящик. Также, письмо дублируется администратору сайта.

Дополните форму покупки

Задание 1. Добавьте в форму отправки сообщений поля:

  • Фамилия и имя — name=fio
  • email — name=email
  • Телефон — name=phone
  • Адрес — name=address
  • Способ оплаты — radiobutton, name=oplata

Задание 2. Модифицируйте скрипт basket.php отправки сообщения email о покупке таким образом, чтобы в письме отображалась информация из формы: Фамилия и имя, почта, телефон, адрес, способ оплаты.

Выполним валидацию данных которые пользователь вводит при покупке.

Валидация данных с помощью JS

Рассмотрим пример функции:

1
2
3
4
5
6
7
function validateForm() {
    var" "x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("Name must be filled out");
        return false;
    }
}

Данный код проверяет наличие у формы с именем myForm элемента input с именем fname и для него проверяет равно ли значение Null или не введено.

Вызовем данную функцию в форме:

1
2
3
4
	<form name="myForm" action="demo_form.php" onsubmit="return validateForm(myForm)" method="post">
	Name: <input type="text" name="fname">
	<input type="submit" value="Submit">
	</form>

Таким образом, форма будет выводить ошибку при попытке ее отправить, если не введены данные.

Не забывайте за великолепный атрибут required который помечает заполнение input как обязательного.

Рассмотрим валидацию форма на примере проверки поля отвечающего за email адрес. Адрес почты состоит из двух частей, которые разделены символом «@». Шаблон можно представить как имя_пользователя@домен. Ограничим имя пользователя символами латинского алфавита (a-z)и цифрами (0-9). Также, для почты часто применяют символы точки, дефиса и подчеркивания.

Введем ограничения: имя не может начинаться и заканчиваться точкой, дефисом. Домен первого уровня должен быть не больше четырех символов (com, info, biz). Отдельно стоят домены музеев — museum (6 символов).

Напишем функцию, которая будет проверять с помощью регулярных выражений введенные в поля данные:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function validateForm(obj)
{
  var result;
  var adr=obj.email.value;
  alert (adr);
  var adr_pattern=/^([a-z0-9_\-]+\.)*[a-z0-9_\-]+@([a-z0-9][a-z0-9\-]*[a-z0-9]\.)+[a-z]{2,4}$/i;
  var prov=adr_pattern.test(adr);
	if (prov==true ) {
	alert("Вы зарегистрированы!");
	result=true; 
	} else {
	alert("Введенные данные некорректны!");
	result=false; 
	}
return result;
}

Давайте рассмотрим, что делает данная форма. Она считывает значение input с name=email. После чего сравнивает его с шаблоном adr_pattern. Сравнение ведется с помощью команды var prov=adr_pattern.test(adr); которая возвращает логическое значение в зависимости от введенных данных. Если данные совпадают с шаблоном, то true, если нет — false.

В зависимости от результата работы форма либо отправляется, либо нет.

See the Pen Валидация формы регулярными выражениями by Alex (@Asmodey) on CodePen.

Задание

Задание 3. Добавьте js файл validation_basket.js который будет проверять правильность вводимых данных в поле email.

Задание 4. Проверьте, есть ли необходимость проверки события, когда пользователь не ввел данные, данная проверка описана выше. Если данная проверка необходима — реализуйте ее.

Шаблоны для проверки данных

Рассмотрим основные шаблоны для проверки данных:

  • Номер кредитки: [0-9]{13,16}
  • Набор из букв и цифр (латиница): ^[a-zA-Z0-9]+$
  • Набор из букв и цифр (латиница + кириллица): ^[а-яА-ЯёЁa-zA-Z0-9]+$
  • Домен (например abcd.com): ^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}$
  • Имя пользователя (с ограничением 2-20 символов, которыми могут быть буквы и цифры, первый символ обязательно буква): ^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$
  • Пароль (Строчные и прописные латинские буквы, цифры): ^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$
  • Пароль (Строчные и прописные латинские буквы, цифры, спецсимволы. Минимум 8 символов): (?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$
  • Целые числа и числа с плавающей точкой (разделитель точка): \-?\d+(\.\d{0,})?

Задание 5. Выполните валидацию остальных полей в форме отправки заказа скрипта basket.php.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *