Валидация данных по маске средствами jQuery

Валидация данных по маске средствами jQuery

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

скачать исходникискачать урок

Итак, мы хотим использовать следующий формат телефонного номера: xxx xxx-xx-xx. Вначале идут 3 цифры, после – пробел, далее снова 3 цифры, дефис, 2 цифры, дефис и снова 2 цифры. В итоге мы имеем 10 цифр и 3 разделителя в определенных позициях строки. Давайте набросаем примерный алгоритм решения задачи:

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

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

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

И скриптовая часть (не забываем о необходимости подключения библиотеки jQuery):

На этом я с вами прощаюсь. Удачи и до новых встреч!

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Полное руководство

Изучите самый популярный язык разработки и станьте высокооплачиваемым профи

Подробнее

Метки: , ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (8)

  1. Дмитрий

    Я немного изменил скрипт для телефонов из России и в частности Москвы
    (*) телефон
    $(document).ready(function() {

    $(‘#fone’).on(‘input’, function(){
    var val = $(this).val(),
    limit = 13;

    if( val == » ) {
    val=»+»;
    return;
    }
    var newVal = clearVal(val, limit);
    if(!newVal){
    $(this).val(»);
    return;
    }
    var res = getResString(newVal);
    if (res.charAt(0) == «-») res=res.substring(1,res.length);
    $(this).val(res);
    });

    });

    function clearVal(val, limit){
    if (val.charAt(0) == «+»)
    var newVal = «+» + val.replace(/[^\d]+/g, »);
    else var newVal = val.replace(/[^\d]+/g, »);
    if( newVal == «» ){
    return false;
    }else{
    return newVal.substring(0, limit);
    }
    }

    function getResString(newVal){
    var res = »;
    for(var i = 0; i 2) res += ‘-’;
    res += newVal.charAt(i);
    }else if ( (newVal.length — i) == 7 || res==»+7″ || res==»8″){

    if (i>0) {
    res += ‘ ‘;
    }
    res += newVal.charAt(i);
    }else{
    res += newVal.charAt(i);
    }
    //console.log(res);
    }
    return res;
    }

  2. Дмитрий

    Посылаю второй раз, при первой попытке пропали отдельные операторы
    (*) имя
    (*) телефон
    (*) e-mail
    $(document).ready(function() {
    $(«#form3″).submit(function() {
    if ($(«#imya»).val() == «») {
    alert(» не заполнено поле imya»);
    $(«#imya»).css(«background-color»,»#ffe4e1″);
    return false;
    }
    if ($(«#emale»).val() == «») {
    alert(» не заполнено поле emale»);
    $(«#emale»).css(«background-color»,»#ffe4e1″);
    return false;
    }

    });

    $(‘#fone’).on(‘input’, function(){
    var val = $(this).val(),
    limit = 13;

    if( val == » ) {
    val=»+»;
    return;
    }
    var newVal = clearVal(val, limit);
    if(!newVal){
    $(this).val(»);
    return;
    }
    var res = getResString(newVal);
    if (res.charAt(0) == «-») res=res.substring(1,res.length);
    $(this).val(res);
    });

    });

    function clearVal(val, limit){
    if (val.charAt(0) == «+»)
    var newVal = «+» + val.replace(/[^\d]+/g, »);
    else var newVal = val.replace(/[^\d]+/g, »);
    if( newVal == «» ){
    return false;
    }else{
    return newVal.substring(0, limit);
    }
    }

    function getResString(newVal){
    var res = »;
    for(var i = 0; i 2) res += ‘-’;
    res += newVal.charAt(i);
    }else if ( (newVal.length — i) == 7 || res==»+7″ || res==»8″){

    if (i>0) {
    res += ‘ ‘;
    }
    res += newVal.charAt(i);
    }else{
    res += newVal.charAt(i);
    }
    //console.log(res);
    }
    return res;
    }

  3. Евгений

    Спасибо! Доходчиво и понятно.

  4. Сергей

    Спс за содержательный урок — было бы очень интересно услышать продолжене (превращение данного кода в полноценный универсальный плагин).

  5. Виталий

    Спасибо за интересный урок. У меня вопрос: почему у вас в коде используется просто return; а не return false;

    • Андрей Кудлай

      Пожалуйста. Если функция завершается строкой return; — она возвращает undefined. Если функция завершается строкой return false; — она возвращает булево false. Значения undefined и false при нестрогом сравнении (==) будут равны. Так что без разницы что возвращать — неопределенное значение или же явное false — это одно и то же по факту. В коде урока же это и вовсе не имело значения, как я вижу, поскольку нужно было просто при определенном условии завершить работу функции, при этом без разницы что она будет возвращать.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree