js 验证手机号|极客笔记

js 验证手机号

在日常的网页开发中，经常会遇到需要验证用户输入的手机号码的情况。为了确保用户输入的手机号码符合规范，我们需要使用JavaScript来对手机号进行验证。本文将详细介绍如何使用JavaScript编写函数来验证手机号码。

1. 手机号的基本格式

在中国，手机号码通常是11位数字，开头为1。因此，我们可以通过正则表达式来验证手机号码的格式是否正确。我们的验证规则如下：

必须是11位数字
第一个数字必须是1

2. 编写验证函数

在JavaScript中，我们可以使用RegExp对象来创建正则表达式。然后，使用test()方法来检查一个字符串是否匹配该正则表达式。下面是一个简单的验证手机号码的函数：

function validatePhoneNumber(phoneNumber) {
    const regExp = /^1\d{10}$/;
    return regExp.test(phoneNumber);
}

// 示例
console.log(validatePhoneNumber('13812345678')); // true
console.log(validatePhoneNumber('12345678901')); // false

在上面的代码中，我们首先定义了一个正则表达式/^1\d{10}$/，它代表了手机号码的格式。然后，我们通过test()方法来检查输入的手机号码是否符合这个格式。

3. 完善验证函数

除了基本的格式验证外，我们还可以对手机号码做更严格的验证，比如限制号段或者排除特殊字符。下面是一个更加完善的验证函数：

function validatePhoneNumber(phoneNumber) {
    const regExp = /^1\d{10}$/;
    const excludeList = ['12345678909', '10086'];

    if (!regExp.test(phoneNumber)) {
        return false;
    }

    if (excludeList.includes(phoneNumber)) {
        return false;
    }

    return true;
}

// 示例
console.log(validatePhoneNumber('13812345678')); // true
console.log(validatePhoneNumber('12345678901')); // false
console.log(validatePhoneNumber('12345678909')); // false
console.log(validatePhoneNumber('10086')); // false

在上面的代码中，我们引入了一个排除列表excludeList，用来存放我们想要排除的特殊号码。在验证手机号码时，首先判断是否符合基本格式，然后再排除特殊号码。

4. 在表单中使用验证函数

最常见的情况是在表单中需要对用户输入的手机号码进行验证。我们可以在表单提交时调用验证函数，并根据返回值来决定是否允许提交表单。下面是一个简单的表单验证示例：

<!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>手机号验证</title>
</head>

<body>
    <form id="phoneForm">
        <label for="phone">手机号码：</label>
        <input type="text" id="phone">
        <button type="submit">提交</button>
    </form>

    <script>
        function validatePhoneNumber(phoneNumber) {
            const regExp = /^1\d{10}$/;
            const excludeList = ['12345678909', '10086'];

            if (!regExp.test(phoneNumber)) {
                return false;
            }

            if (excludeList.includes(phoneNumber)) {
                return false;
            }

            return true;
        }

        const phoneForm = document.getElementById('phoneForm');
        const phoneInput = document.getElementById('phone');

        phoneForm.addEventListener('submit', function (event) {
            if (!validatePhoneNumber(phoneInput.value)) {
                alert('手机号码格式不正确');
                event.preventDefault();
            }
        });
    </script>
</body>

</html>

在上面的代码中，我们给表单的提交按钮添加了一个事件监听器，在提交表单时调用了验证函数。如果手机号码格式不正确，则阻止表单的提交，并弹出提示信息。