Все для создания и продвижения сайтов

Верстка, программирование, SEO

12 22
цвет сайта

Проверка ввода номера телефона через jquery

количество просмотров 6124
Проверка ввода номера телефона через jquery

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

И хочется сделать проверку на это поле, чтобы потенциальный клиент вбил действительно свой номер или хотябы в нужном формате.

Рассмотрим, как реализовать такое поле.

Демо (наведите курсор на поле)

Для jquery есть замечательная библиотека jquery.inputmask.js для маскировки поля, её и возьмём за основу.

Скачать jquery.inputmask

Сначала подключим jquery и библиотеку:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.inputmask.js"></script>

Теперь создадим поле с нужным нам ID для привязки скрипта, к примеру «phone».

    <input id="phone" type="text" name="phone" value="" />

Затем пишем следующий скрипт.

<script type="text/javascript">
$(document).ready(function() {
	$("#phone").inputmask("+7(999)999-99-99")
});
</script>

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

Последние статьи

Инструменты

Отблагодарить и поддержать автора
Если вы нашли ошибку, выделите её и нажмите Ctrl+Enter
Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.