Запрещаем ввод любых символов кроме чисел при помощи jQuery

16 сентября 2014 Антон Кулешов 2433 0

Сегодня я расскажу о полезном сниппете, используя который, можно организовать запрет ввода символов в поля формы. Подобный функционал очень важен для защиты от хакерского взлома, ведь мало кто обрадуется, зайдя в одно прекрасное утро на свой сайт и увидев табличку «hacked by Вася Пупкин». Помните, проверять поля форм на наличие «вредоносных» символов очень важно!

Реклама

Запрет ввода символов мы реализуем при помощи библиотеки jQuery. В этом случае проверка у нас будет происходить еще до отправки данных на сервер.

После того, как вы подключите библиотеку, можно смело применять функцию:

function onlyNumbers(el){

	el.on("change keyup input click", function(){
		if(this.value.match(/[^0-9]/g)){
			this.value = this.value.replace(/[^0-9]/g, "");
		};
	});

	return false;
};

Как вы могли заметить, мы пользовались jQuery методом on(), передав ему четыре значения параметра событий: change, keyup, input, click. Это позволяет отследить все изменения в поле ввода, а, впоследствии, через регулярное выражение, отсечь ненужные символы. В примере мы оставляем только числа, что идеально подойдет для поля с вводом номера телефона. Для других полей можно использовать аналогичную функцию, заменив в ней регулярное выражение на нужное.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Всплывающие подсказки на CSS

28 декабря 2015 Антон Кулешов

После вынужденного отсутствия я вернулся к привычному распорядку дня и сегодня продолжу пополнять коллекцию falbar новыми решениями. Тема статьи не раз уже рассматривалась на сайте – всплывающие подсказки, но библиотека, о которой пойдет речь, возможно, наилучшим образом подойдет для вашего проекта, так как не использует сторонних скриптов, написанных на JavaScipt или jQuery, а только HTML и CSS.

Плагин SergeLand Image Zoomer – увеличение картинок

18 марта 2016 Антон Кулешов

Совсем недавно я писал статью на тему добавления эффекта лупы при наведении на изображение, и вот как раз наткнулся на ещё одно решение, которое можно смело добавлять себе в портфель инструментов веб-разработчика. Рассматривать мы будем jQuery плагин под названием SergeLand Image Zoomer 3-ей версии. Это решение с богатым функционалом и подробной документацией, так как разработчик его русскоязычный - все настройки описаны подробно и понятным языком на официальном сайте, там же можно найти и примеры его использования.

FlexSlider - адаптивный слайдер для сайта

23 ноября 2014 Антон Кулешов

Сегодня мы рассмотрим адаптивный слайдер на jQuery – FlexSlider. В самом начале хочется отметить несколько пунктов, которыми можно его описать при первом знакомстве.