JS手机号校验|极客笔记

JS手机号校验

在前端开发中，手机号校验是一个常见且重要的步骤。在用户注册、登录或者其他涉及手机验证的场景中，手机号的格式必须是正确的才能进行下一步操作。本文将介绍如何使用JavaScript来进行手机号校验，以确保用户输入的手机号符合规范。

校验规则

在进行手机号校验之前，首先需要明确手机号的格式规则。一般来说，手机号应该符合以下规则：

以1开头
总长度为11位
只包含数字字符

根据以上规则，我们可以使用正则表达式来进行手机号的校验。

正则表达式校验手机号

下面是一个简单的函数，使用正则表达式来校验手机号的格式：

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

// 测试
console.log(checkPhoneNumber('18812345678')); // true
console.log(checkPhoneNumber('123456')); // false
console.log(checkPhoneNumber('1881234567a')); // false

在上面的代码中，^1\d{10}$是一个正则表达式，表示手机号以1开头，后面跟着10位数字字符，总共11位。通过调用reg.test(phoneNumber)方法，可以判断输入的手机号是否符合这个规则。

使用ES6改进校验函数

在ES6中，我们可以使用更简洁的箭头函数来改进手机号校验函数：

const checkPhoneNumber = phoneNumber => /^1\d{10}$/.test(phoneNumber);

// 测试
console.log(checkPhoneNumber('18812345678')); // true
console.log(checkPhoneNumber('123456')); // false
console.log(checkPhoneNumber('1881234567a')); // false

这样的代码更加简洁清晰，同时保持了相同的功能。

结合事件监听实现实时校验

在实际的用户交互中，我们通常会希望能够实时校验用户输入的手机号格式。这时可以结合事件监听来实现：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Phone Number Validation</title>
</head>
<body>
<label for="phoneNumber">Phone Number:</label>
<input type="text" id="phoneNumber">
<p id="phoneNumberError" style="color: red; display: none;">Invalid phone number</p>

<script>
const phoneNumberInput = document.getElementById('phoneNumber');
const errorText = document.getElementById('phoneNumberError');

phoneNumberInput.addEventListener('input', function() {
    const phoneNumber = phoneNumberInput.value;
    const isValid = /^1\d{10}$/.test(phoneNumber);

    if (isValid) {
        errorText.style.display = 'none';
    } else {
        errorText.style.display = 'block';
    }
});
</script>
</body>
</html>

在上面的示例中，我们创建了一个简单的HTML页面，包含一个手机号输入框和一个用于显示错误信息的<p>元素。通过在手机号输入框上添加input事件监听器，在用户输入时即时校验手机号格式，并根据结果显示或隐藏错误信息。