Валидация номера телефона html

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

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

Когда дело доходит до валидации пользовательских данных, ее можно проводить как на стороне клиента (в веб-браузере), так и на серверной стороне.

Ранее валидацию на стороне клиента можно было провести только с помощью JavaScript. Но все изменилось (или почти изменилось), так как с помощью HTML5 валидацию можно проводить средствами браузера, без необходимости писать сложные скрипты для валидации на JavaScript.

Валидация форм с помощью HTML5

HTML5 предоставляет довольно надежный механизм, основанный на следующих атрибутах тега <input />: type, patternи require. Благодаря этим новым атрибутам вы можете переложить некоторые функции проверки данных на плечи браузера.

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

Атрибут type

Этот атрибут говорит, какое поле ввода отобразить для обработки данных, например, уже знакомое поле типа <input type="text" />

Некоторые поля ввода уже предоставляют стандартные способы валидации, без необходимости писать дополнительный код. Например, <input type="email" /> проверяет поле на то, что введенное значение соответствует шаблону правильного email адреса. Если в поле введен неверный символ, форму нельзя будет отправить, пока значение не будет исправлено.

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

Также существуют другие стандартные типы полей, вроде <input type="number" />, <input type="url" /> и <input type="tel" /> для валидации чисел, URL’ов и телефонных номеров соотвествено.

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

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

Атрибут pattern

Атрибут pattern, скорее всего, заставит многих фронтенд-разработчиков прыгать от радости. Этот атрибут принимает регулярное выражение (аналогичное формату регулярных выражений JavaScript), по которому будет проверяться корректность введенных в поле данных.

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

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

Регулярные выражения (RegEX) являются мощным, кратким и гибким инструментом для сопоставления строки текста, вроде отдельных символов, слов или шаблонов символов.

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

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

Телефонные номера

Как упоминалось ранее, тип поля tel не полностью поддерживается браузерами из-за несоответствия форматов номеров телефонов в разных странах.

Например, в некоторых странах формат телефонных номеров представляется в виде xxxx-xxx-xxxx, и сам телефонный номер будет что-то вроде этого: 0803-555-8205.

Регулярное выражение, которому соответствует данный шаблон, такое: ^d{4}-d{3}-d{4}$. В коде это можно записатьтак:

<label for="phonenum">Phone Number:</label>
<input type="tel" pattern="^d{4}-d{3}-d{4}$" >

Буквенно-цифровые значения

Следующий шаблон соответствует набору буквенно-цифровых значений (комбинации букв английского алфавита и цифр):

<input type="text" pattern="[a-zA-Z0-9]+" >

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

Данное регулярное выражение соответствует имени пользователя в твиттере, с предваряющим символом @, например@tech4sky:

<input type="text" pattern="^@[A-Za-z0-9_]{1,15}$" >

Цвет в шестнадцатеричном виде

Эта регулярка соответствует цвету в шестнадцатеричном виде, например #3b5998 или #000:

<input type="text" pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" >

Подсказки

Для того, чтобы дать пользователю подсказку о шаблоне, или сообщить об ошибке в случае неверно введенного в поле значения, можно использовать атрибут title:

<input type="text" name="ssn"
       pattern="^d{3}-d{2}-d{4}$"
       title="Номер Социального Страхования" />

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

Атрибут required

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

Это избавляет нас от реализации проверки полей с помощью JavaScript, что может сохранить немного времени разработчикам.

Например: <input type="text" name="my_name" required /> или <input type="text" name="my_name" required="required" />(для совместимости с XHTML)

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

Заключение

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

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

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

Валидация форм

Последнее обновление: 08.04.2016

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

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

Для создания валидации у элементов форм HTML5 используется ряд атрибутов:

• required: требует обязательного ввода значения. Для элементов textarea, select, input (с типом text, password, checkbox, radio,
  file, datetime-local, date, month, time, week, number, email, url, search, tel)

• min и max: минимально и максимально допустимые значения. Для элемента input с типом datetime-local,
  date, month, time, week, number, range

• pattern: задает шаблон, которому должны соответствовать вводимые данные. Для элемента input с типом text, password, email, url, search, tel

Атрибут required

Атрибут required требует обязательного наличия значения:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Валидация в HTML5</title>
	</head>
	<body>
		<form method="get">
			<p>
				<label for="login">Логин:</label>
				<input type="text" required id="login" name="login" />
			</p>
			<p>
				<label for="password">Пароль:</label>
				<input type="password" required id="password" name="password" />
			</p>
			<p>
				<input type="submit" value="Отправить" />
			</p>
		</form>
	</body>
</html>

Если мы не введем в эти поля никаких данных, оставив их пустыми, и нажмем на кнопку отправки, то браузер высветит нам сообщения об ошибке, а данные не будут отправлены на сервер:

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

Атрибуты max и min

Для ограничения диапазона вводимых значений применяются атрибуты max и min:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Валидация в HTML5</title>
	</head>
	<body>
		<form method="get">
			<p>
				<label for="age">Возраст:</label>
				<input type="number" min="1" max="100" value="18" id="age" name="age"/>
			</p>
			<p>
				<input type="submit" value="Отправить" />
			</p>
		</form>
	</body>
</html>

Атрибут pattern

Атрибут pattern задает шаблон, которому должны соответствовать данные. Для определения шаблона используется язык так называемых
регулярных выражений. Рассмотрим самые простейшие примеры:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Валидация в HTML5</title>
	</head>
	<body>
		<form method="get">
			<p>
				<label for="phone">Телефон:</label>
				<input type="text" placeholder="+1-234-567-8901" 
						pattern="+d-d{3}-d{3}-d{4}" id="phone" name="phone" />
			</p>
			<p>
				<input type="submit" value="Отправить" />
			</p>
		</form>
	</body>
</html>

Здесь для ввода номера телефона используется регулярное выражение +d-d{3}-d{3}-d{4}. Оно означает, что первым элементом в номере
должен идти знак плюс +. Выражение d представляет любую цифру от 0 до 9. Выражение d{3} означает три подряд идущих цифры, а
d{4} — четыре цифры подряд. То есть это выражение будет соответствовать номеру телефона в формате «+1-234-567-8901».

Если мы введем данные, которые не соответствуют этому шаблону, и нажмем на отправку, то браузер отобразит ошибку:

Отключение валидации

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Валидация в HTML5</title>
	</head>
	<body>
		<form novalidate method="get">
			<p>
				<label for="phone">Телефон:</label>
				<input type="text" placeholder="+1-234-567-8901" 
						pattern="+d-d{3}-d{3}-d{4}" id="phone" name="phone" />
			</p>
			<p>
				<input type="submit" value="Отправить" formnovalidate />
			</p>
		</form>
	</body>
</html>

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

Валидация полей формы с помощью HTML

Самый простой, но не самый эффективный способ — это валидация полей формы через стандартные свойства полей HTML.

Поле обязательно к заполнению

<input type="text" name="name" required>

Проверка ввода Email

<input name="email" required pattern="[email protected][a-z]+.[a-z]+">

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

<input type="tel" name="phone" pattern="^((8|+7)[- ]?)?((?d{3})?[- ]?)?[d- ]{7,10}$" required />

Проверка по количеству символов

<input type="text" name="message" minlength="30" maxlength="2000" />

Проверка ввода только букв

<input type="text" name="message" pattern="[A-zА-яЁё]" />

Проверка ввода только цифр

<input type="text" name="message" pattern="[0-9]" />

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

Валидация полей формы с помощью JavaScript

Наиболее сложный способ валидации на чистом JavaScript на примере простой формы обратной связи:

<form action="" name="callback" onsubmit="return(validate());">
	<input type = "text" name="name" placeholder="Имя"/><br>
	<input type = "text" name="lastname" placeholder="Фамилия" /><br>
	<input type = "text" name="email" placeholder="E-mail"/><br>
	<select name="topic">
		<option value="-1" selected>[Выберите тему обращения]</option>
		<option value="1">Техническая поддержка</option>
		<option value="2">Реклама</option>
		<option value="3">Сообщить об ошибке</option>
	</select>
<input type="submit" value="Отправить" />
</form>      

Обращаем внимание на то, что в свойствах формы указан параметр onsubmit=»return(validate());», что позволит выполнить функцию validate() перед отправкой формы. Теперь собственно сама функция проверки:

<script>
   <!--
      // Проверка заполненности полей формы.
      function validate() {
      
         if( document.callback.name.value == "" ) {
            alert( "Укажите имя" );
            document.callback.name.focus() ;
            return false;
         }
         if( document.callback.email.value == "" ) {
            alert( "Заполните Email" );
            document.callback.email.focus() ;
            return false;
         } 
           if( document.callback.lastname.value == "" ) {
            alert( "Укажите фамилию" );
            document.callback.lastname.focus() ;
            return false;
         }
         if( document.callback.topic.value == "-1" ) {
            alert( "Пожалуйста, выберите темы обращения" );
            return false;
         }
         return( true );
      }
   //-->
</script>

к содержанию ↑

Проверка формата E-mail

function ValidMail() {
    var re = /^[w-.][email protected][w-]+.[a-z]{2,4}$/i;
    var myMail = document.getElementById('email').value;
    var valid = re.test(myMail);
    if (valid) output = 'Адрес эл. почты введен правильно!';
    else output = 'Адрес электронной почты введен неправильно!';
    document.getElementById('message').innerHTML = output;
    return valid;
}

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

function ValidPhone() {
    var re = /^d[d() -]{4,14}d$/;
    var myPhone = document.getElementById('phone').value;
    var valid = re.test(myPhone);
    if (valid) output = 'Номер телефона введен правильно!';
    else output = 'Номер телефона введен неправильно!';
    document.getElementById('message').innerHTML = document.getElementById('message').innerHTML+'<br />'+output;
    return valid;
}  

Валидация полей формы с помощью плагина jQuery Validation Plugin

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

Этот плагин позволяет легко проверять формы на стороне клиента, и предлагает множество вариантов настроек. Для начала подключаем jQuery и jQuery Validation.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

Затем простенькая форма для примера:

<form action="" name="callback" >
	<input type = "text" name="name" placeholder="Имя"/><br>
	<input type = "text" name="lastname" placeholder="Фамилия" /><br>
	<input type = "text" name="email" placeholder="E-mail"/><br>
	<select name="topic">
		<option value="-1" selected>[Выберите тему обращения]</option>
		<option value="1">Техническая поддержка</option>
		<option value="2">Реклама</option>
		<option value="3">Сообщить об ошибке</option>
	</select>
<input type="submit" value="Отправить" />
</form>      

Теперь давайте запустим проверку валидации при попытке отправить форму:

$('form[name="callback"]').validate({
  rules: {
    name: 'required',
    lastname: 'required',
    email: {
      required: true,
      email: true,
    },
    topic: 'required',
  },
  messages: {
    name: 'Укажите имя',
    lastname: 'Укажите фамилию',
    email: 'Укажите правильный E-mail',
    topic: 'Выберите тему обращения'
  },
  submitHandler: function(form) {
    form.submit();
  }
});

Как видно, после проверки формы на валидацию, происходит её отправка методом form.submit();

HTML CSS JS

Валидация input

Дата размещения статьи 24/10/2019 👁18340

Как мы уже говорили ранее,довольно сложно предоставить универсальное решение для проверки телефонных номеров на стороне клиента.Так что же мы можем сделать? Давайте рассмотрим некоторые варианты.

Предупреждение: проверка формы HTML не заменяет серверные сценарии, которые проверяют, что введенные данные находятся в правильном формате, прежде чем они будут разрешены в базе данных. Для кого-то слишком легко внести изменения в HTML, которые позволят им обойти проверку или полностью удалить ее. Также есть возможность полностью обойти ваш HTML и отправить данные прямо на ваш сервер. Если ваш серверный код не может проверить данные, которые он получает, может случиться катастрофа, когда в вашу базу данных будут введены неправильно отформатированные данные (или данные, которые слишком большие, неправильного типа и т. Д.).

Вы можете сделать так, чтобы пустой ввод был недействительным и не передавался на сервер с использованием required атрибута. Например, воспользуемся этим HTML:

<form>
  <div>
    <label for="telNo">Enter a telephone number (required): </label>
    <input id="telNo" name="telNo" type="tel" required>
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

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

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
  color: #8b0000;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
  color: #009000;
}

Выход выглядит так:

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

В этом примере мы будем использовать тот же CSS,что и раньше,но наш HTML изменен,чтобы выглядеть так:

<form>
  <div>
    <label for="telNo">Enter a telephone number (in the form xxx-xxx-xxxx): </label>
    <input id="telNo" name="telNo" type="tel" required
           pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

Обратите внимание,что введенное значение считается недействительным,если не совпадает с шаблоном xxx-xxx-xxx;например,41-323-421 не будет принято.Также не будет принят номер 800-MDN-ROCKS.Однако 865-555-6502 будет принят.Этот конкретный шаблон,очевидно,полезен только для определенных локалей-в реальном приложении вам,вероятно,придется варьировать используемый шаблон в зависимости от локали пользователя.

В этом примере мы представляем простой интерфейс с элементом <select> , который позволяет пользователю выбирать, в какой стране он находится, и набором элементов <input type="tel"> , позволяющих им вводить каждую часть своего номера телефона. ; нет причин, по которым у вас не может быть нескольких входов tel .

Каждый ввод имеет атрибут- placeholder , чтобы показать зрячим пользователям подсказку о том, что в него вводить, pattern для принудительного ввода определенного количества символов для нужного раздела и атрибут aria-label , содержащий подсказку, которую нужно прочитать на экране. читатели пользователи о том, что в него входить.

<form>
  <div>
    <label for="country">Choose your country:</label>
    <select id="country" name="country">
      <option>UK</option>
      <option selected>US</option>
      <option>Germany</option>
    </select>
  </div>
  <div>
    <p>Enter your telephone number: </p>
    <span class="areaDiv">
      <input id="areaNo" name="areaNo" type="tel" required
             placeholder="Area code" pattern="[0-9]{3}"
             aria-label="Area code">
      <span class="validity"></span>
    </span>
    <span class="number1Div">
      <input id="number1" name="number1" type="tel" required
             placeholder="First part" pattern="[0-9]{3}"
             aria-label="First part of number">
      <span class="validity"></span>
    </span>
    <span class="number2Div">
      <input id="number2" name="number2" type="tel" required
             placeholder="Second part" pattern="[0-9]{4}"
             aria-label="Second part of number">
      <span class="validity"></span>
    </span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

JavaScript относительно прост — он содержит обработчик события onchange , который при изменении значения <select> обновляет pattern элемента <input> , placeholder и метку aria-label в соответствии с форматом телефонных номеров в этой стране/территории. pattern placeholder aria-label

const selectElem = document.querySelector("select");
const inputElems = document.querySelectorAll("input");

selectElem.onchange = () => {
  for (let i = 0; i < inputElems.length; i++) {
    inputElems[i].value = "";
  }

  if (selectElem.value === "US") {
    inputElems[2].parentNode.style.display = "inline";

    inputElems[0].placeholder = "Area code";
    inputElems[0].pattern = "[0-9]{3}";

    inputElems[1].placeholder = "First part";
    inputElems[1].pattern = "[0-9]{3}";
    inputElems[1].setAttribute("aria-label","First part of number");

    inputElems[2].placeholder = "Second part";
    inputElems[2].pattern = "[0-9]{4}";
    inputElems[2].setAttribute("aria-label", "Second part of number");
  } else if (selectElem.value === "UK") {
    inputElems[2].parentNode.style.display = "none";

    inputElems[0].placeholder = "Area code";
    inputElems[0].pattern = "[0-9]{3,6}";

    inputElems[1].placeholder = "Local number";
    inputElems[1].pattern = "[0-9]{4,8}";
    inputElems[1].setAttribute("aria-label", "Local number");
  } else if (selectElem.value === "Germany") {
    inputElems[2].parentNode.style.display = "inline";

    inputElems[0].placeholder = "Area code";
    inputElems[0].pattern = "[0-9]{3,5}";

    inputElems[1].placeholder = "First part";
    inputElems[1].pattern = "[0-9]{2,4}";
    inputElems[1].setAttribute("aria-label","First part of number");

    inputElems[2].placeholder = "Second part";
    inputElems[2].pattern = "[0-9]{4}";
    inputElems[2].setAttribute("aria-label","Second part of number");
  }
}

Пример выглядит так:

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

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