如何将 JQuery InputMask 与 HTML 模式一起使用

Question

我有 HTML 个用于 phone 个数字的输入框。

我在输入 8 600 00 000 后使用 InputMask 格式化输入 860000000。

$(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

您必须像下面这样使用 keyup 事件和 regex
不需要使用库

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"/>

Answer 2

好吧，您使用的掩码正在格式化输入值，因此如果您写入数字，它将使用此掩码进行格式化，这意味着它将不再匹配您的模式。

解法：

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

这是一个 updated working Fiddle。

Answer 3

不需要使用RegEx。

该插件提供了一种使用 data-inputmask 属性在元素本身上添加遮罩的方法。在掩码的值中，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'" />

如何将 JQuery InputMask 与 HTML 模式一起使用

How to use JQuery InputMask with HTML pattern

html

javascript

regex

jquery

input-mask