JS校验手机号|极客笔记

JS校验手机号

在Web开发中，常常需要对用户输入的手机号进行校验，以确保格式的正确性和数据的完整性。本文将详细介绍如何使用JavaScript来校验手机号的格式，以及一些常见的手机号格式校验规则。

手机号格式规则

在中国大陆地区，手机号通常是11位数字，以1开头，例如：13612345678。根据国家通信管理局的规定，手机号的格式应符合以下规则：

第一位为1；
第二位为3/4/5/7/8/9；
后面9位为0-9的数字。

根据以上规则，一个合法的手机号应该是11位数字，且以1开头。

使用正则表达式校验手机号

正则表达式是一种强大的字符串匹配工具，可以用来验证文本中的模式。在JavaScript中，我们可以使用正则表达式来校验手机号的格式。

以下是一个简单的正则表达式，用来校验中国大陆地区的手机号格式：

function checkPhoneNumber(phoneNumber) {
    var reg = /^1[345789]\d{9}$/;
    return reg.test(phoneNumber);
}

在上面的代码中，我们定义了一个checkPhoneNumber函数，接受一个手机号作为参数。正则表达式/^1[345789]\d{9}$/表示：

^: 匹配字符串的开始；
1: 匹配以1开头；
[345789]: 匹配3、4、5、7、8、9中的任意一个数字；
\d{9}: 匹配9位数字；
$: 匹配字符串的结束。

通过调用reg.test(phoneNumber)方法，可以判断输入的手机号是否符合规则，返回true或false。

下面是一个使用示例：

console.log(checkPhoneNumber('13612345678')); // true
console.log(checkPhoneNumber('1891234567')); // false
console.log(checkPhoneNumber('136123456789')); // false

完整的手机号校验函数

除了使用正则表达式外，我们还可以编写一个完整的手机号校验函数，用来检查手机号的合法性。

function validatePhoneNumber(phoneNumber) {
    if (phoneNumber.length !== 11) {
        return false;
    }

    if (!/^1[345789]\d{9}$/.test(phoneNumber)) {
        return false;
    }

    return true;
}

上面的代码中，validatePhoneNumber函数首先检查手机号的长度是否等于11位，然后再使用正则表达式进行格式校验。

在HTML表单中使用手机号校验

在实际的Web开发中，我们通常会在表单中加入手机号校验功能。可以在表单的提交事件中调用上面编写的手机号校验函数，从而提高用户输入信息的准确性。

以下是一个简单的表单示例，包含了一个手机号输入框和一个提交按钮，当用户点击提交按钮时，会对输入的手机号进行校验：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机号校验</title>
</head>
<body>
    <form id="phoneForm" onsubmit="return validateForm()">
        <label for="phoneNumber">手机号：</label>
        <input type="text" id="phoneNumber" name="phoneNumber">
        <button type="submit">提交</button>
    </form>

    <script>
        function validateForm() {
            var phoneNumber = document.getElementById('phoneNumber').value;
            if (!validatePhoneNumber(phoneNumber)) {
                alert('请输入正确的手机号格式！');
                return false;
            }
            return true;
        }
    </script>
</body>
</html>

在上面的示例中，当用户点击提交按钮时，会触发validateForm函数，获取输入的手机号，并调用validatePhoneNumber函数进行校验。如果手机号格式不正确，则会弹出提示框，阻止表单的提交。