Как использовать jQuery InputMask с HTML-шаблоном

у меня есть поле ввода HTML для телефонных номеров.

я использую InputMask формат ввода 860000000 в следующее 8 600 00 000 при вводе.

$(window).load(function()
{
   var phones = [{ "mask": "# ### ## ###"}, { "mask": "# ### ## ###"}];
    $('#phone').inputmask({ 
        mask: phones, 
        greedy: false, 
        definitions: { '#': { validator: "[0-9]", cardinality: 1}} });
});

Я также использую шаблон HTML, чтобы проверить, начинаются ли числа с 86 и там всего 9 цифр, но с InputMask Он перестал работать и никак не может этого достичь:

<label for="phone" class="first-col">Mobile No.:</label>
<input type="text" id="phone" placeholder="8 600 00 000" required pattern="(86)d{7}" />

и CSS для добавления зеленых границ, если они действительны:

input:required:valid {
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}

у вас есть идеи?

там JS Fiddle

6
html input-mask javascript jquery regex

3 ответов

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

устранение:

поэтому вам просто нужно отредактировать свой шаблон Regex таким образом, он соответствует новому отформатированному значению, поэтому используйте (8 6)\d{2} \d{2} \d{3} образец:

<input type="text" id="phone" placeholder="8 600 00 000" required pattern="(8 6)\d{2} \d{2} \d{3}" />

демо:

вот рабочий фрагмент:

input:required:valid {
	box-shadow: 0 0 5px #5cd053;
	border-color: #28921f;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.1.62/jquery.inputmask.bundle.js"></script>
<script> 
$(window).load(function()
{
   var phones = [{ "mask": "# ### ## ###"}, { "mask": "# ### ## ###"}];
    $('#phone').inputmask({ 
        mask: phones, 
        greedy: false, 
        definitions: { '#': { validator: "[0-9]", cardinality: 1}} });
});
</script>
<label for="phone" class="first-col">Mobile No.:</label>
<input type="text" id="phone" placeholder="8 600 00 000" required pattern="(8 6)\d{2} \d{2} \d{3}" />

и это обновленный рабочий Скрипка.

6

нет необходимости использовать RegEx.

плагин дает возможность добавить маску на сам элемент, используя data-inputmask. В значении mask 9 будет соответствовать любой цифре, в то время как 8 и 6 будет соответствовать только те цифры. Используя это, мы можем выполнить условие, как показано ниже.

в HTML добавить:

<input id="phone" data-inputmask="'mask': '8 699 99 999'" />
                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

маска 8 699 99 999 будет соответствовать номерам, начинающимся с 86 последовало семь десятичные знаки.

в JavaScript добавить:

$('#phone').inputmask();

вот именно!

$(document).ready(function() {
  $('#phone').inputmask();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.1.62/jquery.inputmask.bundle.js"></script>
<input id="phone" data-inputmask="'mask': '8 699 99 999'" />
2

вы должны использовать keyup событие и regex следующим
нет необходимости использовать libs

document.getElementById("phone").addEventListener("keyup", function(){
    // restart the match
    this.value = this.value.replace(/\s/g, "");
    // Assess the amount needed
    var v = this.value.match(/(\d)(\d{1,3})?(\d{1,2})?(\d+)?/);
    if(v){
      // Save the desired value depending on its existence
      v =  (v[1]?v[1]+(v[2]?" "+v[2]+(v[3]?" "+v[3]+(v[4]?" "+v[4]:""):""):""):"");
      // and yea!
      this.value = v;
    }
});
<input  type="text" id="phone" placeholder="8 600 00 000" required onkeypress='return event.charCode >= 48 && event.charCode <= 57 && this.value.length < 12' pattern="\b86" title="description" value="8 6"/>
0