如何使用intl-tel-input插件获取带区号的完整电话号码？

方案一：使用插件自动生成的隐藏字段 #

1. 修正JavaScript初始化配置 #

确保插件路径正确，并且hiddenInput配置项正确生成包含完整号码的隐藏字段：

<script src="intl-tel-input/build/js/intlTelInput.js"></script>
<script>
  var input = document.querySelector("#phone");
  window.intlTelInput(input, {
    preferredCountries: ['us', 'gb', 'lk'],
    initialCountry: "gb",
    hiddenInput: "full_phone" // 插件自动生成name为full_phone的隐藏输入框
  });
</script>

2. 修正PHP取值逻辑 #

后台直接获取插件生成的隐藏字段值，替换原错误的取值代码：

// 替换原$phone = $_POST['phone']['full'];这一行
$phone = $_POST['full_phone']; // 获取包含国际区号的完整手机号码

方案二：表单提交前将完整号码写入原输入框 #

如果不想依赖隐藏字段，可通过插件API在提交时把完整号码赋值给原输入框：

1. 修改JavaScript代码，添加提交监听 #

<script src="intl-tel-input/build/js/intlTelInput.js"></script>
<script>
  var input = document.querySelector("#phone");
  // 保存插件实例以便调用方法
  var iti = window.intlTelInput(input, {
    preferredCountries: ['us', 'gb', 'lk'],
    initialCountry: "gb"
  });

  // 监听表单提交事件
  document.querySelector(".hq-form").addEventListener("submit", function() {
    // 获取带区号的完整号码
    var fullNumber = iti.getNumber();
    // 将完整号码赋值给原phone输入框
    input.value = fullNumber;
  });
</script>

2. PHP代码无需修改 #

直接使用原取值逻辑即可：

$phone = $_POST['phone'];

常见问题排查 #

• 检查intl-tel-input的JS/CSS文件路径是否正确，避免404错误
• 打开浏览器控制台查看是否有JavaScript报错，确认插件正常加载
• 提交表单后，可通过var_dump($_POST)查看所有提交字段，确认完整号码是否被正确传递

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