Jquery валидация номера телефона

Способов валидации форм на стороне клиента, а именно поля ввода номера телефона (инпута) существует несколько, как и на стороне сервера. Для этих целей существуют специальные 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 запроса без перезагрузки страницы. данный способ подойдет, если в форме есть всего несколько полей, к примеру имя и телефон. Если полей много и для каждого требуется проверка на корректность заполнения, то здесь лучше подключить соответствующий плагин, чтобы не изобретать велосипед и не писать кучу кода с нуля. Надеюсь, что все было понятно, если что — пишите комменты.

If you normalize your data first, then you can avoid all the very complex regular expressions required to validate phone numbers. From my experience, complicated regex patterns can have two unwanted side effects: (1) they can have unexpected behavior that would be a pain to debug later, and (2) they can be slower than simpler regex patterns, which may become noticeable when you are executing regex in a loop.

By keeping your regular expressions as simple as possible, you reduce these risks and your code will be easier for others to follow, partly because it will be more predictable. To use your phone number example, first we can normalize the value by stripping out all non-digits like this:

value = $.trim(value).replace(/D/g, '');

Now your regex pattern for a US phone number (or any other locale) can be much simpler:

/^1?d{10}$/

Not only is the regular expression much simpler, it is also easier to follow what’s going on: a value optionally leading with number one (US country code) followed by ten digits. If you want to format the validated value to make it look pretty, then you can use this slightly longer regex pattern:

/^1?(d{3})(d{3})(d{4})$/

This means an optional leading number one followed by three digits, another three digits, and ending with four digits. With each group of numbers memorized, you can output it any way you want. Here’s a codepen using jQuery Validation to illustrate this for two locales (Singapore and US):

If you normalize your data first, then you can avoid all the very complex regular expressions required to validate phone numbers. From my experience, complicated regex patterns can have two unwanted side effects: (1) they can have unexpected behavior that would be a pain to debug later, and (2) they can be slower than simpler regex patterns, which may become noticeable when you are executing regex in a loop.

By keeping your regular expressions as simple as possible, you reduce these risks and your code will be easier for others to follow, partly because it will be more predictable. To use your phone number example, first we can normalize the value by stripping out all non-digits like this:

value = $.trim(value).replace(/D/g, '');

Now your regex pattern for a US phone number (or any other locale) can be much simpler:

/^1?d{10}$/

Not only is the regular expression much simpler, it is also easier to follow what’s going on: a value optionally leading with number one (US country code) followed by ten digits. If you want to format the validated value to make it look pretty, then you can use this slightly longer regex pattern:

/^1?(d{3})(d{3})(d{4})$/

This means an optional leading number one followed by three digits, another three digits, and ending with four digits. With each group of numbers memorized, you can output it any way you want. Here’s a codepen using jQuery Validation to illustrate this for two locales (Singapore and US):

If you normalize your data first, then you can avoid all the very complex regular expressions required to validate phone numbers. From my experience, complicated regex patterns can have two unwanted side effects: (1) they can have unexpected behavior that would be a pain to debug later, and (2) they can be slower than simpler regex patterns, which may become noticeable when you are executing regex in a loop.

By keeping your regular expressions as simple as possible, you reduce these risks and your code will be easier for others to follow, partly because it will be more predictable. To use your phone number example, first we can normalize the value by stripping out all non-digits like this:

value = $.trim(value).replace(/D/g, '');

Now your regex pattern for a US phone number (or any other locale) can be much simpler:

/^1?d{10}$/

Not only is the regular expression much simpler, it is also easier to follow what’s going on: a value optionally leading with number one (US country code) followed by ten digits. If you want to format the validated value to make it look pretty, then you can use this slightly longer regex pattern:

/^1?(d{3})(d{3})(d{4})$/

This means an optional leading number one followed by three digits, another three digits, and ending with four digits. With each group of numbers memorized, you can output it any way you want. Here’s a codepen using jQuery Validation to illustrate this for two locales (Singapore and US):

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

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

Рассмотрим, как реализовать такое поле.

Демо Попробуйте ввести и нажать отправить

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

Для реализации нам понадобиться две библиотеки на jquery:

• jquery.inputmask — для наложение маски телефона
• jquery-validate — для проверки и валидации поля

Скачать их или подключить можно отсюда:

jquery.inputmask
jquery.validate

Сначала подключим jquery и библиотеки:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.5/jquery.inputmask.min.js"></script>

Теперь добавим форму с полем:

<form class="form-request">
  <label>
    <input 
        type="text" 
        class="phone-field"
        name="phone" 
        placeholder="Номер телефона" 
        data-rule-required="true" 
        data-rule-minlength="10" 
        data-msg="Введите номер телефона"
    />
  </label>
  <div>
    <input type="submit" value="Отправить">
  </div>
</form>

Затем пишем следующий скрипт.

<script type="text/javascript">
    // вешаем маску на телефон
    $('.phone-field').inputmask("+7(999)999-9999");
    
    // добавляем правило для валидации телефона
    jQuery.validator.addMethod("checkMaskPhone", function(value, element) {
        return /+d{1}(d{3})d{3}-d{4}/g.test(value); 
    });
    
    // получаем нашу форму по class
    var form = $('.form-request');
    
    // включаем валидацию в форме
    form.validate();
    
    // вешаем валидацию на поле с телефоном по классу
    $.validator.addClassRules({
        'phone-field': {
            checkMaskPhone: true,
        }
    });
    
    // Проверка на валидность формы при отправке, если нужно
    form.submit(function(e){
        e.preventDefault();
        if (form.valid()) {
            alert('Форма отправлена');
        }
        return;
    });
</script>

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

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

Валидация полей формы с помощью 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();

После того как вы сверстали свою форму, вам необходимо проверить корректность введенных данных, или же – соответствие определенному формату. Чуть ниже, вы научитесь писать простую валидацию на jQuery.

Как проверить введенное имя, телефон или email

Предположим, что у вас уже есть форма:

<form action="#" method="POST">
	<p><input class="form-name" name="name" type="text" value="" placeholder="Введите ваше имя" required></p>
	<p><input class="form-phone" name="phone" type="text" value="" placeholder="Введите ваш телефон" required></p>
	<p><input class="form-email" name="email" type="email" value="" placeholder="Введите ваш e-mail"></p>
</form>

Обратите внимание на следующие вещи:

• каждому элементу input был задан класс input-name, input-phone, input-email;
• у поля ввода почтового ящика уже стоит “тип” = емейл – и в принципе, этого хватает, чтобы вам не присылали спам (и хотя данный тип был введен относительно давно, старые браузеры его не поймут);
• на всех полях стоят placeholder – текст, который будут отображаться, если поле пустое;
• у первых 2 форм стоит атрибут required – что означает обязательный, как минимум один символ должен быть заполнен в строке.

Для начала пишем простую валидацию для нашего имени:

<script>
//validate name
var name = $('input[name="name"]').val();
if (name.length < 3)
{
	alert('Пожалуйста введите корректное имя, состоящее минимум из 3 букв');
	return false;
}
</script>

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

<script>
//validate phone
var phone = $('input[name="phone"]').val(),
	intRegex = /[0-9 -()+]+$/;
if((phone.length < 6) || (!intRegex.test(phone)))
{
	alert('Пожалуйста введите ваш настоящий телефон');
	return false;
}
</script>

Если вам понадобится скрипт который запрещает вводить любые символы кроме цифр, дайте мне об этом знать в комментариях.
Осталось написать валидацию для email поля. И хотя у нас type = email, подстраховаться никогда не бывает лишним:

<script>
//validate email
var email = $('input[name="email"]').val(),
	emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
if(!emailReg.test(email) || email == '')
{
	alert('Пожалуйста введите ваш email');
	return false;
}
</script>

Обратите внимание – в условии стоит ИЛИ, это важный момент.
В принципе, это всё, что я хотел рассказать в этой небольшой статье 🙂 . А какие методы для валидации полей применяете вы?

An input mask is a string expression that demonstrates the format of a valid user input value or we can say that it constraints user input. This is very useful if there are certain inputs in forms that require validation. In this article, we will learn how to apply an input mask for validating a phone number in an input element using jQuery.

There are two approaches that can be taken here:

Approach 1: Using the jQuery inputmask plugin, there are three input fields defined in the following example, each having a class of first-phone, second-phone and third-phone respectively. We select these elements using the jQuery class selector [$(“.class-name”)] and then apply the inputmask() method from the inputmask plugin on each input element. The parameter of this inputmask() method takes the specified string expression to constraint the user input to. In this case, we set three different formats of phone numbers for the three input fields.

CDN Link:

<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.7/jquery.inputmask.min.js”></script>

Note: This link must be included in the index page to utilise the jQuery inputmask plugin and thus implement all its functionalities.

Syntax:

$(document).ready(function(){

    // A static mask
    $(selector).inputmask("99-9999999"); 
  
    // Mask which specifies options
    $(selector).inputmask({"mask": "(999)-999-9999"});
});

Example: Below example illustrates the use of jQuery Input Mask Phone Number Validation using .inputmask() plugin.

Output:

Approach 2: Using the jQuery maskedinput plugin. There are four input fields defined in the following example, each having a class of first-phone, second-phone, third-phone and fourth-phone respectively. We select these elements using the jQuery class selector [$(“.class-name”)] and then apply the mask() method from the maskedinput plugin on each input element. The parameter of this mask() method takes the specified string expression to constraint the user input to. In this case, we set four different formats of phone numbers for the four input fields.

CDN Link:  

<script src=

“https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js”>

</script>

Note: This link must be included in the index page to utilise the jQuery maskedinput plugin and thus implement all its functionalities.

Syntax:

$(document).ready(function(){
    $(selector).mask("99-9999999");
});

Example: Below is the example that illustrates the use of JQuery Input Mask Phone Number Validation using .mask() plugin.

Output: