如何修复手机号自动添加88/880国家代码不符合规则的问题？

原有代码核心问题 #

• 条件判断误用赋值运算符=，而非相等判断运算符===，导致判断逻辑完全失效
• 没有判断号码是否已经携带88前缀，会出现重复添加前缀的问题
• keyup事件每输入一个字符就会触发一次，没有做防重复判断，会出现前缀无限叠加的异常
• else分支的$("#phone").val()没有传入参数，会直接清空输入框内容
• 校验规则中的number: true会和携带+的号码格式冲突，如果需要支持+88前缀建议移除该规则

修复后的完整代码 #

JS代码 #

$(document).ready(function() {
    // 记录上一次处理完成的号码，避免修改输入值后循环触发事件
    let lastProcessedValue = '';
    // 改用input事件，覆盖粘贴、输入法输入等更多场景，兼容性更好
    $('#phone').on('input', function() {
        // 先过滤掉输入中的非数字字符，避免空格、特殊符号干扰长度判断
        let currentValue = this.value.replace(/\D/g, '');
        // 和上一次处理结果一致就直接返回，避免死循环
        if (currentValue === lastProcessedValue) return;
        
        let processedValue = currentValue;
        // 先判断是否已经携带88前缀，已携带就不做修改
        const hasCountryPrefix = currentValue.startsWith('88');
        if (!hasCountryPrefix) {
            const valueLength = currentValue.length;
            // 11位且0开头的号码，前缀加88
            if (valueLength === 11 && currentValue.startsWith('0')) {
                processedValue = '88' + currentValue;
            } 
            // 10位号码，前缀加880
            else if (valueLength === 10) {
                processedValue = '880' + currentValue;
            }
        }
        // 更新输入框值和上一次处理记录
        lastProcessedValue = processedValue;
        $(this).val(processedValue);
    });

    $.validator.addMethod("countryValid", function(value, element) {
        return this.optional(element) || /^(?:\+88|88)?(01[3-9]\d{8})$/i.test(value);
      }, "Please enter valid phone no."); 

    $("#my_form").validate({
        rules: {
            phone : {
                required: true,
                // 若不需要支持+88格式可保留该规则，否则直接删除
                // number: true,
                countryValid: true
            }
        }
    });
});

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>

<form id="my_form">
  <input type="text" name="phone" id="phone" />
  <br><br>
  <button type="submit">Submit</button>
</form>

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