JavaScript 正则表达式入门：手机号、座机及邮箱验证

正则表达式基础构成

构建精确的正则规则需要理解两类核心元素：用于描述字符类型的元字符和用于控制出现次数的量词/断言。

第1步：掌握核心元字符

元字符定义了我们要查找的“字符类别”。以下是开发中最常用的匹配项：

• .：通配符，查找除换行符（\n）和行结束符之外的任意单个字符。
• \w：单词字符，包含字母（a-z, A-Z）、数字（0-9）、下划线（_）以及部分 Unicode 汉字。
• \s：空白字符，匹配空格、制表符（Tab）等不可见空白。
• \d：数字字符，等同于 [0-9]。
• \b：单词边界，匹配单词开头或结尾的位置，常用于确保匹配的完整性。

第2步：运用量词与锚点

量词和锚点决定了上述字符出现的频率和位置：

• ^（脱字符）：断言匹配必须发生在字符串或行的开始位置（如 ^n）。
• $（美元符）：断言匹配必须发生在字符串或行的结束位置（如 n$）。
• +：表示前面的元素至少出现一次。
• *：表示前面的元素可以出现零次或多次。
• ?：表示前面的元素出现零次或一次。
• {X}：精确匹配 X 次。
• {X, Y}：匹配 X 到 Y 次之间的任意次数。

实战：常见表单内容的正则验证

在实际开发中，最常用的场景是前端数据校验。以下封装了三个独立的函数，分别针对手机号码、传统座机号码以及电子邮件地址进行格式验证。

第3步：手机号码验证逻辑

中国大陆手机号通常为 11 位，且以特定号段开头。使用正则 ^ 和 $ 锁定首尾可避免输入多余字符。

function isMobile() {
    var mobile = document.getElementById("mobile_phone");
    var num = mobile.value;
    
    // 解释：^开头，(13|186|...为支持的号段) \d{8}剩余8位数字，$结尾
    var reg = /^(13[0-9]|18[0-9]{2}|15[0-9]|147)\d{8}$/; 
    
    if(num == "") {
        alert("请输入完整的手机号");
        mobile.focus();
        return false;
    } else if (reg.test(num)) {
        alert("输入的手机号格式正确");
    } else {
        alert("请输入正确的11位手机号码");
        mobile.focus();
        return false;
    }
}

第4步：电子邮箱验证逻辑

邮箱结构较为复杂，基本模式为：用户名@域名.顶级后缀。需注意对特殊符号的转义处理。

function isEmail() {
    var email = document.getElementById("email");
    var email_value = email.value;
    
    if(email_value == "") {
        alert("请输入完整的邮箱");
        email.focus();
        return false;
    } else {
        // 解释：允许字母数字开头，中间含\w，@后接域名，\.匹配点号后缀
        var reg = /^[a-zA-Z0-9](\w)+@(\w)+(\.)+(com|net|cn|org|edu|gov)$/;
        if(reg.test(email_value)) {
            alert("输入的邮箱格式正确");
        } else {
            alert("请输入正确的邮箱格式");
            email.focus();
            return false;
        }
    }
}

第5步：固定电话/座机验证逻辑

国内座机通常包含区号和电话号码，可能带有括号、连字符或空格。此正则允许较宽松的格式输入。

function isPhone() {
    var phone = document.getElementById("phone");
    var phone_value = phone.value;
    
    if(phone_value == "") {
        alert("请输入完整的座机号码");
        phone.focus();
        return false;
    } else {
        // 解释：支持010-87989898, (0712)8989898, 010 - 23343434 等多种常见排版
        var reg = /^[(]?0\d{2,3}[)]?\s*[-]?\s*\d{7,8}$/;
        if(reg.test(phone_value)) {
            alert("输入的座机号码正确");
        } else {
            alert("输入的座机号码格式错误");
            phone.focus();
            return false;
        }
    }
}

配套 HTML 调用方式

为了运行上述验证脚本，需要在页面中添加对应的表单控件并绑定点击事件。

对于移动端（Mobile）：

<p>
  <label for="mobile_phone">手 机</label>
  <input type="text" id="mobile_phone" name="mobile_phone" value="15107105287" />
  <input type="button" value="验证" onclick="isMobile()" />
</p>

对于座机（Phone）：

<p>
  <label for="phone">座 机</label>
  <input type="text" id="phone" name="phone" value="027-87767676" />
  <input type="button" value="验证" onclick="isPhone()" />
</p>

对于邮箱（Email）：

<p>
  <label for="email">邮 箱</label>
  <input type="text" id="email" name="email" value="zhangchen2397@126.com" />
  <input type="button" value="验证" onclick="isEmail()" />
</p>

以上即为利用 JavaScript 和正则表达式进行常用格式验证的详细内容，更多关于前端表单校验的资料请关注本站其它相关文章！