Регулярное выражение для валидации номера телефона

I would also suggest looking at the «libphonenumber» Google Library. I know it is not regex but it does exactly what you want.

For example, it will recognize that:

15555555555

is a possible number but not a valid number. It also supports countries outside the US.

Highlights of functionality:

  • Parsing/formatting/validating phone numbers for all countries/regions of the world.
  • getNumberType — gets the type of the number based on the number itself; able to distinguish Fixed-line, Mobile, Toll-free, Premium Rate, Shared Cost, VoIP and Personal Numbers (whenever feasible).
  • isNumberMatch — gets a confidence level on whether two numbers could be the same.
  • getExampleNumber/getExampleNumberByType — provides valid example numbers for all countries/regions, with the option of specifying which type of example phone number is needed.
  • isPossibleNumber — quickly guessing whether a number is a possible phonenumber by using only the length information, much faster than a full validation.
  • isValidNumber — full validation of a phone number for a region using length and prefix information.
  • AsYouTypeFormatter — formats phone numbers on-the-fly when users enter each digit.
  • findNumbers — finds numbers in text input.
  • PhoneNumberOfflineGeocoder — provides geographical information related to a phone number.

Examples

The biggest problem with phone number validation is it is very culturally dependant.

  • America
    • (408) 974–2042 is a valid US number
    • (999) 974–2042 is not a valid US number
  • Australia
    • 0404 999 999 is a valid Australian number
    • (02) 9999 9999 is also a valid Australian number
    • (09) 9999 9999 is not a valid Australian number

A regular expression is fine for checking the format of a phone number, but it’s not really going to be able to check the validity of a phone number.

I would suggest skipping a simple regular expression to test your phone number against, and using a library such as Google’s libphonenumber (link to GitHub project).

Introducing libphonenumber!

Using one of your more complex examples, 1-234-567-8901 x1234, you get the following data out of libphonenumber (link to online demo):

Validation Results

Result from isPossibleNumber()  true
Result from isValidNumber()     true

Formatting Results:

E164 format                    +12345678901
Original format                (234) 567-8901 ext. 123
National format                (234) 567-8901 ext. 123
International format           +1 234-567-8901 ext. 123
Out-of-country format from US  1 (234) 567-8901 ext. 123
Out-of-country format from CH  00 1 234-567-8901 ext. 123

So not only do you learn if the phone number is valid (which it is), but you also get consistent phone number formatting in your locale.

As a bonus, libphonenumber has a number of datasets to check the validity of phone numbers, as well, so checking a number such as +61299999999 (the international version of (02) 9999 9999) returns as a valid number with formatting:

Validation Results

Result from isPossibleNumber()  true
Result from isValidNumber()     true

Formatting Results

E164 format                    +61299999999
Original format                61 2 9999 9999
National format                (02) 9999 9999
International format           +61 2 9999 9999
Out-of-country format from US  011 61 2 9999 9999
Out-of-country format from CH  00 61 2 9999 9999

libphonenumber also gives you many additional benefits, such as grabbing the location that the phone number is detected as being, and also getting the time zone information from the phone number:

PhoneNumberOfflineGeocoder Results
Location        Australia

PhoneNumberToTimeZonesMapper Results
Time zone(s)    [Australia/Sydney]

But the invalid Australian phone number ((09) 9999 9999) returns that it is not a valid phone number.

Validation Results

Result from isPossibleNumber()  true
Result from isValidNumber()     false

Google’s version has code for Java and Javascript, but people have also implemented libraries for other languages that use the Google i18n phone number dataset:

  • PHP: https://github.com/giggsey/libphonenumber-for-php
  • Python: https://github.com/daviddrysdale/python-phonenumbers
  • Ruby: https://github.com/sstephenson/global_phone
  • C#: https://github.com/twcclegg/libphonenumber-csharp
  • Objective-C: https://github.com/iziz/libPhoneNumber-iOS
  • JavaScript: https://github.com/ruimarinho/google-libphonenumber
  • Elixir: https://github.com/socialpaymentsbv/ex_phone_number

Unless you are certain that you are always going to be accepting numbers from one locale, and they are always going to be in one format, I would heavily suggest not writing your own code for this, and using libphonenumber for validating and displaying phone numbers.

Источник

33 самые полезные регулярки с примерами использования для быстрого решения наиболее распространенных задач веб-разработки.

33 самые полезные регулярки для веб-разработчика

Пользовательские данные

1. Юзернейм

Стандартный формат юзернейма – цифры, строчные буквы, символы - и _. Разумная длина – от 3 до 16 знаков. В зависимости от ваших конкретных потребностей вы можете изменять набор символов (например, разрешить символ *) и длину строки.

/^[a-z0-9_-]{3,16}$/

JS:

re.test('normal_login-123'); // true
re.test('IncorrectLogin'); // false
re.test('inc*rrect_l*gin'); // false

Что используем:
Символы ^ и $ указывают на начало и конец строки, так что введенный юзернейм будет проверен на совпадение полностью от первого до последнего символа.

2. Валидация email

Проверка адреса электронной почты на корректность – одна из самых частых задач веб-разработчика. Без этого не обходятся ни разнообразные формы подписки, ни авторизация.

Для валидации email существует множество различных регулярок. Вот одна из них – не самая большая и не самая сложная, но достаточно точная для быстрой проверки адреса:

/^[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}$/i

JS:

re.test('correct-email@mail.com'); // true
re.test('CORRECT.email@mail123.com'); //true
re.test('incorrect-email@mail'); //false

Что используем:
Флаг i в регулярных выражений обеспечивает регистронезависимость сравнения.

3. Номер телефона

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

/^+?(d{1,3})?[- .]?(?(?:d{2,3}))?[- .]?ddd[- .]?dddd$/

JS:

re.test('(212) 348-2626'); // true
re.test('+1 832-393-1000'); // true
re.test('+1 202-456-11-11'); // false

Что используем:
Квантификатор ? соответствует одному предыдущему символу или его отсутствию.

4. Надёжность пароля

Часто встречаете на различных сервисах требование придумать сложный пароль? Кто и как определяет требуемую степень сложности? На самом деле, для этого есть некоторые стандарты: минимальная длина, разный регистр символов, наличие букв, цифр и специальных знаков.

Чтобы обеспечить ваших пользователей надежными паролями, можете воспользоваться вот таким выражением (или составить собственные регулярки со специфическими требованиями):

/^(?=.*[A-Z].*[A-Z])(?=.*[!@#$&*])(?=.*[0-9].*[0-9])(?=.*[a-z].*[a-z].*[a-z]).{8,}$/

JS:

re.test('qwerty'); // false
re.test('qwertyuiop'); // false
re.test('abcABC123$'); // true

Что используем:
Оператор ?= внутри скобочной группы позволяет искать совпадения «просматривая вперед» переданную строку и не включать найденный фрагмент в результирующий массив.

Подробнее о надежности паролей вы можете узнать из этого руководства.

5. Почтовый индекс (zip-code)

Формат почтового индекса, как и телефона, зависит от конкретного государства.

В России все просто: шесть цифр подряд без разделителей.

/^d{6}$/

Американский zip-code может состоять из 5 символов или в расширенном формате ZIP+4 – из 9.

/^d{5}(?:[-s]d{4})?$/

JS:

re.test('75457'); // true
re.test('98765-4321'); // true

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

6. Номер кредитной карты

Разумеется, при проверке номера платежной карты не стоит полагаться на регулярные выражения. Однако с их помощью вы можете сразу же отсеять очевидно неподходящие последовательности и не нагружать сервер лишним запросом.

С помощью вот такой длинной регулярки вы можете поддерживать сразу несколько платежных систем:

/^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35d{3})d{11})$/

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

Что используем:
Вертикальная черта | в регулярных выражениях обозначает альтернацию, то есть выбор одного варианта из нескольких.

Распространенные форматы

7. Начальные и конечные пробелы

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

/^[ s]+|[ s]+$/g

JS:

let str = " hello ";
console.log(str.length); // 7
str = str.replace(re, '');
console.log(str.length); // 5

Что используем:
Квантификатор + соответствует инструкции {1,} – один и более символов.

8. Дата

С датами приходится работать очень часто, а форматов записи у них великое множество. Прежде чем начинать обработку, имеет смысл проверить, соответствует ли вид переданной строки требуемому.

Вот такое регулярное выражение поддерживает несколько форматов дат – с полными и краткими числами (5-1-91 и 05-01-1991) и разными разделителями (точка, прямой или обратный слеш).

/^(?:(?:31(/|-|.)(?:0?[13578]|1[02]))1|(?:(?:29|30)(/|-|.)(?:0?[1,3-9]|1[0-2])2))(?:(?:1[6-9]|[2-9]d)?d{2})$|^(?:29(/|-|.)0?23(?:(?:(?:1[6-9]|[2-9]d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1d|2[0-8])(/|-|.)(?:(?:0?[1-9])|(?:1[0-2]))4(?:(?:1[6-9]|[2-9]d)?d{2})$/

Здесь учитываются даже високосные годы!

JS:

re.test('29-02-2000'); // true
re.test('29-02-2001'); // false

Что используем:
Последовательности вида 1, 2 и так далее – это обратные ссылки на скобочные группы, определяющие вид разделителя. Благодаря им можно отсеять даты с разными разделителями:

re.test('10-10/2010'); // false

9. IPv4

Адрес IP используется для идентификации конкретного компьютера в интернете Он состоит из четырех групп цифр (байтов), разделенных точками (192.0.2.235).

/b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)b/

Что используем:
Класс b означает «границу слова» и имеет нулевую ширину (то есть это не отдельный символ).

10. IPv6

IPv6 – это новый, более сложный синтаксис IP-протокола. Выражение для проверки на этот формат выглядит куда страшнее, хотя на самом деле разница заключается только в поддержке шестнадцатеричных чисел:

(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))

11. Base64

Base64 – достаточно распространенный формат кодирования бинарных данных, который часто используется, например, в email-рассылках.

Для валидации строки в этом формате можно использовать следующее регулярное выражение:

^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$

12. ISBN

ISBN – международная номенклатура для печатных книг. Номер может состоять из 10 (ISBN-10) или 13 цифр (ISBN-13). На самих книгах ISBN обычно разделен дефисами на несколько групп (код страны, издательства и самой книги), но для проверки и использования их следует удалять.

Это регулярное выражение позволяет проверить оба формата сразу:

/b(?:ISBN(?:: ?| ))?((?:97[89])?d{9}[dx])b/i

JS:

re.test('ISBN 9781106998966'); // true
re.test('1106998966'); // true
re.test('110699896x'); // true

Числа

13. Проверка на число

Очень простая проверка строки на число с помощью регулярок:

/^d{1,}$/

JS:

re.test('13'); // true
re.test('23yy'); // false

14. Разделитель разрядов

Задача разбить большое число на разряды по три цифры встречается в разработке довольно часто. Оказывается это очень легко сделать с помощью регулярок.

/d{1,3}(?=(d{3})+(?!d))/g

JS:

'1234567890'.replace(re, '$&,'); // 1,234,567,890

Что используем:
Комбинация $& в строке замены позволяет подставить найденную комбинацию.

15. Цена

Цены могут быть представлены во множестве различных форматов. Универсального регулярного выражения для них, скорее всего, не существует, но цену в долларах из строки извлечь очень просто.

Эта регулярка предполагает, что для разделения разрядов числа используются запятые, а дробная часть отделена точкой:

/($[0-9,]+(.[0-9]{2})?)/

JS:

let price = 'price $5,555.55'.match(re)[0]; '$5,555.55

Что используем:
Комбинация {2} означает, что символ из диапазона [0-9] должен быть повторен ровно 2 раза (дробная часть цены).

Файлы и URL

16. Сопоставить строку URL

Если вам необходимо проверить, является ли полученная строка URL-адресом, вы можете воспользоваться вот такой регуляркой:

/[-a-zA-Z0-9@:%_+.~#?&/=]{2,256}.[a-z]{2,4}b(/[-a-zA-Z0-9@:%_+.~#?&/=]*)?/gi

Она подойдет для адресов с различными протоколами (HTTP, HTTPS, FTP) и даже без протокола.

JS:

re.test('https://yandex.ru'); // true
re.test('yandex.ru'); // true
re.test('hello world'); // false

17. Извлечение домена

В URL-адресе много частей: протокол, домен, поддомены, путь к странице и строка запроса. С помощью регулярок можно отбросить все лишнее и получить только домен:

/https?://(?:[-w]+.)?([-w]+).w+(?:.w+)?/?.*/i

JS:

let domain = 'https://proglib.io'.match(re);
console.log(domain[1]); // proglib

Что используем:
Метод match возвращает объект с данными совпадения. Под индексом 1 в нем хранится совпадение, соответствующее первой скобочной группе.

18. Расширения

Одна строчка регулярного выражения позволяет быстро и просто получить расширение файла, с которым вам предстоит работать:

/^(?:.*.(?=(htm|html|class|js)$))?[^.]*$/i

JS:

let file1 = 'script.js'.match(re)[1]; // js
let file2 = 'hello'.match(re) [1]; // undefined

Разумеется, при необходимости сюда можно добавлять другие расширения.

19. Протокол

Иногда требуется извлечь протокол полученной ссылки. Регулярные выражения и тут облегчают жизнь:

/^([a-zA-Z]+):///

JS:

let protocol = 'https://proglib.io/'.match(re)[0]; // https

Социальные сети

20. Twitter

Имя пользователя Twitter:

/@([A-Za-z0-9_]{1,15})/

21. Facebook

URL аккаунта на Facebook:

/(?:http://)?(?:www.)?facebook.com/(?:(?:w)*#!/)?(?:pages/)?(?:[w-]*/)*([w-]*)/

22. YouTube

Получение ID видео на YouTube:

/https://(?:youtu.be/|(?:[a-z]{2,3}.)?youtube.com/watch(?:?|#!)v=)([w-]{11}).*/gi

JS:

re.exec('https://www.youtube.com/watch?v=JbgvaQ_rM4I')[1]; // JbgvaQ_rM4I

Что используем:
Метод exec объекта регулярного выражения работает почти так же, как метод match строки.

HTML и CSS

23. HEX-цвета

Веб-разработчику часто приходится иметь дело с цветами, заданными в шестнадцатеричном формате. Регулярки позволяют легко извлекать такие цвета из строки:

/#([a-fA-F]|[0-9]){3, 6}/

Крутой рецепт, правда? :)

24. Адрес изображения

Для получения адреса изображения обычно используется DOM-метод img.getAttribute('src'). Регулярки для этого применяются редко, но полезно все же знать их возможности:

/< *[img][^>]*[src] *= *["']{0,1}([^"' >]*)/

JS:

re.exec('<img src="image.png" alt="image1">')[1]; // image.png

25. CSS-свойства

Еще одна нетривиальная ситуация – получение свойств CSS с помощью регулярных выражений:

/s*[a-zA-Z-]+s*[:]{1}s[a-zA-Z0-9s.#]+[;]{1}/gm

JS:

let css = ` .element {
color: white;
background: black;
font-size: 16px;
}`
css.match(re);

Что используем:
Флаг m в регулярных выражениях включает многострочный режим.

26. HTML комментарии

А это очень полезная регулярка для удаления комментариев из HTML-кода:

/<!--(.*?)-->/

Что используем?
Символ ?, стоящий в регулярном выражении после другого квантификатора, переводит его в ленивый режим.

27. Title

Получить заголовок веб-страницы можно с помощью такого регулярного выражения:

/<title>([^<>]*?)</title>/

28. rel=«nofollow»

Важная SEO-задача, которую очень не хочется делать вручную, – добавление внешним ссылкам атрибута rel="nofollow". Обратимся к регулярным выражениям:

PHP:

$html = '<a href="https://site.com">site.com</a>,
      <a href="my-site.com">my-site.com</a>,
      <a href="https://site.com" rel="nofollow">site.com</a>';
$re = '/(<as*(?![^>]*brel=)([^>]*bhref="https?://[^"]+"))/';
$result = preg_replace($re, '$1 rel="nofollow"', $html);

Эта регулярка выбирает в тексте все ссылки с протоколом http/https без атрибута rel и добавляет его.

29. Медиа запросы

Если требуется проанализировать медиа-запросы CSS, воспользуйтесь этой регуляркой:

/@media([^{]+){([sS]+?})s*}/g

Что используем:
Класс s обозначает пробельный символ (а также таб и перевод строки), а класс S – наоборот, любой символ кроме пробельного.

30. Подсветка слов

Полезное выражение для поиска и выделения слов в тексте:

/b(ipsum)b/ig

JS:

let text = 'Lorem ipsum dolor, lorem ipsum dolor.';
text.replace(re, '<span style="background: yellow">$&</span>')

PHP:

$re = '/b(ipsum)b/i';
$text = 'Lorem ipsum dolor, lorem ipsum dolor.';
preg_replace($re, '<span style="background:#5fc9f6">1</span>', $text);

Разумеется, слово ipsum можно заменить на любое другое слово или словосочетание

Другие задачи веб-разработчика

31. Проверка версии Internet Explorer

К счастью, старый добрый IE постепенно уходит в прошлое, но он все же еще играет некоторую роль в современном вебе. Этот фрагмент кода позволяет определить версию всеми любимого браузера:

/^.*MSIE [5-8](?:.[0-9]+)?(?!.*Trident/[5-9].0).*$/

32. Удалить повторы

Регулярки дают возможность автоматически удалить случайные повторы слов без проглядывания всего текста:

/(w+)s+1/gi

JS:

"hello world world hello".replace(re, "$1") // hello world hello

33. Количество слов

Порой веб-разработчику необходимо определить количество слов в строке, например, для организации ключевых слов в инструментах аналитики. Сделать это можно с помощью следующих регулярок:

^[^s]*$ &nbsp; // ровно одно слово
^[^s]*s[^s]*$ // ровно два слова
^[^s]*s[^s]* // два слова и больше
^([^s]*s){2}[^s]*$ // ровно три слова
^([^s]*s){4, }[^s]*$ // пять слов и больше
Свои любимые регулярки пишите в комментариях :)

Полезные статьи по регулярным выражениям

  • 5 практических примеров использования регулярных выражений на JavaScript
  • Практическое введение в регулярные выражения для новичков
  • 11 материалов по регулярным выражениям
  • Регулярные выражения: 5 сервисов для тестирования и отладки
Источник

Проверка данных регулярными выражениями

Сборник регулярных выражений с примерами на PHP для проверки данных из полей форм.

1

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

$text = '1';
if (preg_match("/^d+$/", $text)) {
	echo 'yes';
} else {
	echo 'no';
}

PHP

Числа с плавающей точкой (разделитель точка):

$text = '-1.0';
if (preg_match("/^-?d+(.d{0,})?$/", $text)) {
	echo 'yes';
} else {
	echo 'no';
}

PHP

2

Проверка даты по формату

Формат DD.MM.YYYY

$text = '02.12.2018';
if (preg_match("/^(0[1-9]|[12][0-9]|3[01])[.](0[1-9]|1[012])[.](19|20)dd$/", $text)) {
	echo 'yes';
} else {
	echo 'no';
}

PHP

Формат MySQL YYYY-MM-DD 

$text = '2018-04-02';
if (preg_match("/^[0-9]{4}-(0[1-9]|1[012])-(0[1-9]|1[0-9]|2[0-9]|3[01])$/", $text)) {
	echo 'yes';
} else {
	echo 'no';
}

PHP

3

Проверка номера телефона

Ориентировано на российские мобильные + городские с кодом из 3 цифр.

$text = '+7(495)000-00-00';
if (preg_match("/^((8|+7)[- ]?)?((?d{3})?[- ]?)?[d- ]{7,10}$/", $text)) {
	echo 'yes';
} else {
	echo 'no';
}

PHP

4

Проверка E-mail 

$text = 'mail@snipp.ru';
if (preg_match("/^([a-z0-9_-]+.)*[a-z0-9_-]+@[a-z0-9_-]+(.[a-z0-9_-]+)*.[a-z]{2,6}$/i", $text)) {
	echo 'yes';
} else {
	echo 'no';
}

PHP

5

Логин

Латинские буквы, цифры, - и _.

$text = 'admin-1';
if (preg_match("/^[a-z0-9_-]{2,20}$/i", $text)) {
	echo 'yes';
} else {
	echo 'no';
}

PHP

6

Проверка md5-хэша 

$text = 'ca040cb5d6c2ba8909417ef6b8810e2e';
if (preg_match("/^[a-f0-9]{32}$/", $text)) {
	echo 'yes';
} else {
	echo 'no';
}

PHP

7

Цвета

Шестнадцатеричные коды цветов #FFF и #FFFFFF.

$text = '#fff';
if (preg_match("/^#(?:(?:[a-fd]{3}){1,2})$/i", $text)) {
	echo 'yes';
} else {
	echo 'no';
}

PHP

8

IP адреса

IPv4 адрес:

$text = '192.168.0.1';
if (preg_match("/^((25[0-5]|2[0-4]d|[01]?dd?).){3}(25[0-5]|2[0-4]d|[01]?dd?)$/", $text)) {
	echo 'yes';
} else {
	echo 'no';
}

PHP

IPv6 адрес:

$text = '2001:DB8:3C4D:7777:260:3EFF:FE15:9501';
if (preg_match("/((^|:)([0-9a-fA-F]{0,4})){1,8}$/i", $text)) {
	echo 'yes';
} else {
	echo 'no';
}

PHP

14.06.2018, обновлено 21.12.2022

Другие публикации

Маски ввода для текстовых полей

Применение масок ввода у полей форм значительно упрощает их использование, уменьшает количество ошибок и приводит…

date() – форматирование даты PHP

date($format, $timestamp) – форматирует дату/время по шаблону, где…

Генерация случайных буквенно-цифровых кодов в PHP

Несколько примеров, как сгенерировать случайные последовательности численных и буквенных строк заданной длины и…

Работа с FTP в PHP

Протокол FTP – предназначен для передачи файлов на удаленный хост. В PHP функции для работы с FTP как правило всегда доступны и не требуется установка дополнительного расширения.

Виртуальные коды клавиш (Virtual-Key Codes)

В следующей таблице приведены имена констант (VK Codes), десятичные и шестнадцатеричные значения для кодов виртуальных…

Загрузка файлов на сервер PHP

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

Источник

Валидация форм с использованием HTML5 и Regex

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

Поскольку валидация важна, имеет смысл в наличии инструментов и библиотек для проверки и очистки данных как на стороне клиента, так и на стороне сервера.

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

Элемент ввода формы

Всякий раз, когда вы хотите получить какую-либо информацию от своих пользователей, вы, скорее всего, будете использовать элемент HTML input. Неважно, хотите ли вы узнать их имя, фамилию, адрес электронной почты, город, в котором они сейчас живут, номер телефона или их любимую спортивную команду. Элемент input является очень удобным способом получения информации от наших посетителей.

Однако некоторые злоумышленники имеют возможность воспользоваться тем фактом, что они могут ввести практически любую строку в элемент ввода и отправить форму. Точно так же могут быть пользователи, которые просто не знают, что они вводят данные в неправильном формате.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Обе эти проблемы можно очень легко решить, используя некоторые атрибуты HTML5 с элементами формы.

Тип атрибута

Атрибут type определяет, какой тип данных считается действительным для данного элемента. Если для атрибута type не указано значение, по умолчанию устанавливается тип text. Это в основном означает, что все виды текстовых полей будут считаться допустимыми для этого конкретного элемента.

Это нормально, если вы хотите, чтобы пользователи вводили свои имена. Однако, если вы хотите, чтобы они вводили адрес электронной почты или числа, такие как возраст и вес, гораздо лучше установить значение атрибута type на какое-то более подходящее.

Вот несколько значений, из которых вы можете выбрать:

email: просит пользователей ввести свой адрес электронной почты в допустимом формате. Например, они не могут просто написать myemail.com или что-то @ или @ something.com. Им нужно будет ввести значение, подобное myemail@domain.tld. Конечно, они все еще могут вводить несуществующие электронные адреса, но это уже другая проблема!

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

url: вы можете установить для атрибута type значение url если хотите, чтобы пользователи вводили действительный URL-адрес в элемент ввода. Это предотвратит попадание во что-то вроде tutsplus . Однако tutsplus.com также будет считаться не валидным — пользователям придется вводить полный URL-адрес, например https://tutsplus.com.

tel: использование этого значения не так полезно, как другие, потому что формат телефонного номера различается во всем мире. Просто не существует стандартного шаблона, который браузеры могли бы сопоставить с вводом, чтобы определить, является ли число действительным. Однако установка типа tel может быть полезна на более позднем этапе, когда вы будете выполнять собственную проверку.

Есть много других значений атрибута type, которые можно использовать для указания типа ввода, допустимого для конкретного элемента. Вы можете прочитать обо всех этих значениях на странице справки по элементам ввода в MDN.

Следующая демонстрация CodePen показывает, как мы можем использовать атрибут type для управления тем, что разрешено в различных полях ввода.

Атрибуты минимальной и максимальной длины

Еще один способ ограничить входящие данные для элемента — использовать атрибуты minlength и maxlength. Они устанавливают минимальное и максимальное количество символов, которые необходимо ввести в элемент ввода, чтобы сделать его валидным.

Правильные значения для обоих этих атрибутов будут варьироваться в зависимости от конкретного случая. Например, некоторые веб-сайты могут захотеть, чтобы имя пользователя было от 4 до 15 символов, в то время как другие могут ограничить максимальную длину до 12. Точно так же люди в некоторых странах будут иметь необычно короткие или длинные имена по сравнению с другими.

Использование Regex для валидации формы

Установка значения атрибута type, безусловно, помогает нам ограничить то, что проходит как допустимый ввод. Однако вы можете пойти еще дальше и указать шаблон, которому должно следовать имя пользователя или адрес электронной почты, чтобы считаться действительным.

Допустим, вы хотите убедиться, что имена пользователей состоят только из букв и цифр. Это легко сделать с помощью атрибута pattern. Вам просто нужно установить в его значение регулярное выражение, которое будет действовать как ориентир для определения того, какой ввод действителен, а какой нет.

Вот несколько примеров использования регулярного выражения с атрибутом pattern.

<input type=«text» id=«uname» name=«uname» pattern=«[a-zA-Z0-9]+» minlength=«4» maxlength=«10»>

Приведенный выше шаблон будет проверять, что все имена пользователей содержат только символы от az, AZ или 0-9. Например, monty42, 42monty, MON42ty и mon42ty — все допустимые имена пользователей в этом случае, но monty_42 недействителен.

Атрибуты minlength и maxlength гарантируют, что имя пользователя не является слишком коротким или слишком длинным.

Если вы хотите, чтобы имя пользователя начиналось с определенного символа, например подчеркивания, вы можете просто добавить его в начало шаблона.

<input type=«text» id=«uname» name=«uname» pattern=«_[a-zA-Z0-9]+» minlength=«4» maxlength=«10»>

Теперь каждое имя пользователя, которое не начинается с _ и содержит какие-либо символы, кроме az, AZ или 0-9 после этого, будет считаться не валидным.

Я надеюсь, что это поможет прояснить, как мы можем использовать регулярные выражения, чтобы ограничить то, что считается допустимым вводом, даже если для атрибута type установлено значение text.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Расширенная проверка с использованием шаблонов регулярных выражений

Вы также можете использовать атрибут pattern вместе с другими типами элементов ввода, такими как email и url чтобы ограничить допустимые входные данные. Например, предположим, что вы хотите, чтобы пользователи вводили только URL-адрес, который является поддоменом tutsplus.com . Вы можете просто установить значение атрибута pattern равным https://.*.tutsplus.com. Теперь любой ввод вроде https://google.com или https://envato.com будет считаться не валидным.

То же самое можно сделать и с электронной почтой. Если вы хотите, чтобы электронные адреса заканчивались чем-то конкретным, вы можете просто использовать для этого атрибут pattern. Вот пример:

<input type=«email» id=«email» pattern=«.+@tutsplus.com|.+@envato.com»>

Если указанный выше элемент ввода используется в форме, пользователи смогут вводить только адрес электронной почты, заканчивающийся на tutsplus.com или envato.com. Это означает, что hi@gmail.com или howdy@something.com будут не валидными.

Ознакомьтесь с нашей шпаргалкой по регулярным выражениям JavaScript, чтобы получить больше примеров регулярных выражений и советов по их использованию.

Обязательные поля и placeholder

Хотя атрибуты required и placeholder не обязательно связаны с проверкой, они могут быть использованы для проверки данных , которые отсылаются через форму.

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

Вы можете пометить определенные поля ввода как обязательные с помощью атрибута required, оставив необязательные поля нетронутыми. Это позволит пользователям узнать абсолютный минимум информации, которую они должны предоставить при заполнении формы. Это также может увеличить количество людей, заполняющих форму, потому что они заранее будут знать, что заполнять все поля не обязательно.

Атрибут placeholder также может быть использован, когда дело доходит до принятия более удобной формы заполнения. Например, если вы не дадите пользователям знать, что они должны вводить URL-адреса, начинающиеся с https:// и являющиеся субдоменами tutsplus.com, они могут просто сдаться после неудачного заполнения поля URL-адреса с помощью something.com или code.tutsplus.com.

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

<form>

  <label for=«name»>Name: *</label>

  <input type=«text» id=«name» name=«name» pattern=«[a-zA-Z]+» placeholder=«Monty» required>

  <br>

  <label for=«name»>Company Email Address: *</label>

  <input type=«email» id=«email» name=«email» placeholder=«joe@company.com» pattern=«.+@company.com» required>

  <br>

  <label for=«name»>Age: </label>

  <input type=«number» id=«age» name=«age» min=«10» max=«80» placeholder=«30»>

  <br>

  <label for=«name»>Favorite Tuts+ Website: *</label>

  <input type=«url» id=«website» name=«website» pattern=«https://.*.tutsplus.com» placeholder=«https://code.tutsplus.com» required>

</form>

Часто используемые регулярные выражения

Регулярное выражение для проверки имени пользователя

Имена пользователей представляют собой просто буквенно-цифровые строки, иногда с разрешенными “ – “ и “ _ “, в зависимости от целей создателей веб-сайта. Вы можете использовать следующее регулярное выражение, чтобы определить, должно ли имя пользователя состоять только из алфавитно — цифровых символов, “ – “ и “ _ “ : [a-zA-Z0-9-_]{4, 24}. Цифры в фигурных скобках ограничивают допустимое имя пользователя от 4 до 24 символов.

Вы можете использовать, [a-zA-Z][a-zA-Z0-9-_]{4,24} чтобы заставить пользователей использовать букву в качестве первого символа своего имени пользователя.

Регулярное выражение для проверки номеров телефонов

Телефонные номера обычно состоят из 10 цифр. Регулярное выражение для проверки того, ввел ли кто-то действительный номер телефона, может быть простым d{10}.

Однако телефонные номера обычно делятся на три части: код города, код оператора и код абонента. И люди могут писать их в нескольких разных форматах, например:

123—456—7890

123 456 7890

123.456.7890

(123) 456 7890

Вы можете использовать (?(d{3}))?[-.s]?(d{3})[-.s]?(d{4}) для сопоставления всех шаблонов телефонных номеров, указанных выше. Используя ? указывает браузеру искать 0 или 1 вхождение предыдущего символа. Цифры разделены на группы по 3 и 4 с помощью d{3} и d{4}.

Regex для проверки действительного адреса электронной почты

Адреса электронной почты обычно имеют вид something@else.tld. Любой адрес электронной почты, соответствующий указанному выше шаблону, может быть сопоставлен с помощью (w.?)+@[w.-]+.w{2,4}.

Первоначально, домены верхнего уровня были 2 до 4 символов, но теперь они могут иметь гораздо больше символов, так что вы можете изменить часть проверки TLD , чтобы вместить всю новую длинную TLD со следующим регулярным выражением: (w.?)+@[w.-]+.w{2,}.

Регулярное выражение для проверки действительного URL

Вы можете использовать [(http(s)?)://(www.)?w-/=#%&.?]{2,}.[a-z]{2,}([w-/=#%&.?]*)для сопоставления большинства действительных URL-адресов. Шаблоны регулярных выражений становятся все более и более сложными в зависимости от того, какую точность вы ищете в сопоставлении. В этом конкретном случае мы проверяем наличие необязательных http или www, а затем кучу других символов. Вышеупомянутое регулярное выражение также будет обрабатывать параметры запроса и фрагменты URL.

Заключение

В этом руководстве мы узнали, как добавить базовую валидацию в формы, просто используя HTML и регулярное выражение. Использование правильного значения атрибута type заставит пользователей вводить информацию в поле ввода в определенном формате. Использование регулярных выражений с атрибутом pattern может помочь нам сохранить допустимый ввод более ограниченным.

Наконец, мы узнали, как использовать атрибут placeholder, чтобы убедиться, что формы, которые мы создаем, удобны для пользователя, и люди, заполняющие информацию, не расстраиваются, потому что они не знают формат ввода, который мы считаем допустимым.

Автор: Monty Shokeen

Источник: code.tutsplus.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Верстка. Быстрый старт

Практический курс по верстке адаптивного сайта с нуля!

Смотреть

Источник

Понравилась статья? Поделить с друзьями:
  • Регистратура црб красный сулин номер телефона депутатская
  • Регулярка для номеров телефонов
  • Регистратура ува црб номер телефона
  • Регистратура шемурша больница номер телефона
  • Регистратура црб красноусольский номер телефона