apis-day7综合案例

最新推荐文章于 2023-11-01 09:30:00 发布

一束光亮

最新推荐文章于 2023-11-01 09:30:00 发布

阅读量426

点赞数

分类专栏：前端第二阶段js基础、web apis实用案例等文章标签：前端 java html

本文链接：https://blog.csdn.net/m0_52766105/article/details/128275254

版权

前端第二阶段js基础、web apis实用案例等专栏收录该内容

11 篇文章 0 订阅

订阅专栏

apis-day7综合案例-小兔鲜案例注册

需求①：发送验证码

用户点击之后，显示 05秒后重新获取

时间到了，自动改为重新获取

需求②：用户名验证（注意封装函数 verifyxxx）

正则 /¹{6,10}$/

如果不符合要求，则出现提示信息并 return false

否则则返回return true

之所以返回布尔值，是为了最后的提交按钮做准备

需求③：手机号验证

正则: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/

其余同上

需求④：验证码验证

正则 /^\d{6}$/

其余同上

需求⑤：密码验证

正则 /²{6,20}$/

其余同上

需求⑥：再次密码验证

如果本次密码不等于上面输入的密码则返回错误信息

其余同上

需求⑦：我同意模块

添加类 .icon-queren2 则是默认选中样式

需求⑧：提交按钮模块

使用 submit 提交事件

如果上面的每个模块，返回的是 false 则阻止提交

如果没有勾选同意协议，则提示需要勾选

跳转后页面需求：

如果是移动端打开，则跳转到移动端页面

如果本地存储有数据，则显示你好 xxxx

否则显示请跳转到注册页面

代码如下：

<!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="shortcut icon" href="../favicon.ico"> -->
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/login.css">
  <!-- <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css"> -->
</head>

<body>
  <!-- 登录头部 -->
  <div class="xtx-login-header">
    <h1 class="logo"></h1>
    <a class="home" href="./index.html">进入网站首页</a>
  </div>
  <!-- 登录内容 -->
  <div class="xtx-login-main">
    <div class="wrapper">
      <form action="">
        <div class="box">
          <div class="tab-nav">
            <a href="javascript:;" class="active">账户登录</a>
            <a href="javascript:;">二维码登录</a>
          </div>
          <div class="tab-pane">
            <div class="link">
              <a href="javascript:;">手机验证码登录</a>
            </div>
            <div class="input">
              <span class="iconfont icon-zhanghao"></span>
              <input required type="text" placeholder="请输入用户名称/手机号码" name="username">
            </div>
            <div class="input">
              <span class="iconfont icon-suo"></span>
              <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">
                <span class="iconfont icon-xuanze"></span>
              </label>
              我已同意 <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="./register.html">免费注册</a>
            </div>
          </div>
          <div class="tab-pane" style="display: none;">
            <!-- <img class="code" src="../images/code.png" alt=""> -->
          </div>
        </div>
      </form>
    </div>
  </div>
  <!-- 登录底部 -->
  <div class="xtx-login-footer">
    <!-- 版权信息 -->
    <div class="copyright">
      <p>
        <a href="javascript:;">关于我们</a>
        <a href="javascript:;">帮助中心</a>
        <a href="javascript:;">售后服务</a>
        <a href="javascript:;">配送与验收</a>
        <a href="javascript:;">商务合作</a>
        <a href="javascript:;">搜索推荐</a>
        <a href="javascript:;">友情链接</a>
      </p>
      <p>CopyRight &copy; 小兔鲜儿</p>
    </div>
  </div>
  <script>
    // 1.获取元素
    let username = document.querySelector('[name=username]')
    let password = document.querySelector('[name=username]')
    let remember = document.querySelector('.remember')
    let dl = document.querySelector('.dl')
    dl.addEventListener('click', function (e) {
      e.preventDefault()
      // 如果没有勾选
      if (!remember.checked) {
        alert('请勾选复选框')
        return
      }
      let obj = {
        username: username.value,
        password: password.value,
      }
      localStorage.setItem('pink', JSON.stringify(obj))
      // 跳转到新的页面
      location.href = './index.html'

    })
    // 2.保存密码，下次在登录时自动记住密码，并勾选复选框
    let obj = JSON.parse(localStorage.getItem('pink'))
    if (obj) {
      // 把本地存储数据复制到文本框
      username.value = obj.username
      // 为啥记住了用户名、密码，重新打开页面，只记住了用户名？本地存储用户名与密码也同时存了呀，好奇怪
      password.value = obj.password
      // 有数据自动勾选复选框
      remember.checked = true
    }

  </script>
</body>

</html>

展示界面如下：

在这里插入图片描述

小兔鲜代码如下：

  <script>
    // 如果本地存储有数据，则显示你好×××
    // 否则请跳转到注册页面
    let li = document.querySelector('.xtx_navs li:first-child')
    //obj是一个对象 (里面是数组元素)
    let obj = JSON.parse(localStorage.getItem('pink'))
    if (obj) {
      li.innerHTML = ` <a href="javascript:;">你好，${obj.username}欢迎来到我的世界！ </a>`
    }

  </script>