Как с помощью JavaScript значение input поля фильтровать по регулярному выражению

Необходимость фильтровать с помощью JavaScript значение input поля на форме по регулярному выражению может возникнуть, например: при создании On-Line калькуляторов, анкет, форм с контактными данными и пр.

Подавляющее большинство примеров в сети грешат одной общей проблемой: фильтруя ввод, они блокируют работу служебных клавиш. Регулярно замечаю, как на том или ином сайте сделали поле, в которое можно вводить только число, но клавиши управления курсором не работают.

В моем примере работают все служебные клавиши. Функцию можно использовать не только для фильтрации ввода чисел, но и других выражений. Достаточно задать необходимое регулярное выражение.

Общий алгоритм

Суть в том, что на событие “onkeypress” поля ввода “input” цепляем приведенную ниже функцию. Вторым параметром необходимо подать регулярное выражение, по которому будут проверяться вводимые символы.

Тут важно понимать, что проверка производится посимвольно, а не по формату. Поэтому проверить на предмет соответствия формату, например номера телефона не получится. Проверить можно только допустимость ввода того или иного символа.

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

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

Текст функции

Текст функции можете скопировать, как есть на свою страничку или в JavaScript файл.

function field_input_control(evn, pattern) {

	evn = evn || window.event;
	var sender = evn.target || evn.srcElement;
	var isIE = document.all;

	if (sender.tagName.toUpperCase()=='INPUT')
	{
		var keyPress = isIE ? evn.keyCode : evn.which;

		if (keyPress < 32 || evn.altKey || evn.ctrlKey)
			return true;

	    var symbPress = String.fromCharCode(keyPress);

	    if (!pattern.test(symbPress))
	    	return false;

	}

	return true;

}

Привязка к полю ввода

Связывая функцию с событием “onkeypress” поля ввода “input”, не забываем поставить “return”, поскольку возвращаемое значение функцией должно блокировать или разрешать нажатие текущей клавиши.

Вторым аргументом следует указать регулярное выражение, согласно которому вышеприведенная функция JavaScript значение input будет фильтровать.

<input type="text" id="calc" value="" onkeypress="return field_input_control(event, /\d/);" />

Пример как с помощью функции JavaScript значение input поля можно фильтровать

Ввод числа

В этом примере ввод ограничен только числами.

<input type="text" id="calc" value="" onkeypress="return field_input_control(event, /\d/);" />

Ввод строки

В этом примере формат ввода ограничен латинскими символами в нижнем регистре.

<input type="text" id="calc" value="" onkeypress="return field_input_control(event, /[a-z]/);" />

Совместимость функции

Пример был проверен: на Internet Explorer 7+, Mozilla Fire Fox 3+, Chrome (тут, по-моему, вообще все работает всегда на «ура»), Opera и Safari.