+7 926 070-36-31
Москва и Московская область

JQuery. Проверяем введенные данные на валидность регулярным выражением

19.04.2018

В данной статье рассмотрим как сделать валидацию данных на основе регулярных выражений.

Что такое регулярные выражения? Это выражения, которые позволяют в текстовой строке найти значения соответствующие шаблону. 

Например, в тексте найти все ссылки на сайт или номер телефона или e-mail. Если в обычном сравнении или поиске сравниваются четко строки (символы), то в регулярных выражениях задается набор возможных символов для поиска.

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

/^(8|7|\\+7){0,1}[- \\\\(]{0,}([9][0-9]{2})[- \\\\)]{0,}(([0-9]{2}[-]{0,}[0-9]{2}[- ]{0,}[0-9]{3})|([0-9]{3}[- ]{0,}[0-9]{2}[- ]{0,}[0-9]{2})|([0-9]{3}[-]{0,}[0-9]{1}[- ]{0,}[0-9]{3})|([0-9]{2}[- ]{0,}[0-9]{3}[- ]{0,}[0-9]{2}))/i

Для поиска или проверки правильности e-mail  надо использовать

/^[a-zA-Zа-яА-ЯёЁ_\\d][-a-zA-Zа-яА-ЯёЁ0-9_\\.\\d]*\\@[a-zA-Zа-яА-ЯёЁ\\d][-a-zA-Zа-яА-ЯёЁ\\.\\d]*\\.[a-zA-Zа-яА-Я]{2,6}$/i

Как через javascript можно сделать регулярное выражение?

Для этого необходимо использовать RegExp( <шаблон регулярного выражения>, <параметры>)

/*Переменная pattern будет содержать регулярное выражение*/
var pattern = new RegExp("^[a-zA-Zа-яА-ЯёЁ_\\d][-a-zA-Zа-яА-ЯёЁ0-9_\\.\\d]*\\@[a-zA-Zа-яА-ЯёЁ\\d][-a-zA-Zа-яА-ЯёЁ\\.\\d]*\\.[a-zA-Zа-яА-Я]{2,6}$","i"); И для удобства я предпочитаю шаbблон хранить в отдельной переменной, а проверку валидности вывести в отдельную функцию.
/*template содержит шаблон*/ var template = '[a-zA-Zа-яА-ЯёЁ_\\d][-a-zA-Zа-яА-ЯёЁ0-9_\\.\\d]*\\@[a-zA-Zа-яА-ЯёЁ\\d][-a-zA-Zа-яА-ЯёЁ\\.\\d]*\\.[a-zA-Zа-яА-Я]{2,6}$';
/*pattern содержит регулярное выражение*/
var pattern =  new RegExp("^"+template+"","i");

/*строка, в которой будем искать*/
var stroka = "info@site-ontop.ru";

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

Проверяем строку командой pattern.test( <строка>)
/*проверяем*/
if (pattern.test(stroka)) { /*если найдет, то данные валидны и выведет сообщение*/
alert('Данные валидны');
}
else { /*если не найдет, то данные невалидны и выведет сообщение*/
alert('Данные не валидны');
}

Теперь рассмотрим на примере. Создадим простую форму для ввода телефона, снилса и e-mail. Только сделаем кнопку отправки данных отключенной (disabled), если данные не проходят валидность и наоборот. 

<h3>Пример работы с проверкой ввода на валидность через регулярные выражения</h3>

<form action="<?=$_SERVER['PHP_SELF']?>" method="POST">
<table>
<tr>
<td>
<label>Телефон мобильный</label>
</td>
<td>
<input id="phone" placeholder="+7 (496) 444-44-44" type="text" name="phone" value="<?=$phone?>" size="20" />
</td>
</tr>
<tr>
<td>
<label>СНИЛС</label>
</td>
<td>
<input id="snils" placeholder="+111-111-111 11" type="text" name="snils" value="<?=$snils?>" size="20" />
</td>
</tr>
<tr>
<td>
<label>email</label>
</td>
<td>
<input id="email" placeholder="info@site-ontop.ru" type="text" name="email" value="<?=$email?>" size="20" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" id="add_in_edit" disabled value="Отметьте все поля для сохранения"></td>
</tr>
</table>
</form>

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

<?php
if ($_SERVER['REQUEST_METHOD'] == "POST"){
if (isset($_POST['phone'])) {
$phone = htmlentities(strip_tags($_POST['phone']));
echo "Телефон: ".$phone."<br>";
}
if (isset($_POST['snils'])) {
$snils = htmlentities(strip_tags($_POST['snils']));
echo "СНИЛС: ".$snils."<br>";
}
if (isset($_POST['email'])) {
$email = htmlentities(strip_tags($_POST['email']));
echo "E-mail: ".$email."<br>";
}
}
?>
В php скрипте выше написано:
1) Если данные переданы методом POST, то проверяем поочерёдно каждый из них на существование.
2) Если существует переменная, то обрезаем теги и экранируем данные для защиты и сохраняем в соответствующую переменную.
3) Выводим значение переменной на экран.

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

Сначала пропишем классы оформления для input формы, если данные валидны (class="good", подсвечиваться будет зеленым цветом) и данные не валидны (class="bad", подсвечиваться будет красным цветом).

<style>
.bad {border-color: #ff0000;}
.good {border-color: #00ff00;}
</style>

Как и говорил выше, удобнее вывести проверку регулярным выражением в отдельную функцию, назовем ее  isValid, она будет возвращать true  если данные валидны и false - если нет. Так же у нее будет два параметра:
1) идентификатор input, в котором заполняли данные
2) шаблон регулярного выражения для проверки

Т.е. функция будет выглядеть так 
function isValid(id, pat) {
var value = $(id).val();
var pattern = new RegExp("^"+pat+"","i");
if (pattern.test(value)) {
return true;
}
else {
return false;
}
}
И теперь пропишем событие изменения (change) в input для запуска проверки валидности.

        /*ставим проверку события ввода символов в поле телефона*/
        $("#phone").change( function(){
            
            /*запускаем нашу функцию проверки. Передаем идентификатор input и шаблон выражения*/
var phone = isValid("#phone", '(8|7|\\+7){0,1}[- \\\\(]{0,}([9][0-9]{2})[- \\\\)]{0,}(([0-9]{2}[-\n' +
' ]{0,}[0-9]{2}[- ]{0,}[0-9]{3})|([0-9]{3}[- ]{0,}[0-9]{2}[- ]{0,}[0-9]{2})|([0-9]{3}[-\n' +
' ]{0,}[0-9]{1}[- ]{0,}[0-9]{3})|([0-9]{2}[- ]{0,}[0-9]{3}[- ]{0,}[0-9]{2}))'); /*Проверяем результат функции. Она вернет либо ture либо false*/
if(phone){ /*Если данные валидны, то убираем класс bad и добавляем класс good*/
$('#phone').removeClass('bad');
$('#phone').addClass('good');
}
else { /*Если данные не валидны, то убираем класс good и добавляем класс bad*/
$('#phone').removeClass('good');
$('#phone').addClass('bad');
}
});
И так для каждого поля input.

Получится так 

$(document).ready(function() {

$("#phone").change( function(){

var phone = isValid("#phone", '(8|7|\\+7){0,1}[- \\\\(]{0,}([9][0-9]{2})[- \\\\)]{0,}(([0-9]{2}[-\n' +
' ]{0,}[0-9]{2}[- ]{0,}[0-9]{3})|([0-9]{3}[- ]{0,}[0-9]{2}[- ]{0,}[0-9]{2})|([0-9]{3}[-\n' +
' ]{0,}[0-9]{1}[- ]{0,}[0-9]{3})|([0-9]{2}[- ]{0,}[0-9]{3}[- ]{0,}[0-9]{2}))');
if(phone){
$('#phone').removeClass('bad');
$('#phone').addClass('good');
}
else {
$('#phone').removeClass('good');
$('#phone').addClass('bad');
}

});


$("#snils").change( function(){
var snils = isValid("#snils", '\\d{3}-\\d{3}-\\d{3} \\d{2}');
if(snils){
$('#snils').removeClass('bad');
$('#snils').addClass('good');
}
else {
$('#snils').removeClass('good');
$('#snils').addClass('bad');
}

});

$("#email").change( function(){
var email = isValid("#email", '[a-zA-Zа-яА-ЯёЁ_\\d][-a-zA-Zа-яА-ЯёЁ0-9_\\.\\d]*\\@[a-zA-Zа-яА-ЯёЁ\\d][-a-zA-Zа-яА-ЯёЁ\\.\\d]*\\.[a-zA-Zа-яА-Я]{2,6}$');
if(email){
$('#email').removeClass('bad');
$('#email').addClass('good');
}
else {
$('#email').removeClass('good');
$('#email').addClass('bad');
}

});


});
</script>
У нас теперь работает валидация данных в форме. 

Для проверки введем телефон правильно, а почту нет.


Скрипт работает.

Теперь доведем скрипт до логического завершения.

Создадим глобальные javascript переменные для каждого поля со значением валидности по умолчанию false и переменную flag = true.

var phone = false;
var snils = false;
var email = false;
var flag = true;

Т.е. когда страница загружена и она пустая все поля пустые и невалидны.

Но когда посетитель будет заполнять поле, будет срабатывать событие change и записывать в глобальную переменную данного input значение true если валидно и false - если нет.

Поэтому правим обработчик наших событий и в каждый добавляем функцию isComplate(), так как если поле введено надо проверять все ли теперь поля валидны и можно активировать кнопку "Сохранить".

$(document).ready(function() {
    $("#phone").change( function(){   
phone = isValid("#phone", '(8|7|\\+7){0,1}[- \\\\(]{0,}([9][0-9]{2})[- \\\\)]{0,}(([0-9]{2}[-\n' +
' ]{0,}[0-9]{2}[- ]{0,}[0-9]{3})|([0-9]{3}[- ]{0,}[0-9]{2}[- ]{0,}[0-9]{2})|([0-9]{3}[-\n' +
' ]{0,}[0-9]{1}[- ]{0,}[0-9]{3})|([0-9]{2}[- ]{0,}[0-9]{3}[- ]{0,}[0-9]{2}))');
if(phone){
$('#phone').removeClass('bad');
$('#phone').addClass('good');
}
else {
$('#phone').removeClass('good');
$('#phone').addClass('bad');
}
isComplate();
});


$("#snils").change( function(){
snils = isValid("#snils", '\\d{3}-\\d{3}-\\d{3} \\d{2}');
if(snils){
$('#snils').removeClass('bad');
$('#snils').addClass('good');
}
else {
$('#snils').removeClass('good');
$('#snils').addClass('bad');
}
isComplate();
});

$("#email").change( function(){
email = isValid("#email", '[a-zA-Zа-яА-ЯёЁ_\\d][-a-zA-Zа-яА-ЯёЁ0-9_\\.\\d]*\\@[a-zA-Zа-яА-ЯёЁ\\d][-a-zA-Zа-яА-ЯёЁ\\.\\d]*\\.[a-zA-Zа-яА-Я]{2,6}$');
if(email){
$('#email').removeClass('bad');
$('#email').addClass('good');
}
else {
$('#email').removeClass('good');
$('#email').addClass('bad');
}
isComplate();
});


})
Мы указали функцию isComplate(), но сами ее не написали, вставляем код функции

function isComplate(){
flag = true;
if (phone == false) flag = false; if (snils == false) flag = false; if (email == false) flag = false;

if (flag==true) {
$('#add_in_edit').removeAttr( "disabled" );
$('#add_in_edit').val( "Сохранить" );
}
else {
$('#add_in_edit').attr( "disabled", "disabled" );
$('#add_in_edit').val( "Отметьте все поля для сохранения!" );
}
}
Что происходит в функции isComplate(). Каждую новую проверку мы выставляем переменную flag = true, для проверки поочередно всех полей, если будет хоть одно не валидное, оно поменяет значение на false и уже условие активации кнопки сохранить не отработает.

Логика скрипта:
1) Посетитель заполняет все поля пока они не загорятся зеленым (пройдут валидацию)
2) Если все поля валидны, то кнопка становится активна и меняется текст кнопки на "Сохранить".

Как проверить на валидность каждое поле. Я сделал так.
1) Для каждого поля создал переменную в javascript и присвою значение false. Т.е. по умолчанию у меня все поля не валидны
2) Создам переменную flag = true; 
3) Создам функцию, которая будет проверять все поля на валидность isComplate()
4) В isComplate() будет проверяться каждое поле на валидность, и если хотя бы одно поле не валидно, переменная flag станет false и кнопка не будет активной. Если все валидны - кнопка станет активной.



В итоге весь код выглядит следующим образом

<?php
if ($_SERVER['REQUEST_METHOD'] == "POST"){
if (isset($_POST['phone'])) {
$phone = htmlentities(strip_tags($_POST['phone']));
echo "Телефон: ".$phone."<br>";
}
if (isset($_POST['snils'])) {
$snils = htmlentities(strip_tags($_POST['snils']));
echo "СНИЛС: ".$snils."<br>";
}
if (isset($_POST['email'])) {
$email = htmlentities(strip_tags($_POST['email']));
echo "E-mail: ".$email."<br>";
}
}


?>
<script src="jquery-3.2.1.min.js"></script>
<script>


function isComplate(){
flag = true;

if (phone == false) flag = false;
if (snils == false) flag = false;
if (email == false) flag = false;

if (flag==true) {
$('#add_in_edit').removeAttr( "disabled" );
$('#add_in_edit').val( "Сохранить" );
}
else {
$('#add_in_edit').attr( "disabled", "disabled" );
$('#add_in_edit').val( "Отметьте все поля для сохранения!" );
}
}

function isValid(id, pat) {
var value = $(id).val();
var pattern = new RegExp("^"+pat+"","i");
if (pattern.test(value)) {
console.log('valid id='+id+' value='+value);
return true;
}
else {
console.log('invalid id='+id+' value='+value);
return false;
}
}


var phone = false;
var snils = false;
var email = false;
var flag = true;


$(document).ready(function() {

$("#phone").change( function(){
phone = isValid("#phone", '(8|7|\\+7){0,1}[- \\\\(]{0,}([9][0-9]{2})[- \\\\)]{0,}(([0-9]{2}[-\n' +
' ]{0,}[0-9]{2}[- ]{0,}[0-9]{3})|([0-9]{3}[- ]{0,}[0-9]{2}[- ]{0,}[0-9]{2})|([0-9]{3}[-\n' +
' ]{0,}[0-9]{1}[- ]{0,}[0-9]{3})|([0-9]{2}[- ]{0,}[0-9]{3}[- ]{0,}[0-9]{2}))');
if(phone){
$('#phone').removeClass('bad');
$('#phone').addClass('good');
}
else {
$('#phone').removeClass('good');
$('#phone').addClass('bad');
}
isComplate();
});


$("#snils").change( function(){
snils = isValid("#snils", '\\d{3}-\\d{3}-\\d{3} \\d{2}');
if(snils){
$('#snils').removeClass('bad');
$('#snils').addClass('good');
}
else {
$('#snils').removeClass('good');
$('#snils').addClass('bad');
}
isComplate();
});

$("#email").change( function(){
email = isValid("#email", '[a-zA-Zа-яА-ЯёЁ_\\d][-a-zA-Zа-яА-ЯёЁ0-9_\\.\\d]*\\@[a-zA-Zа-яА-ЯёЁ\\d][-a-zA-Zа-яА-ЯёЁ\\.\\d]*\\.[a-zA-Zа-яА-Я]{2,6}$');
if(email){
$('#email').removeClass('bad');
$('#email').addClass('good');
}
else {
$('#email').removeClass('good');
$('#email').addClass('bad');
}
isComplate();
});


})
</script>

<style>
.bad {border-color: #ff0000;}
.good {border-color: #00ff00;}
</style>

<h3>Пример работы с проверкой ввода на валидность через регулярные выражения</h3>

<form action="<?=$_SERVER['PHP_SELF']?>" method="POST">
<table>
<tr>
<td>
<label>Телефон мобильный</label>
</td>
<td>
<input id="phone" placeholder="+7 (496) 444-44-44" type="text" name="phone" value="<?=$phone?>" size="20" />
</td>
</tr>
<tr>
<td>
<label>СНИЛС</label>
</td>
<td>
<input id="snils" placeholder="+111-111-111 11" type="text" name="snils" value="<?=$snils?>" size="20" />
</td>
</tr>
<tr>
<td>
<label>email</label>
</td>
<td>
<input id="email" placeholder="info@site-ontop.ru" type="text" name="email" value="<?=$email?>" size="20" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" id="add_in_edit" disabled value="Отметьте все поля для сохранения"></td>
</tr>
</table>
</form>



Файл: Исходный код Загрузить

Возврат к списку



6лет
опыта
разработки
49
выполненых
проектов
100%
клиентов
нас рекламируют своим друзьям
6 лет
разрабатываю
сервисы для Гос органов