按键触发手机号正则校验时仅对单字符生效，应如何解决？

问题根源 #

你当前代码的核心问题是：keypress 事件中你只提取了当前按下的单个字符和完整手机号正则做匹配，单个字符必然无法匹配需要多字符的手机号规则，自然没法校验完整的手机号字符串。同时你的正则没有添加起止匹配符，会出现部分匹配的误判问题。

调整方案 #

你需要把输入框已有的内容和当前输入的字符拼接后再做校验，同时优化正则规则，也可以直接监听input事件处理所有输入场景（包括粘贴、删除等操作），示例代码如下：

// 建议用on代替已废弃的bind，input事件覆盖所有输入场景
$('#SWF_Membership_SignUpPanel0_MobileNumber').on('input', function (event) {
    // 正则加^和$做完整匹配，允许中间可选的横杠，总长度符合手机号规则
    var regex = new RegExp('^09[0-9]-?[0-9]{3}-?[0-9]{4}$');
    var currentVal = $(this).val();
    // 只在输入长度符合规则时做完整校验，也可以按需求调整为实时校验格式合法性
    if (currentVal.replaceAll('-','').length === 10 && !regex.test(currentVal)) {
        Q.notifyWarning("wrong Phone number!");
        // 可根据需求添加删除错误内容、失焦等额外逻辑
    }
});

如果确实需要在按键按下的时候就拦截非法输入，可以用以下版本：

$('#SWF_Membership_SignUpPanel0_MobileNumber').bind('keypress', function (event) {
    // 正则适配输入中间状态，允许输入过程中未补全的合法格式
    var regex = new RegExp('^09[0-9]?-?[0-9]{0,3}-?[0-9]{0,4}$');
    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
    // 拼接已有内容和当前输入的字符做校验
    var expectVal = $(this).val() + key;
    if (!regex.test(expectVal)) {
        event.preventDefault();
        Q.notifyWarning("wrong Phone number!");
        return false;
    }
    return true;
});

核心修改点 #

• 给正则添加^开头和$结尾标识，避免部分匹配导致的校验失效
• 校验对象从单个输入字符改为「已有输入内容+当前输入字符」的完整待输入字符串
• 调整正则规则适配输入过程中的中间状态，不会在输入前几位的时候就误判为非法

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