如何通过intl-tel-input提交表单时拼接国家码与手机号

你需要利用intl-tel-input自带的方法获取包含国家码的完整号码，而非手动拼接，这样能保证号码格式准确且避免错误。具体修改如下：

关键调整 #

• 替换原代码中仅获取纯手机号的逻辑，改用phoneInput.getNumber()直接拿到带国家码的完整号码（例如+19998886664）
• 给表单绑定提交事件，确保点击提交按钮时触发自定义的提交函数

修改后的完整代码 #

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
</head>
<body>
<form onsubmit="return postToGoogle();">
 <div>
  <p class="required-form">*</p>
   <fieldset>
     <input type="tel" name="blah" id="whatsappno" placeholder="Whatsapp number" required/>
   </fieldset>
 </div>
 <div>
  <fieldset>
    <button type="submit" id="contact">Submit Application</button>
  </fieldset>
</div>
<div id="success-msg" style="display:none;">提交成功！</div>
</form>

<script>
   const phoneInputField = document.querySelector("#whatsappno");
   const phoneInput = window.intlTelInput(phoneInputField, {
     utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
   });

 function postToGoogle() {
   // 用intl-tel-input的方法获取带国家码的完整号码
   var fullPhoneNumber = phoneInput.getNumber();
        
   $.ajax({
     url: "https://docs.google.com/forms/d/e/…….?",
     data: {"val.123456789": fullPhoneNumber },
     type: "POST",
     dataType: "xml",
     success: function (d) {
       $('#success-msg').show();
       $('#contact').hide();
     },
     error: function (x, y, z) {
       $('#success-msg').show();
       $('#contact').hide();
     }
   });
   return false;
 }
</script>
</body>
</html>

补充说明 #

• phoneInput.getNumber()是intl-tel-input官方提供的方法，自动返回符合国际标准的带国家码号码，无需手动拼接国家码和手机号
• 原代码中使用了$但未引入jQuery库，需补充引入否则会报错
• 表单添加onsubmit="return postToGoogle();"是为了确保提交时触发自定义的AJAX提交逻辑，而非默认表单提交

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