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

let isPhoneNumber = input => {

  try {
    let ISD_CODES = [93, 355, 213, 1684, 376, 244, 1264, 672, 1268, 54, 374, 297, 61, 43, 994, 1242, 973, 880, 1246, 375, 32, 501, 229, 1441, 975, 591, 387, 267, 55, 246, 1284, 673, 359, 226, 257, 855, 237, 1, 238, 1345, 236, 235, 56, 86, 61, 61, 57, 269, 682, 506, 385, 53, 599, 357, 420, 243, 45, 253, 1767, 1809, 1829, 1849, 670, 593, 20, 503, 240, 291, 372, 251, 500, 298, 679, 358, 33, 689, 241, 220, 995, 49, 233, 350, 30, 299, 1473, 1671, 502, 441481, 224, 245, 592, 509, 504, 852, 36, 354, 91, 62, 98, 964, 353, 441624, 972, 39, 225, 1876, 81, 441534, 962, 7, 254, 686, 383, 965, 996, 856, 371, 961, 266, 231, 218, 423, 370, 352, 853, 389, 261, 265, 60, 960, 223, 356, 692, 222, 230, 262, 52, 691, 373, 377, 976, 382, 1664, 212, 258, 95, 264, 674, 977, 31, 599, 687, 64, 505, 227, 234, 683, 850, 1670, 47, 968, 92, 680, 970, 507, 675, 595, 51, 63, 64, 48, 351, 1787, 1939, 974, 242, 262, 40, 7, 250, 590, 290, 1869, 1758, 590, 508, 1784, 685, 378, 239, 966, 221, 381, 248, 232, 65, 1721, 421, 386, 677, 252, 27, 82, 211, 34, 94, 249, 597, 47, 268, 46, 41, 963, 886, 992, 255, 66, 228, 690, 676, 1868, 216, 90, 993, 1649, 688, 1340, 256, 380, 971, 44, 1, 598, 998, 678, 379, 58, 84, 681, 212, 967, 260, 263],
      //extract numbers from string
      thenum = input.match(/[0-9]+/g).join(""),
      totalnums = thenum.length,
      last10Digits = parseInt(thenum) % 10000000000,
      ISDcode = thenum.substring(0, totalnums - 10);

    //phone numbers are generally of 8 to 16 digits
    if (totalnums >= 8 && totalnums <= 16) {
      if (ISDcode) {
        if (ISD_CODES.includes(parseInt(ISDcode))) {
          return true;
        } else {
          return false;
        }
      } else {
        return true;
      }
    }
  } catch (e) {}

  return false;
}

console.log(isPhoneNumber('91-9883208806'));

let isPhoneNumber = input => {

  try {
    let ISD_CODES = [93, 355, 213, 1684, 376, 244, 1264, 672, 1268, 54, 374, 297, 61, 43, 994, 1242, 973, 880, 1246, 375, 32, 501, 229, 1441, 975, 591, 387, 267, 55, 246, 1284, 673, 359, 226, 257, 855, 237, 1, 238, 1345, 236, 235, 56, 86, 61, 61, 57, 269, 682, 506, 385, 53, 599, 357, 420, 243, 45, 253, 1767, 1809, 1829, 1849, 670, 593, 20, 503, 240, 291, 372, 251, 500, 298, 679, 358, 33, 689, 241, 220, 995, 49, 233, 350, 30, 299, 1473, 1671, 502, 441481, 224, 245, 592, 509, 504, 852, 36, 354, 91, 62, 98, 964, 353, 441624, 972, 39, 225, 1876, 81, 441534, 962, 7, 254, 686, 383, 965, 996, 856, 371, 961, 266, 231, 218, 423, 370, 352, 853, 389, 261, 265, 60, 960, 223, 356, 692, 222, 230, 262, 52, 691, 373, 377, 976, 382, 1664, 212, 258, 95, 264, 674, 977, 31, 599, 687, 64, 505, 227, 234, 683, 850, 1670, 47, 968, 92, 680, 970, 507, 675, 595, 51, 63, 64, 48, 351, 1787, 1939, 974, 242, 262, 40, 7, 250, 590, 290, 1869, 1758, 590, 508, 1784, 685, 378, 239, 966, 221, 381, 248, 232, 65, 1721, 421, 386, 677, 252, 27, 82, 211, 34, 94, 249, 597, 47, 268, 46, 41, 963, 886, 992, 255, 66, 228, 690, 676, 1868, 216, 90, 993, 1649, 688, 1340, 256, 380, 971, 44, 1, 598, 998, 678, 379, 58, 84, 681, 212, 967, 260, 263],
      //extract numbers from string
      thenum = input.match(/[0-9]+/g).join(""),
      totalnums = thenum.length,
      last10Digits = parseInt(thenum) % 10000000000,
      ISDcode = thenum.substring(0, totalnums - 10);

    //phone numbers are generally of 8 to 16 digits
    if (totalnums >= 8 && totalnums <= 16) {
      if (ISDcode) {
        if (ISD_CODES.includes(parseInt(ISDcode))) {
          return true;
        } else {
          return false;
        }
      } else {
        return true;
      }
    }
  } catch (e) {}

  return false;
}

console.log(isPhoneNumber('91-9883208806'));

Простейший способ валидации телефонных номеров на сайтах

28 July 2017, 18:47 MSK

function validate_russian_phone_number($tel)
{
    $tel = trim((string)$tel);
    if (!$tel) return false;
    $tel = preg_replace('#[^0-9+]+#uis', '', $tel);
    if (!preg_match('#^(?:\+?7|8|)(.*?)$#uis', $tel, $m)) return false;
    $tel = '+7' . preg_replace('#[^0-9]+#uis', '', $m[1]);
    if (!preg_match('#^\+7[0-9]{10}$#uis', $tel, $m)) return false;
    return $tel;
}

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

Демо

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

Самое основное в этом деле — регулярное выражение (regex), которое, к счастью, не нужно придумывать самому, а просто взять готовое и внедрить. Сразу скажу, что данная регулярка проверяет российские номера телефонов. Первая конструкция, которую мы рассмотрим, выглядит так:

1
2
3
4
5
6
7
8

let regex = /^(+7|7|8)?[s-]?(?[489][0-9]{2})?[s-]?[0-9]{3}[s-]?[0-9]{2}[s-]?[0-9]{2}$/;
let phone = '89000000000';
// дальше идет проверка на соответствие выражению
if(!regex.test(phone){
console.log('Не соответствует');
}else{
console.log('Соответствует');
}

То же самое можно записать в функцию валидации и вызывать ее где угодно в коде.

1
2
3
4
5
6
7
8
9
10
11
12

function validatePhone(phone){
 let regex = /^(+7|7|8)?[s-]?(?[489][0-9]{2})?[s-]?[0-9]{3}[s-]?[0-9]{2}[s-]?[0-9]{2}$/;
 return regex.test(phone);
}
// Вызов функции
let phone = '89000000000';
 
if (!validatePhone(phone)){
  console.log('Не соответствует');
}else{
  console.log('Соответствует');
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

89000000000
+79000000000
8-900-000-00-00
+7-900-000-00-00
8(900)0000000
8(900)000 00 00
+7 (900) 000 00 00
8(900)-000-00-00
+7(900)-000-00-00
+7(900)000-00-00
8 900 000 00 00
+7 900 000 00 00
8-(900) 000 00 00
+7-(900) 000 00 00
8-(900)-000-00-00
+7-(900)-000-00-00
7(999)999 99 99
79000000000
7-900-000-00-00
7-(900)-000-00-00
7(900)-000-00-00
7(900) 000 00 00
7 (900)-000-00-00
7 (900) 000 00 00
7 900 000 00 00
8000000000
9000000000
800 000 00 00
900 000 00 00
800-000-00-00
900-000-00-00
(800)-000-00-00
(900)-000-00-00

Валидация телефона на jQuery

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

<input type="tel" class="input"/>

Затем пишем jQuery код.

1
2
3
4
5
6
7

let phone = $('.input').val(); // Получаем значение input
let regex = /^(+7|7|8)?[s-]?(?[489][0-9]{2})?[s-]?[0-9]{3}[s-]?[0-9]{2}[s-]?[0-9]{2}$/;
if(!regex.test(phone){
console.log('Не соответствует');
}else{
console.log('Соответствует');
}

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

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

Предупреждение: проверка формы 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");
  }
}

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

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

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

Всем привет, Жёлтый на связи!

Всем нам рано или поздно приходится возиться с проверкой телефонных номеров в формах заявок. Обычно причиной является слишком большое количество треша: пользователи от нечего делать шлют рандомные номера в ПП, мы из-за этого видим большое число лидов в Facebook и в трекере, радуемся, а потом всё это падает в треш и GG WP.

Будем бороться с невалидными номерами и для начала рассмотрим, как мы обычно решаем эту задачу.

Убираем пустые номера

Самое первое, что нужно сделать, если этого не сделала за вас ПП — это убрать возможность отсылать форму с пустым номером. Для этого достаточно добавить к полю ввода номера атрибут required.

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

Теперь при попытке нажать на кнопку отправки пользователю будет показано сообщение о необходимости заполнить поле телефона:

Также хорошо было бы изменить тип поля на tel и добавить автозаполнение. Про это прочитаете на моём телеграм-канале.

Маски ввода

Стандартное решение на сегодняшний день. Маска представляет собой шаблон номера для выбранного ГЕО и обычно включает в себя 2 вещи: длина номера и набор доступных цифр. Выглядит примерно так (для RU):

+7-999-999-99-99

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

На страницу подключают какой-нибудь JavaScript-плагин (обычно это InputMask) и пишут примерно такой код:

var selector = document.getElementById("phone");
var im = new Inputmask("+7-999-999-99-99");
im.mask(selector);

Плюсы метода: работает, просто подключить

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

LibPhoneNumber от Google

У корпорации Google существует своё решение для парсинга, форматирования и валидации телефонных номеров. Мы с вами не будем использовать его напрямую, а рассмотрим другую JavaScript-библиотеку International Telephone Input. Она удобнее в использовании и при этом под капотом юзает это же решение от гугла.

Кратко пробежимся по тому, что у нас получится в итоге:

• Наш скрипт будет автоматом определять страну пользователя по его IP-адресу и в поле ввода телефона показывать флаг этой страны
• После ввода каждой цифры скрипт будет проверять валидность номера и не будет давать отправлять форму с некорректным номером

Плюсы метода: работает для всех стран, не нужно выдумывать маски

Минусы метода: не ограничивает пользователя при вводе, но на это пофиг, ибо отправить дичь всё равно не получится!

Подключение и использование

Первым делом открываем пример и смотрим, как подключать библиотеку к своим лендам. Для этого добавляем в тег <head> ссылку на бибилотеку и css-стиль.

После этого добавляем сразу после тега <body> скрипт, который подключит проверку номеров для ваших полей ввода во всех формах на странице.

А теперь смотрите на выделенное красным поле: как вы понимаете, в моём примере поставлена проверка для гео RU, а нам надо бы сделать так, чтобы работало универсально. Рассмотрим 2 варианта.

Делаем скрипт универсальным, используя Кейтаро

Если у вас есть под рукой трекер Кейтаро, то всё проще пареной репы, вместо

initialCountry: 'RU',

пишем

initialCountry: '{country_code}',

Когда пользователь попадёт к вам на ленд, Кейтаро автоматом заменит макрос {country_code} на код его ГЕО.

Делаем скрипт универсальным, используя JS-код

Идея в следующем: пользователь заходит на страницу, скрипт сам пробивает его IP по геобазе и определяет страну. Для этого нужно выставить страну в 'auto' и прописать функцию определения страны.

  initialCountry: "auto",
  geoIpLookup: function(callback) {
    $.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
      var countryCode = (resp && resp.country) ? resp.country : "us";
      callback(countryCode);
    });
  },

В данном случае используется JQuery, чтобы отправить запрос и база IpInfo.io. Хотите — используйте любую другую.

Результат

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

Внедряем и льём в плюс, господа!