使用PHP而不是JS获取带有国家代码的“intl-tel-input”手机号码

Question

我有一个注册表单（PHP 和 MySql），访问者可以在其中提交他们的姓名、电子邮件和手机号码。提交后进入数据库。

现在我想在手机号码前添加一个带有下拉菜单的国家/地区代码，以便访问者可以选择他们想要的国家/地区并输入他们的手机号码。

为此，我使用了 Github 的“intl-tel-input”。一切正常。但是当我尝试使用 PHP 的 POST 或 GET 方法获取带有国家代码的手机号码的值时，它不起作用。但是当我尝试从 JS 中获取值时它会起作用。

下面是从JS获取带有国家代码的手机号码的代码，它完全可以正常工作。

<div class="container">
      <form id="login" onsubmit="process(event)">
        <p>Enter your phone number:</p>
        <input id="phone" type="tel" name="phone" />
        <input type="submit" class="btn" value="Verify" />
      </form>
      <div class="alert alert-info" style="display: none"></div>
      <div class="alert alert-error" style="display: none"></div>
</div>

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

    const info = document.querySelector(".alert-info");
    const error = document.querySelector(".alert-error");

    function process(event) {
      event.preventDefault();

      const phoneNumber = phoneInput.getNumber();

      info.style.display = "none";
      error.style.display = "none";

      if (phoneInput.isValidNumber()) {
        info.style.display = "";
        info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;
      } else {
        error.style.display = "";
        error.innerHTML = `Invalid phone number.`;
      }
    }
  </script>

我知道我可以使用 JS 获取数据并将其添加到数据库中。但是有什么方法可以让我使用 POST 方法获取带有国家代码的手机号码值吗？

提前致谢。

Answer 1

根据您对我之前评论的回复，问题是您使用 Javascript 验证并正确格式化数字，现在您需要将格式化后的值传递回 PHP

您可以通过获取phoneNumber 结果，将其放回输入中然后提交表单来做到这一点。

这是代码

<div class="container">
      <form id="login" onsubmit="return process(event)">
        <p>Enter your phone number:</p>
        <input id="phone" type="tel" name="phone" />
        <input type="submit" class="btn" value="Verify" />
      </form>
      <div class="alert alert-info" style="display: none"></div>
      <div class="alert alert-error" style="display: none"></div>
</div>
<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/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script>
    const phoneInputField = document.querySelector("#phone");
    const phoneInput = window.intlTelInput(phoneInputField, {
      utilsScript:
        "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
    });

    const info = document.querySelector(".alert-info");
    const error = document.querySelector(".alert-error");

    function process(event) {

      const phoneNumber = phoneInput.getNumber();

      info.style.display = "none";
      error.style.display = "none";

      if (phoneInput.isValidNumber()) {
        info.style.display = "";
        document.getElementById("phone").value=phoneNumber
        return true
        // info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;
      } else {
        error.style.display = "";
        error.innerHTML = `Invalid phone number.`;
        return false;
      }
    }
  </script>

变化是：

• 表单的onsubmit 事件现在检查返回值。为假不提交，为真继续提交
• process(event) 函数现在在电话号码经过验证时返回 true，否则返回 false
• 如果process(event) 返回true，它还会编辑包含正确格式值的电话号码的input

您现在当然可以将表单切换为 POST 而不是获取、更改操作等...