如何使用HTML模式的JQuery InputMask

Question

我有电话号码的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

Answer 1

你正在使用的掩码是格式化输入值,所以如果你写一个数字,它将使用这个掩码格式化,这意味着它将不再匹配你的模式.

解:

因此,您只需编辑模式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}" />

这是一个更新的工作小提琴.