js 手机号验证|极客笔记

js 手机号验证

在网页开发中，经常会遇到需要验证用户手机号的情况。手机号验证是一项很重要的功能，能够有效确保用户输入的是有效的手机号，以便后续的业务逻辑处理。本文将详细介绍如何使用JavaScript来实现手机号验证的功能。

需求分析

在实现手机号验证之前，首先需要明确手机号的格式。一般情况下，手机号是11位数字，以1开头，例如：13912345678。所以我们的手机号验证逻辑可以简单定义为：

手机号必须为11位数字
手机号必须以1开头

实现方法

使用正则表达式进行验证

在JavaScript中，我们可以使用正则表达式来进行手机号验证。以下是一个简单的实现：

function isPhoneNumber(phoneNumber) {
    var reg = /^1\d{10}$/;
    return reg.test(phoneNumber);
}

在上面的代码中，我们定义了一个isPhoneNumber函数，该函数接受一个参数phoneNumber，然后使用正则表达式/^1\d{10}$/来验证手机号是否符合要求。

^1 表示手机号必须以1开头
\d{10} 表示手机号后面必须是10个数字
$ 表示手机号的结尾

接下来我们可以调用这个函数来进行手机号验证：

console.log(isPhoneNumber("13912345678")); // true
console.log(isPhoneNumber("1891234567")); // false

在上面的示例中，第一个手机号符合要求，输出为true；第二个手机号缺少一位数字，不符合要求，输出为false。

使用正则表达式进行更严格的验证

上面的正则表达式只是最基本的手机号验证，如果想要更加严格地验证手机号，还可以加入号段的验证。号段是指手机号的前三位数字，不同的号段代表不同的运营商。

function isStrictPhoneNumber(phoneNumber) {
    var reg = /^1(3[0-9]|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[89])\d{8}$/;
    return reg.test(phoneNumber);
}

在上面的代码中，我们修改了正则表达式/^1\d{10}$/，加入了号段的判断。其中：

3[0-9] 表示13开头
4[5-9] 表示14开头
5[0-35-9] 表示15开头，排除了5(4,7,6)号段
6[2567] 表示16开头
7[0-8] 表示17开头
8[0-9] 表示18开头
9[89] 表示19开头

这样我们就可以通过更严格的正则表达式来验证手机号的合法性。

在表单中实时验证

在实际的网页开发中，我们通常会在表单中给用户一个实时的验证反馈。可以在输入框失去焦点或者在用户输入时对手机号进行验证，并实时显示验证结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Phone Number Validation</title>
</head>
<body>
    <input type="text" id="phoneInput" placeholder="请输入手机号码">
    <span id="errorMsg" style="color: red;"></span>

    <script>
        var phoneInput = document.getElementById("phoneInput");
        var errorMsg = document.getElementById("errorMsg");

        phoneInput.addEventListener('input', function() {
            var phoneNumber = phoneInput.value;
            if(isStrictPhoneNumber(phoneNumber)) {
                errorMsg.innerText = "手机号格式正确";
            } else {
                errorMsg.innerText = "请输入正确的手机号格式";
            }
        });
    </script>
</body>
</html>

在上面的代码中，我们创建了一个输入框和一个显示验证结果的span元素。通过监听输入框的input事件，在用户输入时实时验证手机号，并显示验证结果。