前言

在之前的博客页面中我们做过简单输入框判断，只能判断是否为空、字符长度，但是真实网站还有大量严格校验需求：

• 用户邮箱格式是否正确
• 手机号必须 11 位数字
• 密码要求大小写 + 数字 + 特殊符号
• 过滤输入框非法字符、屏蔽敏感词

单纯靠字符串截取、判断无法实现精准匹配，正则表达式（RegExp） 就是前端统一校验方案。 本篇从零讲解正则基础语法，封装一套可直接复用的表单校验工具函数，给我们博客新增完整留言评论区校验功能。

一、正则是什么？两种创建方式

正则是一套匹配文本的规则模板，专门用来检索、替换、校验字符串。

1. 字面量写法（开发最常用）

javascript

运行

// 匹配纯数字
let reg = /^\d+$/;

2. new RegExp 构造函数（动态拼接规则时使用）

javascript

运行

let reg = new RegExp("^\\d+$");

核心测试方法 test ()

用来检测字符串是否符合规则，返回布尔值 true/false

javascript

运行

let reg = /^\d+$/;
console.log(reg.test("1381234")); // true 纯数字
console.log(reg.test("abc123")); // false 包含字母

二、新手必记核心元字符（不用死记，按需查表）

表格

符号	作用
\d	匹配任意数字 0-9
\w	匹配字母、数字、下划线
\s	匹配空格、换行、制表符
^	匹配字符串开头
$	匹配字符串结尾
{n,m}	匹配字符最少 n 个，最多 m 个
+	匹配前面字符至少 1 次
[]	匹配括号内任意单个字符

三、业务高频正则模板（直接复制使用）

1. 手机号校验（国内 11 位手机号）

javascript

运行

const phoneReg = /^1[3-9]\d{9}$/;
// 使用
phoneReg.test("13811112222"); // true

2. 邮箱校验

javascript

运行

const emailReg = /^[\w-]+@[\w]+\.[a-zA-Z]{2,}$/;

3. 密码校验：6-16 位，包含数字 + 字母

javascript

运行

const pwdReg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,16}$/;

4. 清除首尾全部空格（强化 trim）

javascript

运行

const spaceReg = /\s/g;
let str = "  前端  ";
str.replace(spaceReg,""); // 彻底删除所有空格

四、实战：封装全局校验工具函数

把所有校验规则整合，统一调用，适配博客评论、留言、用户信息模块

javascript

运行

/**
 * 表单校验工具
 */
const Validator = {
  // 是否为空
  isEmpty(str){
    return str.trim() === "";
  },
  // 手机号
  isPhone(str){
    const reg = /^1[3-9]\d{9}$/;
    return reg.test(str);
  },
  // 邮箱
  isEmail(str){
    const reg = /^[\w-]+@[\w]+\.[a-zA-Z]{2,}$/;
    return reg.test(str);
  },
  // 密码强度
  isPwd(str){
    const reg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,16}$/;
    return reg.test(str);
  }
}

五、博客项目落地：评论区完整校验

给博客新增评论输入模块，提交前多层校验，错误实时提示

HTML 结构

html

预览

<div class="comment-box">
  <h3>发表评论</h3>
  <div class="input-item">
    <input type="text" id="commentName" placeholder="请输入昵称">
    <p class="err-tip"></p>
  </div>
  <div class="input-item">
    <input type="text" id="commentMail" placeholder="请输入邮箱（选填）">
    <p class="err-tip"></p>
  </div>
  <div class="input-item">
    <textarea id="commentContent" placeholder="写下你的评论..."></textarea>
    <p class="err-tip"></p>
  </div>
  <button id="submitComment">提交评论</button>
</div>

JS 完整校验逻辑

javascript

运行

document.addEventListener("DOMContentLoaded",function(){
  const nameDom = document.querySelector("#commentName");
  const mailDom = document.querySelector("#commentMail");
  const contentDom = document.querySelector("#commentContent");
  const submitBtn = document.querySelector("#submitComment");
  const tipList = document.querySelectorAll(".err-tip");

  submitBtn.addEventListener("click",function(){
    // 清空所有提示
    tipList.forEach(item=>item.innerText="");
    let flag = true;

    // 1. 昵称校验
    let nameVal = nameDom.value.trim();
    if(Validator.isEmpty(nameVal)){
      tipList[0].innerText = "昵称不能为空";
      flag = false;
    }

    // 2. 邮箱非空才校验格式
    let mailVal = mailDom.value.trim();
    if(!Validator.isEmpty(mailVal) && !Validator.isEmail(mailVal)){
      tipList[1].innerText = "邮箱格式不正确";
      flag = false;
    }

    // 3. 评论内容校验
    let contentVal = contentDom.value.trim();
    if(Validator.isEmpty(contentVal)){
      tipList[2].innerText = "评论内容不能为空";
      flag = false;
    }

    // 全部校验通过
    if(flag){
      alert("评论提交成功！");
      // 清空输入框
      nameDom.value = "";
      mailDom.value = "";
      contentDom.value = "";
    }
  })
})

六、新手正则高频踩坑

1. 忘记 ^ 和 $ 首尾匹配，会出现 “包含数字就通过” 的 bug，必须限制完整字符串匹配
2. 全局匹配 g 修饰符的 test 方法会记录下标，重复测试出现结果错乱
3. 转义字符 \ 在 RegExp 构造函数中需要写双反斜杠 \\
4. 不要写过于复杂的正则，业务拆分简单规则，可读性更高

七、结语

正则是前端表单校验、文本处理的核心利器，学会后你可以实现几乎所有输入限制功能。 现在我们的博客评论系统具备完整的格式校验，页面健壮性大幅提升。 下一篇我们学习JS 异步基础与定时器进阶，搞懂同步异步执行顺序，解决定时器、延时逻辑的疑难 bug。