正则表达式在JavaScript中的应用

Pluto_ssy

已于 2023-05-01 13:15:24 修改

阅读量280

点赞数 1

分类专栏： # JavaScript学习正则表达式文章标签： javascript 正则表达式前端

于 2023-05-01 13:14:11 首次发布

本文链接：https://blog.csdn.net/pluto_ssy/article/details/130455382

版权

JavaScript学习同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

正则表达式

1 篇文章 0 订阅

订阅专栏

一、什么是正则表达式

正则表达式（regular expression）是一种通过一系列描述信息编写模式，作用是通过这些信息，找到符合这些正则表达式条件的文本，从而做匹配，替换，截取等操作；正则表达式在js中也是对象。

二、正则表达式作用

表单验证（匹配）

过滤敏感词(替换)

字符串提取我们想要的部分(提取)

三、正则表达式语法

1、定义规则

先定义规则，再查找检测

2、语法

let 变量名 = /表达式/

其中 / / 是正则表达式字面量他是对象；
JavaScript中定义正则表达式的语法有两种：

①test() 方法用来查看正则表达式与指定的字符串是否匹配

regObj.text(被检测字符串)  // 返回 ture 或者 false

②exec() 方法在一个指定字符串执行一个搜索匹配

regObj.exec(被检测字符串)  //  返回的是 数组 或者 null

    <script>
        // reg存的是对象
        let reg = /前端/
        console.log(typeof reg);

        // 检测是否匹配
        let str = '我们大家都在学习前端'

        let regular = /ssy/
        let str1 ='我是ssy' 
        let str2 ='体验未知，探索未知'
        // text() 方法
        console.log( regular.test(str1)) // true 
        console.log( regular.test(str2)) //false 
        console.log( regular.test('ssy never')) // true 
        //因为regular里面就是/ssy/，所以可以直接下面这种方法 
        console.log( /ss/.test('ssy never')) // true 
        
        // exec() 方法
        console.log(reg.exec(str)); // 数组 Array(1) 可以查看从哪个位置查找到的
        console.log(reg.exec(str2));  // null
    </script>

3、元字符

普通字符

大多数普通字符只能够描述他们自身，也就是智能匹配和他本身相同的字符

元字符

而元字符则是具有一些特殊含义，比如规定用户只能输入26英文字母，普通字符的话要abcdefg……

而元字符只需要写成[a-z]即可

在实际运用中，正则表达式一般直接复制粘贴，因为网上有绝大部分现成的规则，但学懂肯定更好。

参考文档

MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_expressions

正则测试工具：http://tool.oschina.net/regex

①边界符（表示位置，开头和结束，必须用什么开头）

位置符，提示字符所处位置

边界符	说明
^	表示匹配行首的文本（以谁开始）
$	表示匹配行尾的文本（以谁结束）

注意：如果 ^ 和 $ 在一起，表示必须是精确匹配

console.log(/^哈/.test('哈哈')); //true 
console.log(/^哈/.test('二哈')); // false
console.log(/哈$/.test('我开心的哈哈大笑')); // false
console.log(/哈$/.test('我开心的哈哈大笑，哈哈')); //true 
console.log(/^哈$/.test('哈哈，我开心的哈哈大笑')); // false
console.log(/^哈$/.test('我开心的哈哈大笑，哈哈')); // false
console.log(/^哈$/.test('我开心的哈哈大笑')); // false
console.log(/^哈$/.test('哈哈，我开心的哈哈大笑，哈哈')); // false
console.log(/^哈$/.test('哈')); //true   精确匹配

②量词（表示重复次数）

量词	说明
*	重复零次或更多次
+	重复一次或更多次
？	重复零次或一次
{n}	重复n次
{n,}	重复n次或更多次
{n,m}	重复n到m次

注意：逗号左右两侧千万不要出现空格

// *   >=0
console.log(/a*/.test('')); //true
console.log(/a*/.test('a')); //true
console.log(/a*/.test('aaaaa')); // true
console.log(/a*/.test('b')); //true
console.log('-----------------------------')

// +   >=1
console.log(/a+/.test('')); //false
console.log(/a+/.test('a')); //true
console.log(/a+/.test('aaaaa')); // true
console.log(/a+/.test('b')); //false
console.log('-----------------------------');
// ?   0||1
console.log(/a?/.test('')); //true
console.log(/a?/.test('a')); //true
console.log(/a?/.test('aaaaa')); // true
console.log(/a?/.test('b')); //true
console.log('-----------------------------');

// ?一般结合精确匹配才能实现特殊情况
console.log(/^a?$/.test('')); //true
console.log(/^a?$/.test('a')); //true
console.log(/^a?$/.test('aa')); //false
console.log('-----------------------------');

// {n}   =n
console.log(/^a{3}$/.test('aa')); //false
console.log(/^a{3}$/.test('aaa')); //true
console.log('-----------------------------');

//{n,}   >=n
console.log(/^a{3,}$/.test('aa')); //false
console.log(/^a{3,}$/.test('aaa')); //true
console.log(/^a{3,}$/.test('aaaa')); //true
console.log('-----------------------------');

// {n,m}  >=n, <=m
console.log(/^a{3,5}$/.test('aa')); //false
console.log(/^a{3,5}$/.test('aaa')); //true
console.log(/^a{3,5}$/.test('aaaa')); //true
console.log(/^a{3,5}$/.test('aaaaa')); //true
console.log(/^a{3,5}$/.test('aaaaaa')); //false
console.log('-----------------------------');

③字符类（比如 \d 表示 0~9）

(1) [ ] 匹配字符集合

后面的字符串只要包含abc中任意一个字符，都返回true

// []
console.log(/[abc]/.test('andy')); // true
console.log(/[abc]/.test('bady')); // true
console.log(/[abc]/.test('cry')); // true
console.log(/[abc]/.test('die')); // false
console.log(/[abc]/.test('abc')); // true
console.log(/^[abc]$/.test('abc')); // false
console.log(/^[abc]$/.test('a')); // true
console.log(/^[abc]$/.test('a')); // true
console.log(/^[abc]$/.test('a')); // true
console.log('-----------------------------');

(2) [ ] 里面加上 - 连字符

使用连字符 - 表示一个范围

console.log(/^[a-z]$/.test('c')); // true

// [-]
console.log(/^[a-z]$/.test('c')); // true
console.log(/^[a-zA-Z]$/.test('C')); // true
console.log(/^[a-zA-Z]$/.test('CC')); // false
console.log(/[a-zA-Z]/.test('CC')); // ture
console.log(/^[a-zA-Z0-9]$/.test('6')); // true
console.log(/^[a-zA-Z0-9-]$/.test('6')); // true
console.log(/^[a-zA-Z0-9-]$/.test('-')); // true
console.log(/^[a-zA-Z0-9-_]$/.test('_')); // true
console.log('-----------------------------');

（3） [ ] 里面加上 ^ 取反符号

比如：

[^a-z] 匹配除了小写字母以外的字符

注意要写在中括号里面

（4）. 匹配除了换行符之外的任何单个字符

（5）预定义

指的是某些常见模式的简写方式

预定义	说明
\d	匹配0-9之间的任意数字，相当与 [0-9]
\D	匹配所有0-9以外的字符，相当与 [ ^0-9 ]
\w	匹配任意的字母、数字和下划线，相当于 [A-Za-z0-9_]
\W	匹配所有的字母、数字和下划线以外的字符，相当于 [ ^A_Za-z0-9_ ]
\s	匹配空格（包括换行符、制表符、空格符等），相当于 [\t\r\n\v\f]
\S	匹配非空格的字符，相当于 [ ^\t\r\n\v\f ]

日期格式： ^\d{4}-\d{1,2}-\d{1,2}

4、修饰符

修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配

语法：

/表达式/修饰符

i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
g 是单词 global 的缩写，匹配所有满足正则表达式的结果

替换 replace 替换

字符串.replace(/正则表达式/, '替换的文字')

过滤敏感词

<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<div></div>
<script>
    let textarea = document.querySelector('textarea')
    let btn = document.querySelector('button')
    let div = document.querySelector('div')
    btn.addEventListener('click', function() {
    	if (textarea.value == '') {
    		alert('输入内容不能为空！')
    	} else {
    		div.innerHTML = textarea.value.replace(/激情|基情/g, '*')
    	}
    })
</script>

5、综合案例

正则表达式用户注册案例

<!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>
    <style>
        span {
            display: inline-block;
            width: 200px;
            height: 22px;
            background-color: pink;
            vertical-align: middle;
            line-height: 22px;
            padding-left: 15px;
        }
        .error {
            color: red;
            background: url(images/bg1.png) no-repeat left center;
            background-size: 15px 15px;
        }

        .right {
            color: green;
            background: url(images/bg2.png) no-repeat left center;
            background-size: 15px 15px;
        }
    </style>
</head>
<body>
    <input type="text">
    <span></span>
    <script>
        let input = document.querySelector('input')
        let span = input.nextElementSibling
        input.addEventListener('blur', function() {
            if(/^[a-zA-Z0-9-_*]{6,16}$/.test(input.value)) {
                span.className = 'right'
                span.innerHTML = '输入正确!'
                this.style.border = ''
            } else {
                span.className = 'error'
                span.innerHTML = '只能输入6~16位字符!'
                this.style.border = '1px solid red'
            }
        })
    </script>
</body>
</html>

用户注册

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
  <style>
    .xtx-card {
      width: 300px;
      margin: 0 auto;
      font-family: '宋体';
      font-size: larger;
      font-weight: bold;
    }
    h3 {
      font-size: 35px;
      text-align: center;
      color: rgb(30, 199, 157);
    }
    .xtx-card .xtx-form {
      margin-top: 30px;
      /* margin-left: 60px; */
    }
    .xtx-card .xtx-form .xtx-form-item {
      position: relative;
      margin: 26px auto;
    }
    .xtx-card .xtx-form .xtx-form-item input {
      width: 284px;
      height: 40px;
      border: 2px solid black;
      border-radius: 4px;
      padding: 0 8px;
    }
    .xtx-card .xtx-form .xtx-form-item .pd-right {
      width: 162px;
      padding-right: 130px;
    }
    .xtx-card .xtx-form .xtx-form-item .code {
      position: absolute;
      width: 114px;
      padding: 0 4px;
      border-radius: 3px;
      color: white;
      background-color: rgb(91, 217, 175, 0.8);
      text-align: center;
      line-height: 40px;
      left: 180px;
      top: 2px;
    }
    .xtx-card .xtx-form .xtx-form-item .msg {
      position: absolute;
      color: red;
      font-size: small;
      line-height: 16px;
      top: 46px;
      left: 10px;
    }
    .xtx-card .xtx-form .xtx-form-item .submit {
      width: 300px;
      height: 40px;
      margin-top: -8px;
      background-color: rgb(25, 197, 140);
      border: 2px solid rgb(25, 197, 140);
      border-radius: 4px;
      color: white;
      text-align: center;
    }
    .xtx-card .xtx-form .xtx-form-item .icon-queren,.xtx-card .xtx-form .xtx-form-item i {
      color: rgb(6, 191, 191);
    }
  </style>
</head>

<body>
    <!-- 卡片 -->
    <div class="xtx-card">
        <h3>新用户注册</h3>
        <form class="xtx-form">
            <div data-prop="username" class="xtx-form-item">
                <input name="username" type="text" placeholder="设置用户名称">
                <span class="msg"></span>
            </div>
            <div data-prop="phone" class="xtx-form-item">
                <input name="phone" type="text" placeholder="输入手机号码  ">
                <span class="msg"></span>
            </div>
            <div data-prop="code" class="xtx-form-item">
                <input name="code" type="text" placeholder="短信验证码" class="pd-right">
                <span class="msg"></span>
                <a class="code" href="javascript:;">发送验证码</a>
            </div>
            <div data-prop="password" class="xtx-form-item">
                <input name="password" type="password" placeholder="设置6至20位字母、数字和符号组合">
                <span class="msg"></span>
            </div>
            <div data-prop="confirm" class="xtx-form-item">
                <input name="confirm" type="password" placeholder="请再次输入上面密码">
                <span class="msg"></span>
            </div>
            <div class="xtx-form-item pl50">
                <i class="iconfont icon-queren icon-queren2"></i>
                已阅读并同意<i>《用户服务协议》</i>
            </div>
            <div class="xtx-form-item">
                <button class="submit">下一步</button>
                <!-- <a class="submit" href="javascript:;">下一步</a> -->
            </div>
        </form>
    </div>

    <script>
        (function () {
          // 需求①： 发送验证码
          // 用户点击之后，显示 05秒后重新获取
          // 时间到了，自动改为 重新获取
          let code = document.querySelector('.code')
          code.addEventListener('click', function () {
            this.innerHTML = `05秒后重新获取`
            let mark = 5
            let timer = setInterval(function () {
              mark--
              code.innerHTML = `0${mark}秒后重新获取`
              if (mark === 0) {
                clearInterval(timer)
                code.innerHTML = `重新获取`
              }
            }, 1000)
          })

          // 需求②： 用户名验证（注意封装函数 verifyxxx）
          // 正则 /^ [a - zA - Z0 - 9 - _]{ 6, 10 } $ /
          // 如果不符合要求，则出现提示信息 并 return false 
          // 否则 则返回return true 
          // 之所以返回 布尔值，是为了 最后的提交按钮做准备
          let username = document.querySelector('[name=username]') //css属性选择器：通过属性进行选择标签 【属性=值】值不需要引号 等号两边不要加空格
          username.addEventListener('change', verifyUsername)
    
          // 封装函数verifyUsername  验证用户名是否满足正则表达式
          function verifyUsername() {
            let span = username.nextElementSibling
            let reg = /^[a-zA-Z0-9-_]{6,10}$/
            if (!reg.test(username.value)) {
              //如果不符合
              //给出提示信息
              span.innerHTML = '请输入6-10个字符'
              span.previousElementSibling.style.borderColor = 'red'
              //return 退出函数
              return false
            }
            //如果符合  不给出提示
            span.innerHTML = ''
            span.previousElementSibling.style.borderColor = 'black'
            return true   //这里返回的布尔值是用于提交按钮进行验证的 只要return的返回值有false 就无法提交
          }        
    
          // 需求③： 手机号验证
          // 正则: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
          // 其余同上
          let phone = document.querySelector('[name=phone]')
          phone.addEventListener('change', verifyPhone)
          //封装手机验证函数
          function verifyPhone() {
            let span = phone.nextElementSibling
            let reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
            if (!reg.test(phone.value)) {
              //如果手机号不合法 给出提示信息
              span.innerHTML = '请输入合法手机号'
              span.previousElementSibling.style.borderColor = 'red'
              return false
            }
            //手机号合法
            span.innerHTML = ''
            span.previousElementSibling.style.borderColor = 'black'
            return true
          }    
    
          // 需求④： 验证码验证
          // 正则 /^\d{6}$/
          // 其余同上
          let inputCode = document.querySelector('input[name=code]')
          inputCode.addEventListener('change', verifyInputCode)
          function verifyInputCode() {
            let span = inputCode.nextElementSibling
            let reg = /^\d{6}$/
            if (!reg.test(inputCode.value)) {
              //验证码不符合 给出提示信息
              span.innerHTML = '请输入6位数字验证码'
              span.previousElementSibling.style.borderColor = 'red'
              return false
            }
            //验证码合法
            span.innerHTML = ' '
            span.previousElementSibling.style.borderColor = 'black'
            return true
          }
    
          // 需求⑤： 密码验证
          // 正则 /^[a-zA-Z0-9-_]{6,20}$/
          //   其余同上
          let password = document.querySelector('[name=password]')//
          password.addEventListener('change', verifypassword)
          //封装手机验证函数
          function verifypassword() {
            let span = password.nextElementSibling
            let reg = /^[a-zA-Z0-9-_]{6,20}$/
            if (!reg.test(password.value)) {
              //如果手机号不合法 给出提示信息
              span.innerHTML = '请输入6~20位密码'
              span.previousElementSibling.style.borderColor = 'red'
              return false
            }
            //密码合法
            span.innerHTML = ''
            span.previousElementSibling.style.borderColor = 'black'
            return true
          }
            
          // 需求⑥： 再次密码验证
          // 如果本次密码不等于上面输入的密码则返回错误信息
          // 其余同上
          let confirm = document.querySelector('[name=confirm]')
          confirm.addEventListener('change', verifyConfirm)
          function verifyConfirm() {
            let span = confirm.nextElementSibling
            if (password.value !== confirm.value) {
              span.innerHTML = '两次密码不一致'
              span.previousElementSibling.style.borderColor = 'red'            
              return false
            }
            span.innerHTML = ''
            span.previousElementSibling.style.borderColor = 'black'
            return true
          }
    
          // 需求⑦： 我同意模块
          // 切换类 .icon-queren2 则是默认选中样式
          let icon = document.querySelector('.icon-queren')
          icon.addEventListener('click', function () {
            this.classList.toggle('icon-queren2')
          })
    
    
          // 需求⑧： 提交按钮模块
          // 使用 submit 提交事件
          // 如果上面的每个模块，返回的是 false 则 阻止提交
          // 如果没有勾选同意协议，则提示 需要勾选
          //提交前需要验证
          // button自带提交功能,所以给form添加提交事件就可以
          let form = document.querySelector('form')
          form.addEventListener('submit', function (e) {
            //submit事件  点击之后 默认行为是：不进行数据校验就提交
            //怎么阻止提交？ 怎么阻止默认行为 
            //如果数据没有验证成功 我们要阻止提交的行为
            // if (verifyUsername() & verifyConfirm() & verifyInputCode() & verifyPhone() & verifypassword()) {
    
            // }
    
            if (!verifyUsername()) {
              //当返回值是false时 也就是说数据不合法的时候 要阻止提交
              e.preventDefault()
            }
    
    
            if (!verifyConfirm()) {
              //当返回值是false时 也就是说数据不合法的时候 要阻止提交
              e.preventDefault()
            }
    
            if (!verifyInputCode()) {
              //当返回值是false时 也就是说数据不合法的时候 要阻止提交
              e.preventDefault()
            }
    
    
            if (!verifyPhone()) {
              //当返回值是false时 也就是说数据不合法的时候 要阻止提交
              e.preventDefault()
            }
    
            if (!verifypassword()) {
              //当返回值是false时 也就是说数据不合法的时候 要阻止提交
              e.preventDefault()
            }
            //勾选模块 必须勾选才能提交 
            if (!icon.classList.contains('icon-queren2')) {
              //判断勾选按钮是否含有一个叫icon-queren2的类名 如果有 
              // classList.add() 追加
              // classList.remove() 移除
              // classList.toggle() 切换
              // classList.contains() 是否包含 如果有则返回true 如果没有该类名则返回false
              // 括号内写类名字符串 
        
              //如果没有勾选 弹出提示框
              alert('请勾选同意协议')
              e.preventDefault()    
            }
    
          })
        }());
      </script>    
</body>
</html>

用户登录

<!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>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/base.css">
    <style>
        body{
          background: url(images/bg7.png) no-repeat;
          background-size: 100%;
          background-position: 0 70px;
        }
        .xtx-login-header .logo img {
            float: left;
            width: 200px;
        }
        .xtx-login-header .home{
          float: right;
          margin-top: 20px;
          margin-right: 100px;
          font-style: italic;
          font-size: 20px;
        }
        .xtx-login-header .home span {
          color: aqua;
        }
        .xtx-login-main {
          float: right;
          margin: 100px 10px;
          padding: 30px 20px;
          background-color: #fff;
          height: 250px;
        }
        .xtx-login-main form .box .tab-nav {
          overflow:hidden; /* 清除浮动 */
        }
        .xtx-login-main form .tab-nav a {
          font: '宋体' bold;
        }
        .xtx-login-main form .tab-nav .active {
          float: left;
          border-bottom: 2px solid aqua;
        }
        .xtx-login-main form .tab-nav .code1 {
          float: right;
        }
        .code {
          margin: 30px 57px;
          width: 200px;
        }
        .xtx-login-main form .tab-pane .link, .xtx-login-main form .tab-pane .link a{
          float: right;
          margin: 5px 0;
          color: aqua;
        }
        .xtx-login-main form .tab-pane input {
          padding: 0 5px;
        }
        .xtx-login-main form .tab-pane .agree {
          position: relative;
          text-align: center;
        }
        .xtx-login-main form .tab-pane .agree label {
          position: absolute;
          top: 2px;
        }
        .xtx-login-main form .tab-pane .agree a {
          color: aqua;
        }
        .xtx-login-main form .tab-pane .clearfix {
          position: absolute;
        }
        .xtx-login-main form .tab-pane .clearfix button {
          height: 30px;
          width: 310px;
          margin: 0 auto;
          color: white;
          background: aqua;
          border: aqua;
          border-radius: 4px;
          left: 5px;
        }
        .xtx-login-main form .tab-pane .clearfix a {
          margin: 5px;
        }
        .xtx-login-main form .tab-pane .clearfix .fl {
          float: left;
        }
        .xtx-login-main form .tab-pane .clearfix .fr {
          float: right;
        }
        .xtx-login-main form .tab-pane link, .xtx-login-main form .tab-pane .input input,.xtx-login-main form .tab-pane .agree, .xtx-login-main form .tab-pane .clearfix {
          height: 30px;
          width: 300px;
          margin: 8px auto;
        }
    </style>
</head>
<body>
    <!-- 登录头部 -->
    <div class="xtx-login-header">
        <h1 class="logo"><img src="images/logo.png" alt=""></h1>
        <a class="home" href="./example小兔仙首页.html">进入网站首页 <span> >></span></a>
    </div>
    <!-- 登录内容 -->
    <div class="xtx-login-main">
        <div class="wrapper">
            <form action="">
                <div class="box">
                    <div class="tab-nav">
                        <a href="javascript:;" class="active" data-id="0">账户登录</a>
                        <a href="javascript:;" class="code1" data-id="1">二维码登录</a>
                    </div>
                    <div class="tab-pane">
                        <div class="link">
                            <a href="javascript:;">手机验证码登录</a>
                        </div>
                        <div class="input">
                            <input required type="text" placeholder="请输入用户名称/手机号码" name="username">
                        </div>
                        <div class="input">
                            <input required type="password" placeholder="请输入密码" name="password">
                        </div>
                        <div class="agree">
                            <label for="my-checkbox">
                                <input type="checkbox" value="1" id="my-checkbox" class="remember" name="agree">
                            </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            我已同意 <a href="javascript:;">《服务条款》</a href="javascript:;"> 和 <a>《服务条款》</a>
                        </div>
                        <div class="button clearfix">
                            <button type="submit" class="dl">登 录</button>
                            <!-- <a class="dl" href="./center.html">登 录</a> -->
                            <a class="fl" href="./forget.html">忘记密码？</a>
                            <a class="fr" href="./example小兔仙注册.html">免费注册</a>
                        </div>
                    </div>
                    <div class="tab-pane" style="display: none;">
                        <img class="code" src="./images/CSDN.png" alt="">
                    </div>
                </div>
            </form>
        </div>
    </div>
      <script>
        // 1.tab栏切换
        const tab_nav = document.querySelector('.tab-nav')
        const pane = document.querySelectorAll('.tab-pane')
        // 1.1事件监听，使用事件委托
        tab_nav.addEventListener('click', function(e){
          if (e.target.tagName === 'A') {
            // 排他思想，去掉上一个active
            tab_nav.querySelector('.active').classList.remove('active')
            // 当前元素添加active
            e.target.classList.add('active')
            // 先干掉所有人，for循环
            for(let i = 0; i < pane.length; i++) {
              pane[i].style.display = 'none'
            }
            // 让对应序号的 大pane显示
            console.log(e.target);
            pane[e.target.dataset.id].style.display = 'block'
          }
        })
     
        // 2. 点击登录跳转页面
        const form = document.querySelector('form')
        const agree = form.querySelector('[name=agree]')
        const username = form.querySelector('[name=username]')
        const password = form.querySelector('[name=password]')
        form.addEventListener('submit', function(e){
          e.preventDefault()
          // 判断是否勾选同意协议
          if(!agree.checked){       
            return alert('请勾选同意协议')
          }
          let obj = {
            username: username.value,
            password: password.value
          }
          // 将用户名记录到本地存储中
          localStorage.setItem('xtx-uname-pwd', JSON.stringify(obj))
          // 跳转到首页
          location.href = 'example小兔仙首页.html'
        })

        let obj = JSON.parse(localStorage.getItem('xtx-uname-pwd'))
        if (obj) {
          username.value = obj.username,
          password.value = obj.password,
          // 有数据默认勾选
          remember.checked = true
        }
      </script>
</body>
</html>

用户首页

<!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">
    <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
    <title>小兔鲜儿-新鲜、亲民、快捷</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    <!-- 必须按照这个顺序引用各个样式表 -->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common-xtx.css">
    <link rel="stylesheet" href="css/index-xtx.css">
</head> 
<body>
    <!-- 快捷导航 -->
    <div class="shortcut">
        <div class="wrapper">
            <ul>
                <li><a href="./example小兔鲜儿登录页.html">请先登录</a></li>
                <li><a href="./example小兔仙注册.html">免费注册</a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">会员中心</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">在线咨询</a></li>
                <li><a href="#"><span></span>手机版</a></li>
            </ul>
        </div>
    </div>
    <div class="header wrapper">
        <div class="logo">
            <h1><a href="#">小兔鲜儿</a></h1>
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
            </ul>
        </div>
        <div class="search">
            <input type="text" placeholder="搜一搜">
            <!-- 定位放大镜 -->
            <span></span>
        </div>
        <div class="car">
            <span>2</span>
        </div>
    </div>

    <!-- banner -->
    <div class="banner">
        <div class="wrapper">
            <ul>
                <!-- 有多少个图就有多少个li -->
                <li><a href="#"><img src="./images/图2.jpg" alt=""></a></li>
                <!-- <li><a href="#"><img src="./images/图2.jpg" alt=""></a></li>
                <li><a href="#"><img src="./images/图3.jpg" alt=""></a></li>
                <li><a href="#"><img src="./images/图4.jpg" alt=""></a></li>
                <li><a href="#"><img src="./images/图5.jpg" alt=""></a></li> -->
            </ul>
            <!-- 侧导航 -->
            <div class="aside">
                <ul>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                </ul>
            </div>
            <!-- 箭头 -->
            <!-- prev:上一个 -->
            <div class="prev"></div>
            <!-- next：下一个 -->
            <div class="next"></div>
            <!-- 圆点 :当前状态：current/active-->
            <!-- js 找到用户点击的li 添加类名 li变成白色的 -->
            <ol>
                <li></li>
                <li></li>
                <li class="current"></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>  

    <!-- 新鲜好物 -->
    <div class="goods wrapper">
        <!-- hd 代表header,头部的意思 -->
        <div class="hd">
            <h2>新鲜好物<span>新鲜出炉 品质靠谱</span></h2>
            <a href="#">查看全部<span>></span></a>
        </div>
        <!-- bd 表示body,身体，写内容 -->
        <div class="bd clearfix">
            <ul>
                <li>
                    <a href="#">
                        <img src="./uploads/十二星座手链33.8元.png" alt="">
                        <h3>十二星座手链</h3>
                        <div>￥<span>33.8</span></div>
                        <b>新品</b>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/华为手机1588元.png" alt="">
                        <h3>华为手机</h3>
                        <div>￥<span>1588</span></div>
                        <b>新品</b>

                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/海信激光电视10999元.png" alt="">
                        <h3>海信激光电视</h3>
                        <div>￥<span>10999</span></div>
                        <b>新品</b>

                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/瑞士手表1380元.png" alt="">
                        <h3>瑞士手表</h3>
                        <div>￥<span>1380</span></div>
                        <b>新品</b>

                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 生鲜 -->
    <div class="shengxian wrapper">
        <div class="hd">
            <h2>生鲜</h2>
            <a href="#" class="more">查看全部<span>></span></a>
            <ul>
                <li><a href="#">水果</a></li>
                <li><a href="#">水果</a></li>
                <li><a href="#">水果</a></li>
                <li><a href="#">水果</a></li>
                <li><a href="#">水果</a></li>
                <li><a href="#">水果</a></li>
                <li><a href="#">水果</a></li>
            </ul>
        </div>
        <div class="bd clearfix">
            <div class="left">
                <a href="#"><img src="./uploads/手链.png" alt=""></a>
            </div>
            <div class="right">
                <ul>
                    <li><a href="#">
                        <img src="./uploads/华为手机1588元.png" alt="">
                        <div>华为手机<span>1588元</span></div>
                    </a></li>
                    <li><a href="#">
                        <img src="./uploads/华为手机1588元.png" alt="">
                        <div>华为手机<span>1588元</span></div>
                    </a></li>
                    <li><a href="#">
                        <img src="./uploads/华为手机1588元.png" alt="">
                        <div>华为手机<span>1588元</span></div>
                    </a></li>
                    <li><a href="#">
                        <img src="./uploads/华为手机1588元.png" alt="">
                        <div>华为手机<span>1588元</span></div>
                    </a></li>
                    <li><a href="#">
                        <img src="./uploads/华为手机1588元.png" alt="">
                        <div>华为手机<span>1588元</span></div>
                    </a></li>
                    <li><a href="#">
                        <img src="./uploads/华为手机1588元.png" alt="">
                        <div>华为手机<span>1588元</span></div>
                    </a></li>
                    
                </ul>
            </div>
        </div>
    </div>
    <!-- 版权区域 -->
    <div class="footer">
        <div class="wrapper">
            <div class="top">
                <ul>
                    <li>
                        <!-- 通过伪元素添加标签实现精灵图 -->
                        <span>价格亲民</span>
                    </li>
                    <li>
                        <span>物流快捷</span>
                    </li>
                    <li>
                        <span>品质保鲜</span>
                    </li>
                </ul>
            </div>
            <div class="bottom">
                <p>
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> <br><br>
                CopyRight @ 小兔鲜儿</p>
            </div>
        </div>
    </div>
    <script>
        window.addEventListener('load', function() {        
            let li = document.querySelector('.shortcut .wrapper ul li:first-child')
            let obj = JSON.parse(localStorage.getItem('xtx-uname-pwd'))
            if (obj) {
                li.innerHTML = `<a href="javascript:;">你好，<font color="aqua">${obj.username}</font> 欢迎你！</a>`
            }
        })
    </script>
</body>
</html>