使用 Javascript 验证 10 位 phone 号码
Use Javascript to verify 10 digit phone number
我有一些 Javascript 代码试图验证输入的 phone 号码实际上由 10 位数字组成,无论格式如何。它似乎没有用。
我使用了类似的 Javascript 代码来验证电子邮件地址条目,并且有效。
这是 HTML 和 phone 号码的 JS:
Phone 人数
<input type="text" name="phone number" id="phone_number" oninput="return validate_number()"><br><br>
<script>
var number = document.getElementById("phone_number");
function validateNumber(val) {
var re = /^\d{3}-\d{3}-\d{4}$/;
console.log(re.test(val))
return re.test(val);
}
function validate_number() {
if (validateNumber(number.value.replace(/\D/g,""))) {
document.getElementById("phone_number_valid").style.visibility = "visible";
document.getElementById("phone_number_valid").style.height = "initial";
document.getElementById("phone_number_invalid").style.visibility = "hidden";
document.getElementById("phone_number_invalid").style.height = "0";
} else {
document.getElementById("phone_number_invalid").style.visibility = "visible";
document.getElementById("phone_number_invalid").style.height = "initial";
document.getElementById("phone_number_valid").style.visibility = "hidden";
document.getElementById("phone_number_valid").style.height = "0";
}
</script>
<div id="phone_number_invalid" class="error_verify">
<p style="color:red">Invalid phone number.</p>
</div>
<div id="phone_number_valid" class="error_verify">
<p style="color:green">Valid phone number.</p>
</div>
这里是相关的 CSS:
.error_verify {
visibility: hidden;
height:0;
}
你用输入调用 validateNumber
,删除所有非数字字符:
if (validateNumber(number.value.replace(/\D/g,""))) {
因此,包含破折号的正则表达式肯定不匹配:
var re = /^\d{3}-\d{3}-\d{4}$/;
由于您根本不关心格式,听起来您需要检查的只是 phone 数字中是否恰好有 10 个数字。将您的正则表达式更改为仅 10 位数字:
var re = /^\d{10}$/;
或者,更简单,只需检查数字字符的数量是否为 10:
if (number.value.match(/\d/g).length === 10)) {
const numInput = document.getElementById("phone_number");
const validDiv = document.querySelector('#phone_number_valid');
const invalidDiv = document.querySelector('#phone_number_invalid');
function validate_number() {
if ((numInput.value.match(/\d/g) || []).length === 10) {
validDiv.style.visibility = "visible";
validDiv.style.height = "initial";
invalidDiv.style.visibility = "hidden";
invalidDiv.style.height = "0";
} else {
invalidDiv.style.visibility = "visible";
invalidDiv.style.height = "initial";
validDiv.style.visibility = "hidden";
validDiv.style.height = "0";
}
}
<input type="text" name="phone number" id="phone_number" oninput="return validate_number()"><br><br>
<div id="phone_number_invalid" class="error_verify">
<p style="color:red">Invalid phone number.</p>
</div>
<div id="phone_number_valid" class="error_verify">
<p style="color:green">Valid phone number.</p>
</div>
您可以使用上面的答案,但将默认值设置为您的输入作为基础。
通过这种方式,您将向用户展示他们的输入应该是什么样子,并解决空数组的问题。
所以使用CertainPerformance的答案就修改这部分:
<input type="text" name="phone number" id="phone_number" oninput="return validate_number()"><br><br>
看起来像这样:
<input type="text" name="phone number" id="phone_number" oninput="return validate_number()" value="1234567890"><br><br>
我有一些 Javascript 代码试图验证输入的 phone 号码实际上由 10 位数字组成,无论格式如何。它似乎没有用。
我使用了类似的 Javascript 代码来验证电子邮件地址条目,并且有效。
这是 HTML 和 phone 号码的 JS:
Phone 人数
<input type="text" name="phone number" id="phone_number" oninput="return validate_number()"><br><br>
<script>
var number = document.getElementById("phone_number");
function validateNumber(val) {
var re = /^\d{3}-\d{3}-\d{4}$/;
console.log(re.test(val))
return re.test(val);
}
function validate_number() {
if (validateNumber(number.value.replace(/\D/g,""))) {
document.getElementById("phone_number_valid").style.visibility = "visible";
document.getElementById("phone_number_valid").style.height = "initial";
document.getElementById("phone_number_invalid").style.visibility = "hidden";
document.getElementById("phone_number_invalid").style.height = "0";
} else {
document.getElementById("phone_number_invalid").style.visibility = "visible";
document.getElementById("phone_number_invalid").style.height = "initial";
document.getElementById("phone_number_valid").style.visibility = "hidden";
document.getElementById("phone_number_valid").style.height = "0";
}
</script>
<div id="phone_number_invalid" class="error_verify">
<p style="color:red">Invalid phone number.</p>
</div>
<div id="phone_number_valid" class="error_verify">
<p style="color:green">Valid phone number.</p>
</div>
这里是相关的 CSS:
.error_verify {
visibility: hidden;
height:0;
}
你用输入调用 validateNumber
,删除所有非数字字符:
if (validateNumber(number.value.replace(/\D/g,""))) {
因此,包含破折号的正则表达式肯定不匹配:
var re = /^\d{3}-\d{3}-\d{4}$/;
由于您根本不关心格式,听起来您需要检查的只是 phone 数字中是否恰好有 10 个数字。将您的正则表达式更改为仅 10 位数字:
var re = /^\d{10}$/;
或者,更简单,只需检查数字字符的数量是否为 10:
if (number.value.match(/\d/g).length === 10)) {
const numInput = document.getElementById("phone_number");
const validDiv = document.querySelector('#phone_number_valid');
const invalidDiv = document.querySelector('#phone_number_invalid');
function validate_number() {
if ((numInput.value.match(/\d/g) || []).length === 10) {
validDiv.style.visibility = "visible";
validDiv.style.height = "initial";
invalidDiv.style.visibility = "hidden";
invalidDiv.style.height = "0";
} else {
invalidDiv.style.visibility = "visible";
invalidDiv.style.height = "initial";
validDiv.style.visibility = "hidden";
validDiv.style.height = "0";
}
}
<input type="text" name="phone number" id="phone_number" oninput="return validate_number()"><br><br>
<div id="phone_number_invalid" class="error_verify">
<p style="color:red">Invalid phone number.</p>
</div>
<div id="phone_number_valid" class="error_verify">
<p style="color:green">Valid phone number.</p>
</div>
您可以使用上面的答案,但将默认值设置为您的输入作为基础。 通过这种方式,您将向用户展示他们的输入应该是什么样子,并解决空数组的问题。
所以使用CertainPerformance的答案就修改这部分:
<input type="text" name="phone number" id="phone_number" oninput="return validate_number()"><br><br>
看起来像这样:
<input type="text" name="phone number" id="phone_number" oninput="return validate_number()" value="1234567890"><br><br>