intl-tel-input切换国家后号码格式异常：位数缺失、验证失败

问题原因 #

同时使用intl-tel-input自带的号码格式化功能和jquery.mask插件，两者的格式化逻辑冲突。切换国家时，jquery.mask生成的掩码规则与intl-tel-input的号码长度规则不匹配，导致输入被错误限制，无法输入完整位数。

解决方案 #

移除jquery.mask插件的依赖，完全使用intl-tel-input内置的格式化和验证功能，该库已针对不同国家的号码规则做了适配，无需额外掩码插件。

修改后的完整代码 #

HTML #

<link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.21/css/intlTelInput.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.21/js/utils.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.21/js/intlTelInput.js"></script>
<form>
    <input class="field--phone" placeholder="your phone" type="tel">
    <button class="btn">Send</button>
</form>
<form>
    <input class="field--phone" placeholder="your phone" type="tel">
    <button class="btn">Send</button>
</form>
<form>
    <input class="field--phone" placeholder="your phone" type="tel">
    <button class="btn">Send</button>
</form>
<form>
    <input class="field--phone" placeholder="your phone" type="tel">
    <button class="btn">Send</button>
</form>
<form>
    <input class="field--phone" placeholder="your phone" type="tel">
    <button class="btn">Send</button>
</form>
<script src="form2.js"></script>

CSS #

.is-valid{
    border: 2px solid rgb(7, 181, 44);
    background-color: green;
}
.is-invalid{
    border: 2px solid red;
    background-color: red !important;
}
.focused{
    border: none;
    background-color: aquamarine;
}

JavaScript #

$(document).ready(function () {
  const phoneFields = document.querySelectorAll('.field--phone');
  var iti = [];
  var isValidPhone = null;

  // 初始化intl-tel-input
  phoneFields.forEach((field) => {
    iti.push(window.intlTelInput(field, {
        hiddenInput: "full_number",                         
        nationalMode: false,
        formatOnDisplay: true,           
        separateDialCode: true,
        autoHideDialCode: true, 
        autoPlaceholder: "aggressive" ,
        initialCountry: "ru",
        placeholderNumberType: "MOBILE",  
        geoIpLookup: function(callback) {
          $.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
            var countryCode = (resp && resp.country) ? resp.country : "";
            callback(countryCode);
          });
        },
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.21/js/utils.js"
    }));
  });

  // 焦点与验证处理
  iti.forEach((field) => {
    field.telInput.addEventListener('focus', () => {
        iti.forEach(item => {
            item.telInput.classList.remove('focused');
        });
        field.telInput.classList.add('focused');
    });

    // 监听号码变化，实时验证
    field.telInput.addEventListener('input', function(){
      isValidPhone = field.isValidNumber();
      console.log(isValidPhone);
    });
  });

  // 表单提交验证
  function submitForm(e){
    e.preventDefault();
    iti.forEach(field => {
      if (field.telInput.classList.contains('focused')) {
        if (!isValidPhone) {
          field.telInput.classList.add('is-invalid');
          field.telInput.classList.remove('is-valid');
        } else {
          field.telInput.classList.remove('is-invalid');
          field.telInput.classList.add('is-valid');
        }
      }
    });
  }

  document.querySelectorAll('.btn').forEach(btn => btn.addEventListener('click', submitForm));

  // 切换国家时清空输入框并重置状态
  $(".field--phone").on("countrychange", function(e, countryData) {
    $(this).val('');
    isValidPhone = null;
    $(this).removeClass('is-valid is-invalid');
  });
});

关键修改点 #

1. 移除所有jquery.mask相关代码，彻底避免格式规则冲突
2. 将验证触发事件从change改为input，实现实时号码验证
3. 优化表单提交逻辑，减少冗余循环，直接针对当前焦点输入框处理状态
4. 切换国家时，同步重置输入框的验证状态

内容的提问来源于stack exchange，提问作者Никита Решетняк