javascript - 允许输入以 7,8 或 9 开头的手机号码

Question

我需要在输入标记中使用实时验证，以允许用户仅键入以 7,8 或 9 开头的数字。现在我有以下不起作用的东西。仅当用户在输入字段中键入数字 7 到 9 作为第一个数字时，才应将其显示在输入字段中。

<input type="tel" label="Mobile Number" pattern="^[7-9][0-9]{8}$" maxLength="10"/>

Answer 1

输入模式仅在提交时验证。

如果你想实时验证，可以使用javascript来实现

(function() {
    var input = document.getElementById('YOUR_INPUT_ID');
    var pattern = /^[7-9][0-9]{0,8}$/;
    var value = input.value;
    !pattern.test(value) && (input.value = value = '');
    input.addEventListener('input', function() {
        var currentValue = this.value;
        if(currentValue && !pattern.test(currentValue)) this.value = value;
        else value = currentValue;
    });
})();