使用intl-tel-input时无效输入仍显示Valid问题求助

问题1：无效/过短手机号仍显示“Valid” #

核心原因是utilsScript未完成加载就执行了验证逻辑，导致isPossibleNumber()无法获取各国号码规则，误判为有效号码。另外，keyup事件触发reset会快速隐藏错误提示，也可能让你误以为一直显示Valid。

问题2：删除span内“Valid”文本后有效号码无提示 #

代码里只是通过移除hide类显示提示，但没有动态设置提示文本，所以span为空时自然看不到内容。

修正后的代码 #

<html>
<head>
    <link rel="stylesheet" href="test2222.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/css/intlTelInput.css">
    <title>Document</title>
</head>
<body>
<form action="">
    <div id="phone_inputs">
        <input id="phone" type="tel">
        <button id="btn" type="button">Validate</button>
        <span id="valid-msg" class="hide"></span>
        <span id="error-msg" class="hide"></span>
    </div>
</form>
</body>

<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/intlTelInput.min.js"></script>
<script>
    const input = document.querySelector("#phone");
    const button = document.querySelector("#btn");
    const errorMsg = document.querySelector("#error-msg");
    const validMsg = document.querySelector("#valid-msg");
    const errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];
    
    const iti = window.intlTelInput(input, {
        utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/utils.js",
        // 等待utilsScript加载完成再初始化事件
        initComplete: function() {
            bindValidationEvents();
        }
    });

    const reset = () => {
        input.classList.remove("error");
        errorMsg.innerHTML = "";
        errorMsg.classList.add("hide");
        validMsg.innerHTML = "";
        validMsg.classList.add("hide");
    };

    const validate = () => {
        reset();
        const inputValue = input.value.trim();
        if (inputValue) {
            if (iti.isPossibleNumber()) {
                validMsg.innerHTML = "✓ Valid";
                validMsg.classList.remove("hide");
            } else {
                input.classList.add("error");
                const errorCode = iti.getValidationError();
                errorMsg.innerHTML = errorMap[errorCode];
                errorMsg.classList.remove("hide");
            }
        }
    };

    function bindValidationEvents() {
        // 点击验证按钮触发
        button.addEventListener('click', validate);
        // 可选：实时验证（去掉的话就只保留按钮点击验证）
        input.addEventListener('keyup', validate);
        input.addEventListener('change', validate);
    }
</script>
</html>

关键修改点 #

1. 加入initComplete回调：确保依赖的utils脚本加载完成后再绑定验证事件，保证号码有效性判断准确。
2. 动态设置提示文本：验证通过时主动给validMsg赋值，不再依赖span初始内容，解决删除文本后无提示的问题。
3. 优化验证逻辑：把验证逻辑抽成独立函数，不管是点击按钮还是实时输入，都统一执行验证，避免reset掩盖提示。

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