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

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

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

автор

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript.

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

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

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

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

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

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

<input type="text" id="phone">

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

function clearVal(val, limit){
	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 < newVal.length; i++){
		if( i == 3 ){
			res += ' ';
			res += newVal.charAt(i);
 		}else if( i == 6 || i == 8 ){
 			res += '-';
			res += newVal.charAt(i);
 		}else{
 			res += newVal.charAt(i);
 		}
	}
	return res;
}

$(function(){
	$('#phone').on('input', function(){
		var val = $(this).val(),
			limit = 10;
		if( val == '' ) return;

		var newVal = clearVal(val, limit);
		if(!newVal){
			$(this).val('');
			return;
		}
		var res = getResString(newVal);
		$(this).val(res);
	});
});

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

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки: , ,

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

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

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

  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. Сергей

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree