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

Question

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

现在我想在手机号码前添加一个带有下拉列表的国家代码，这样游客就可以选择他们想要的国家&输入他们的手机号码。

为此，我使用了"；intl-tel输入"；来自Github。一切都很好。但是，当我尝试使用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，而不是get，更改操作等。