带掩码的手机号输入框onfocusout长度验证实现方案咨询

1. 调整HTML结构 #

在手机号输入框下方添加一个错误提示容器，默认隐藏：

<input id="phone1" placeholder="(___) ___-____"/>
<span id="phone-error" style="color: red; display: none;">此字段应为10位字符</span>

2. 实现失焦验证逻辑 #

借助inputmask提供的unmaskedvalue()方法获取纯数字内容，在focusout事件中完成校验：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>
<script>
$("#phone1").inputmask({ "mask": "(999) 999-9999" });

// 绑定失去焦点事件
$("#phone1").on("focusout", function() {
    const pureDigits = $(this).inputmask('unmaskedvalue');
    const errorEl = $("#phone-error");
    
    // 非必填规则：仅当有输入但长度不足10位时显示提示
    if (pureDigits.length > 0 && pureDigits.length !== 10) {
        errorEl.show();
    } else {
        errorEl.hide();
    }
});
</script>

核心细节说明 #

• 纯数字提取：inputmask('unmaskedvalue')能直接拿到输入的纯数字，不用手动过滤掩码符号（括号、空格、横杠），准确性更高。
• 非必填适配：只有用户输入了部分内容但未凑齐10位数字时才触发提示，完全不输入则不显示错误，符合需求。
• 上限无需处理：原掩码已经限制最多输入10位数字，所以不用考虑长度超限的情况。

内容的提问来源于stack exchange，提问作者rimi