Проверка ввода номера телефона через 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>

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