使用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事件现在检查返回值。如果为false，则不会提交；如果为true，将继续提交
• 如果电话号码已通过验证，则process(event)函数现在将返回true；如果不是
• ，则返回false如果process(event)返回true，它还会编辑包含电话号码的input，并使用正确格式化的值

当然，您现在可以将表单切换为POST，而不是get，更改操作等。