Паттерн номер телефона HTML+input mask js

Иногда нам приходится проверять правильность ввода номера телефона по конкретному шаблону. Здесь Вы найдете этот шаблон для HTML, а также input mask с примерами для HTML+JS.

Сам шаблон (pattern) для html выглядит так:

pattern="^\+\d{2} \(\d{3}\) \d{3}-\d{2}-\d{2}$"

Использовать так:

<input type="tel" autocorrect="off" autocapitalize="off" pattern="^\+\d{2} \(\d{3}\) \d{3}-\d{2}-\d{2}$" minlength="19" name="login" class="form-control" id="login" placeholder="Номер телефона" required="">

Разберем HTML:

• autocorrect="off" - отключаем проверку орфографии для телефонов/планшетов при вводе
• autocapitalize="off" - отменяет ввод заглавных букв для тел/планш.
• pattern="^\+\d{2} \(\d{3}\) \d{3}-\d{2}-\d{2}$" - сам шаблон ввода
• minlength="19" - минимальное количество символов при вводе
• name="login" - имя поля
• class="form-control" - класс
• id="login" - идентификатор
• placeholder="Номер телефона" - подсказка
• required="" - поле обязательно для заполнения

Данный шаблон будет пропускать только номера, которые имеют формат:

+38 (000) 000-00-00
+79 (000) 000-00-00

Подключаем jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Подключаем input mask jQuery документация

<script src="/inputmask.js"></script>

Использование:

<input type="text" class="form-control" data-mask="999-99-999-9999-9" placeholder="ISBN">

Или jQuery:

$('.inputmask').inputmask({ mask: '999-99-999-9999-9' })

Еще примеры ввода данных:

1. Файлы:

<div class="fileinput fileinput-new input-group" data-provides="fileinput">
 <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
 <span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
 <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>

<div class="fileinput fileinput-new" data-provides="fileinput">
 <span class="btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
 <span class="fileinput-filename"></span>
 <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
</div>

2. Изображения

<div class="fileinput fileinput-new" data-provides="fileinput">
 <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
 <div>
 <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
 <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
 </div>
</div>

<div class="fileinput fileinput-new" data-provides="fileinput">
 <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
 <img data-src="holder.js/100%x100%" alt="...">
 </div>
 <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
 <div>
 <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
 <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
 </div>
</div>

Для задействования добавьте:

data-provides="fileinput"

в поля ввода файлов:

<input type="file" data-provides="fileinput">

Или активируйте данную функцию с помощью jQuery:

$('.fileinput').fileinput()

Можно также подключить проверку validator.js

<script src="/validator.min.js"></script>

И bootstrap:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Создать вот такую вот форму:

 <form data-toggle="validator">
 <div class="form-group">
 <label for="inputName" class="control-label">Номер телефона</label>
 <input type="tel" autocorrect="off" autocapitalize="off" pattern="^\+\d{2} \(\d{3}\) \d{3}-\d{2}-\d{2}$" minlength="19" class="form-control" id="inputName" placeholder="Номер телефона" required>
 </div>
 <button type="submit">Отправить</button>
 </form>

Файлы Паттерн номер телефона HTML+input mask js: