Сегодня речь пойдет о вполне актуальной задаче — проверке вводимых пользователем значений в input поля Интернет-страницы. Стоит отметить что данная проверка всегда должна проводиться на стороне сервера, однако приятно, когда пользователю сообщается об ошибке сразу, а не после перезагрузки страницы. И так, начнем…
Обговорим детали задачи более подробно. Имеем Интернет-страницу с полем ввода значений и кнопкой. Кнопка должна отображаться лишь тогда, когда введенные в input данные соответсвуют некоторому шаблону.
<html> <body> <input type="text" /> <input type="button" value="OK" id="btn" /> </body> </html>
Как любитель универсальных решений, функцию проверки вводимых данных будем делать с возможностью добавления различных шаблонов. Вызов функции проверки повесим на событие отжатия клавиши в поле input. Подумав, что да как, и немного забежав вперед, опишем функцию проверки как:
function CheckString(_this, blocked_id, expr, template, maxlen)
{}
, где _this — айди интупа для проверки, blocked_id — айди элемента, который будем скрывать, expr — не стандартный шаблон для проверки, template — имя стандартного шаблона для проверки, maxlen — максимальная длина вводимого значения
И так сама функция:
function CheckString(_this, blocked_id, expr, template, maxlen)
{
function GET_REXEP(str)
{
switch (str)
{
case "PASSPORT_NUMBER": return /\d\d\d\d\s\d\d\d\d\d\d$/;
case "PASSPORT_ABOUT": return /\d\d\.\d\d\.\d\d\d\d\s.*$/;
default: return /.*/;
}
}
//Значения по умолчанию
maxlen = maxlen || -1;
template = template || "";
if (template != "") expr = GET_REXEP(template);
if (maxlen != -1 && _this.value.length > maxlen)
_this.value = _this.value.substr(0, maxlen-1);
if (_this.value == "" || expr.test(_this.value))
document.getElementById(blocked_id).style.visibility = "visible";
else
document.getElementById(blocked_id).style.visibility = "hidden";
}
Мы описали функцию, имеющую два стандартных шаблона для проверки: номер паспорта в виде 4 числа пробел 6 чисел и информация о паспорте в виде дата выдачи пробел любая строка.
Теперь если мы хотим проверять поле input на соответствие номеру паспорта, пишем так:
<input type="text" onkeyup="CheckString(this,'btn','','PASSPORT_NUMBER');" />
Пример проверки номера паспорта:
