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

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

Например, в тексте найти все ссылки на сайт или номер телефона или 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>