📅 最后修改于: 2023-12-03 15:02:25.573000 🧑 作者: Mango
在网页开发中，常常需要对输入的电话号码进行验证，以确保其符合一定的格式。使用 Javascript 可以很方便地实现电话号码的验证。下面就来介绍一下如何使用 Javascript 验证电话号码。
电话号码的基本格式是：前面是一个区号，后面是一个电话号码，中间用连字符或空格相隔。例如，一个符合格式要求的电话号码可以是：
010-12345678
010 12345678
(010)12345678
Javascript 中可以使用正则表达式进行电话号码的验证。下面是一个使用正则表达式验证电话号码的示例代码：
function isPhoneNumberValid(phoneNumber) {
var reg = /^(\d{3,4}-)?\d{7,8}$/; // 可允许带区号的固定电话，也可不带区号；也可为手机号码
return reg.test(phoneNumber);
}
console.log(isPhoneNumberValid('010-12345678')); // true
console.log(isPhoneNumberValid('010 12345678')); // true
console.log(isPhoneNumberValid('(010)12345678')); // true
console.log(isPhoneNumberValid('13012345678')); // true
console.log(isPhoneNumberValid('1301234567')); // false
以上代码中，使用了 ^(\d{3,4}-)?\d{7,8}$ 正则表达式来验证电话号码的格式。其中：
^ 表示起始位置。(\d{3,4}-)? 表示区号部分，其中 \d{3,4} 表示 3 到 4 位数字，- 表示区号与电话号码之间的分隔符。? 表示该部分可有可无，即电话号码也可以没有区号。\d{7,8} 表示电话号码部分，其中 \d{7,8} 表示 7 到 8 位数字。$ 表示结束位置。在 Javascript 中，可以使用 test() 方法对字符串进行正则表达式验证，上面的 isPhoneNumberValid() 函数中，就是使用该方法对电话号码进行验证。
除了使用正则表达式进行电话号码的验证外，还可以通过事件实时验证电话号码的格式。下面是一个使用事件实时验证电话号码的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Phone Number Validation Demo</title>
</head>
<body>
<label for="phoneNumber">Phone Number:</label>
<input type="text" id="phoneNumber">
<script>
var input = document.getElementById('phoneNumber');
input.addEventListener('input', function() {
var phoneNumber = input.value;
var reg = /^(\d{3,4}-)?\d{7,8}$/;
if (reg.test(phoneNumber)) {
input.setCustomValidity('');
} else {
input.setCustomValidity('Please enter a valid phone number');
}
});
</script>
</body>
</html>
以上代码中，使用 addEventListener() 方法为 input 元素添加了一个 input 事件监听器。每当用户输入电话号码时，该事件会触发，验证用户输入的电话号码是否符合规定的格式。
如果用户输入的电话号码符合规定的格式，就调用 setCustomValidity() 方法将 input 元素的自定义验证消息清空。如果用户输入的电话号码不符合规定的格式，则调用 setCustomValidity() 方法设置一个自定义验证消息。
通过使用正则表达式和事件，我们可以很方便地实现电话号码的验证。前者是在提交表单前对用户输入的电话号码进行格式验证，后者是在用户输入时实时验证。两种验证方式都有其优缺点，具体使用时需要根据实际情况进行选择。