如何用MutationObserver检测输入值长度实现Bigcommerce手机号校验

你现有代码的问题很明确：

1. 配置的MutationObserver只监听DOM节点的增删改动，根本不会捕获输入框的value变化——输入框的value是元素的内置属性，不是HTML attribute，用户输入时不会触发DOM变更回调
2. 校验逻辑只在#phoneInput首次被插入DOM的时候执行一次，后续用户输入的时候根本不会重新跑校验逻辑，自然看不到边框变化
3. 你要的是「用户输完切走焦点时校验」的交互，完全没必要用MutationObserver硬盯值变化，直接绑原生事件是最稳妥、性能最好的方案。

注意：不要尝试用MutationObserver监听表单值变化，这个API本身设计用来监听DOM结构、节点属性的变更，不追踪表单元素的用户输入值，强行用的话只能开定时任务轮询value，性能很差。

<script>
(function(win) {
    'use strict';
    
    var listeners = [], 
    doc = win.document, 
    MutationObserver = win.MutationObserver || win.WebKitMutationObserver,
    observer;
    
    function ready(selector, fn) {
        // 存储选择器和对应回调
        listeners.push({
            selector: selector,
            fn: fn
        });
        if (!observer) {
            // 监听DOM树变动，适配BigCommerce结账页动态渲染的特性
            observer = new MutationObserver(check);
            observer.observe(doc.documentElement, {
                childList: true,
                subtree: true
            });
        }
        // 先检查一次当前DOM里有没有目标元素
        check();
    }
        
    function check() {
        // 遍历所有待监听的选择器，匹配到元素就执行回调
        for (var i = 0, len = listeners.length, listener, elements; i < len; i++) {
            listener = listeners[i];
            elements = doc.querySelectorAll(listener.selector);
            for (var j = 0, jLen = elements.length, element; j < jLen; j++) {
                element = elements[j];
                // 避免同一个元素重复绑定回调
                if (!element.ready) {
                    element.ready = true;
                    listener.fn.call(element, element);
                }
            }
        }
    }

    win.ready = ready;
            
})(this);

ready('#phoneInput', function(element) {
    // 抽离独立校验函数，方便多场景调用
    function validatePhone() {
        // 过滤所有非数字字符，兼容用户输入+、-、空格、括号等常见手机号格式符号
        const purePhoneDigits = element.value.replace(/\D/g, '');
        // 先移除上一次校验生成的错误提示
        const oldTip = element.parentElement.querySelector('.phone-validation-error');
        if (oldTip) oldTip.remove();

        if (purePhoneDigits.length < 10) {
            element.style.borderColor = 'red';
            // 生成错误提示
            const errorTip = document.createElement('span');
            errorTip.className = 'phone-validation-error';
            errorTip.style.color = '#d32f2f';
            errorTip.style.fontSize = '12px';
            errorTip.style.marginTop = '4px';
            errorTip.style.display = 'block';
            errorTip.innerText = '请输入至少10位数字的有效手机号';
            element.parentElement.appendChild(errorTip);
            return false;
        }
        element.style.borderColor = '#2e7d32';
        return true;
    }

    // 元素首次加载时执行一次初始校验
    validatePhone();
    // 绑定失焦事件：用户把焦点切到其他字段时自动触发校验，完全匹配你的需求
    element.addEventListener('blur', validatePhone);
    // 可选：用户重新输入时自动清除红框和错误提示，体验更好
    element.addEventListener('input', function() {
        if (element.style.borderColor === 'red') {
            element.style.borderColor = '';
            const tip = element.parentElement.querySelector('.phone-validation-error');
            if (tip) tip.remove();
        }
    });

    // 可选：拦截订单提交按钮，校验不通过时阻止提交，避免无效订单
    const orderSubmitBtn = document.querySelector('[data-testid="submit-order-button"], .checkout-submit');
    if (orderSubmitBtn) {
        orderSubmitBtn.addEventListener('click', function(e) {
            if (!validatePhone()) {
                e.preventDefault();
                element.focus();
            }
        });
    }
});   
</script>

• 原有的DOM元素监听逻辑完全保留，适配BigCommerce结账页单页应用动态渲染表单的特性，不管手机号输入框是页面首屏加载还是后续步骤动态渲染出来，都能正确绑定事件
• 核心用blur失焦事件触发校验，完全符合你要的「输入完成切走焦点再校验」的交互，不会在用户输入过程中频繁弹提示打扰
• 校验前先过滤非数字字符，避免用户输入格式符号导致长度统计错误，比如用户输入138-0000-0000这种带横杠的格式，也能正确识别出是11位数字
• 附带的输入时清除错误状态、提交时二次校验都是电商结账页常用的体验优化逻辑，不需要可以直接删掉
• 直接把这段代码放到BigCommerce后台的结账页附加脚本位置就能生效，不需要额外依赖。

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