允许输入以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;
    });
})();