Фильтрация и проверка данных полей
Фильтры ввода
Фильтры помогают отсеять некорректные данные еще на этапе ввода информации пользователем, блокируя «лишние» символы. Для этого можно использовать обработчики событий onKeyPress, onKeyDown и onKeyUp.
Номера телефонов
Для номеров телефонов используются только цифры, знаки «+» и «-». А также нужно оставить пользователю возможность использовать клавиши Enter, Tab, Backspace, Del, стрелки влево-вправо.
jQuery(".phone").keypress (
function(event)
{
var key, keyChar;
if(!event) var event = window.event;
if (event.keyCode) key = event.keyCode;
else if(event.which) key = event.which;
/*
если нажата одна из следующих клавиш: enter, tab, backspace, del, стрекла влево, стрелка вправо
тогда на этом завершаем работу функции, т..к эти клавиши нужны для нормальной работы с полями форм
*/
if(key==null || key==0 || key==8 || key==13 || key==37 || key==39 || key==46 || key==9) return true;
keyChar=String.fromCharCode(key);
/*
если нажтый символ не является цифрой или "-", или "+", тогда значение поля не меняется
*/
if(!/[0-9-+]/.test(keyChar)) return false;
});
Только числа
jQuery(".number").keypress (
function(event)
{
var key, keyChar;
if(!event) var event = window.event;
if (event.keyCode) key = event.keyCode;
else if(event.which) key = event.which;
/*
если нажата одна из следующих клавиш: enter, tab, backspace, del, стрекла влево, стрелка вправо
тогда на этом завершаем работу функции, т..к эти клавиши нужны для нормальной работы с полями форм
*/
if(key==null || key==0 || key==8 || key==13 || key==37 || key==39 || key==46 || key==9) return true;
keyChar=String.fromCharCode(key);
/*
d - это зарезервированное сокращение в регулярных выражениях, означает любая цифра
*/
if(!/d/.test(keyChar)) return false;
});
Проверка данных
Этот этап проверки происходит после заполнения полей формы пользователем, но до отправки на сервер, обычно по нажатию кнопки отправки данных (submit).
Проверка телефона на соответствие заданному формату
Например, возьмем распространенную форму записи номера телефона: +1(123)123-45-67.
jQuery("form").submit (
function()
{
/*
первый символ + (обязательно)
далее код страны (минимум 1 цифра)
далее открываем скобки (обязательно)
код оператора - минимум одна цифра (обязательно)
закрываем скобки (обязательно)
первые цифры номера - минимум одна (обязательно)
тире (обязательно)
две цифры (обязательно)
тире (обязательно)
две цифры (обязательно)
*/
if(!/^+{1}d+({1}d+)d{1,3}-d{2}-d{2}/.test(jQuery("#phone").val()))
{
alert("телефон не соответствует формату");
return false;
}
});
Заметка
Вообще круто было бы давать пользователю вводить телефон только в правильном формате еще до нажатия на submit.
Проверка корректности email
Email может содержать любую латинскую букву в верхнем или нижнем регистре, цифры, символы «@», «-», «_», «.». К тому же почтовый адрес должен придерживаться строгих правил:
- обязательное наличие @ (при чем только в одном экземпляре)
- начинаться может только с цифр или латинских букв
- заканчиваться может только латинскими буквами
jQuery("form").submit (
function()
{
/*
первый символ должен быть символом слов. (минимум один)
далее может идти любой из символ слов, а так же тире и точка. (необязательно)
далее один символ @ (обязательно)
за ним один символ слова (обязательно)
далее может идти любой из символ слов, а так же тире и точка. (необязательно)
далее одна . (обязательно)
далее символы домена первого уровня: 2-4 символа (обязательно) это нужно подстраивать под свои нужды, ведь есть домены из более чем 4-х символов, например, .travel
*/
if(!/^w+[a-zA-Z0-9_.-]*@{1}w{1}[a-zA-Z0-9_.-]*.{1}w{2,4}$/.test(jQuery("#email").val()))
{
alert("Email некорректен!");
return false;
}
});
Данный метод не идеален. Например, он пропустит вот такой email: info@mail...ru. Или такой: info@mail-.ru. При большом желании можно написать регулярное выражение, которое отловит и эти адреса. Но в этом смысла не вижу, если пользователь захочет ввести «левый» email, это ему удастся. Например, представь каким должно быть регулярное выражение или проверка корректности email, если отслеживать хотя бы правильность домена первого уровня. Беглый поиск по Сети дал мне результат равный 270 различным доменам первого уровня. И это только англоязычные. А если вспомнить, что в наше время пытаются продвинуть домены на родных языках, то становится понятно, что такие тщательные проверки бессмысленны. По крайней мере на стороне клиента.
Подытожим
Обработка данных форм на стороне клиента в целом ускоряет работу интерфейсов — ведь при этом не нужно ждать ответ от сервера. Но не стоит от таких проверок требовать невозможного.