От автора: В этом уроке мы научимся осуществлять валидацию данных по маске. Что значит по маске? Иными словами, это значит соответствие данных заданному формату. Например, мы хотим, чтобы при вводе данных в определенном месте был автоматически добавлен некий разделитель. Или хотим, чтобы принимались только цифры и т.д. В этом уроке мы будем производить валидацию по маске телефонного номера.
Итак, мы хотим использовать следующий формат телефонного номера: xxx xxx-xx-xx. Вначале идут 3 цифры, после – пробел, далее снова 3 цифры, дефис, 2 цифры, дефис и снова 2 цифры. В итоге мы имеем 10 цифр и 3 разделителя в определенных позициях строки. Давайте набросаем примерный алгоритм решения задачи:
При изменении значения поля мы должны проверить, не пусто ли данное поле. Если поле окажется пустым, тогда мы прекратим дальнейшее выполнение программы.
Если в поле что-то есть, тогда пробуем удалить из него все символы, кроме цифр. После этого вновь проверим, не пусто ли поле, и остановим скрипт, если условие выполнится.
И, наконец, пройдемся по полученной строке и в нужных позициях строки поставим необходимые разделители.
Вот такой вот алгоритм у нас получился. В видео версии урока вы найдете подробное объяснение кода, а здесь я его просто приведу. Итак, наше поле для ввода телефонного номера:
|
1 |
<input type="text" id="phone"> |
И скриптовая часть (не забываем о необходимости подключения библиотеки jQuery):
|
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 34 35 36 37 38 39 40 |
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); }); }); |
На этом я с вами прощаюсь. Удачи и до новых встреч!
Комментарии (8)