Валідація даних по масці засобами jQuery

18

Від автора: У цьому уроці ми навчимося здійснювати валідацію даних по масці. Що значить по масці? Іншими словами, це означає відповідність даних заданому формату. Наприклад, ми хочемо, щоб при введенні даних у певному місці був автоматично доданий якийсь символ. Або хочемо, щоб приймалися тільки цифри і т. д. У цьому уроці ми будемо проводити валідацію по масці телефонного номера.

Валідація даних по масці засобами jQueryВалідація даних по масці засобами jQuery

Отже, ми хочемо використовувати наступний формат номера: xxx xxx-xx-xx. Спочатку йдуть 3 цифри, після – пробіл, далі знову 3 цифри, дефіс, 2 цифри, дефіс і знову 2 цифри. У результаті ми маємо 10 цифр і 3 роздільника в певних позиціях рядка. Давайте набросаєм приблизний алгоритм вирішення задачі:

При зміні значення поля ми повинні перевірити, не порожньо дане поле. Якщо поле виявиться порожнім, тоді ми припинимо подальше виконання програми.

Якщо у полі є, тоді спробуємо видалити з нього всі символи, крім цифр. Після цього знову перевіримо, не пусте поле, і зупинимо скрипт, якщо умова виконується.

І, нарешті, пройдемося по отриманої рядку і в потрібних позиціях рядка поставимо необхідні роздільники.

Ось такий алгоритм у нас вийшов. У відео версії уроку ви знайдете докладний пояснення коду, а тут я його просто наведу. Отже, наше поле для введення телефонного номера:

І скриптова частина (не забуваємо про необхідність підключення бібліотеки 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);
});
});

На цьому я з вами прощаюся. Удачі і до нових зустрічей!