页面注册案例

news2024/11/14 19:46:38

效果图：
在这里插入图片描述

分析业务模块：

  1. 发送验证码模块
  2. 各个表单验证模块
  3. 勾选已经阅读同意模块
  4. 下一步验证全部模块：只要上面有一个input验证不通过就不同意提交

业务 1 ：发送验证码

  • 用户点击之后，显示05秒后重新获取
  • 时间到了，自动改为 重新获取

业务 2 ：用户名验证(注意封装函数 verifyxxx)，失去焦点触发这个函数

  • 正则 /^ [a-zA-Z0-9-_ ]{6,10}$/
  • 如果不符合要求，则出现提示信息 并return false 中断程序
  • 否则 则返回return true
  • 之所以返回布尔值，是为了 最后的提交按钮做准备
  • 侦听使用change事件，当鼠标离开了表单，并且表单值发生了变化时触发(类似京东效果)

业务 3 ：手机号验证

  • 正则： /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
  • 其余同上

业务 4 ：验证码验证

  • 正则： /^\d{6}$/
  • 其余同上

业务 5 ：密码验证

  • 正则：/^ [a-zA-Z0-9-_]{6,20}$/
  • 其余同上

业务 6 ：再次密码验证

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

业务 7 ：我同意模块

  • 添加类 .icon-queren2 则是默认选中样式 可以使用 toggle切换类

业务 8 ：表单提交模块

  • 使用submit提交事件
  • 如果没有勾选同意协议，则提示 需要勾选
  • classList.contains() 看看有没有包含某个类，如果有则返回true，没有则返回false
  • 如果上面input表单只要有模块，返回的是false 则 阻止提交
<!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/register.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head>

<body>
  <!-- 项部导航 -->
  <div class="xtx_topnav">
    <div class="wrapper">
      <!-- 顶部导航 -->
      <ul class="xtx_navs">
        <li>
          <a href="./login.html">请先登录</a>
        </li>
        <li>
          <a href="./register.html">免费注册</a>
        </li>
        <li>
          <a href="./center-order.html">我的订单</a>
        </li>
        <li>
          <a href="./center.html">会员中心</a>
        </li>
        <li>
          <a href="javascript:;">帮助中心</a>
        </li>
        <li>
          <a href="javascript:;">在线客服</a>
        </li>
        <li>
          <a href="javascript:;">
            <i class="mobile sprites"></i>
            手机版
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!-- 头部 -->
  <div class="xtx_header">
    <div class="wrapper">
      <!-- 网站Logo -->
      <h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
      <!-- 主导航 -->
      <div class="xtx_navs">
        <ul class="clearfix">
          <li>
            <a href="./index.html">首页</a>
          </li>
          <li>
            <a href="./category01.html">生鲜</a>
          </li>
          <li>
            <a href="./category01.html">美食</a>
          </li>
          <li>
            <a href="./category01.html">餐厨</a>
          </li>
          <li>
            <a href="./category01.html">电器</a>
          </li>
          <li>
            <a href="./category01.html">居家</a>
          </li>
          <li>
            <a href="./category01.html">洗护</a>
          </li>
          <li>
            <a href="./category01.html">孕婴</a>
          </li>
          <li>
            <a href="./category01.html">服装</a>
          </li>
        </ul>
      </div>
      <!-- 站内搜索 -->
      <div class="xtx_search clearfix">
        <!-- 购物车 -->
        <a href="./cart-none.html" class="xtx_search_cart sprites">
          <i>2</i>
        </a>
        <!-- 搜索框 -->
        <div class="xtx_search_wrapper">
          <input type="text" placeholder="搜一搜" onclick="location.href='./search.html'">
        </div>
      </div>
    </div>
  </div>
  <div class="xtx-wrapper">
    <div class="container">
      <!-- 卡片 -->
      <div class="xtx-card">
        <h3>新用户注册</h3>
        <form class="xtx-form">
          <div data-prop="username" class="xtx-form-item">
            <span class="iconfont icon-zhanghao"></span>
            <input name="username" type="text" placeholder="设置用户名称">
            <span class="msg"></span>
          </div>
          <div data-prop="phone" class="xtx-form-item">
            <span class="iconfont icon-shouji"></span>
            <input name="phone" type="text" placeholder="输入手机号码  ">
            <span class="msg"></span>
          </div>
          <div data-prop="code" class="xtx-form-item">
            <span class="iconfont icon-zhibiaozhushibiaozhu"></span>
            <input name="code" type="text" placeholder="短信验证码">
            <span class="msg"></span>
            <a class="code" href="javascript:;">发送验证码</a>
          </div>
          <div data-prop="password" class="xtx-form-item">
            <span class="iconfont icon-suo"></span>
            <input name="password" type="password" placeholder="设置6至20位字母、数字和符号组合">
            <span class="msg"></span>
          </div>
          <div data-prop="confirm" class="xtx-form-item">
            <span class="iconfont icon-suo"></span>
            <input name="confirm" type="password" placeholder="请再次输入上面密码">
            <span class="msg"></span>
          </div>
          <div class="xtx-form-item pl50">
            <i class="iconfont icon-queren"></i>
            已阅读并同意<i>《用户服务协议》</i>
          </div>
          <div class="xtx-form-item">
            <button class="submit">下一步</button>
            <!-- <a class="submit" href="javascript:;">下一步</a> -->
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- 公共底部 -->
  <div class="xtx_footer clearfix">
    <div class="wrapper">
      <!-- 联系我们 -->
      <div class="contact clearfix">
        <dl>
          <dt>客户服务</dt>
          <dd class="chat">在线客服</dd>
          <dd class="feedback">问题反馈</dd>
        </dl>
        <dl>
          <dt>关注我们</dt>
          <dd class="weixin">公众号</dd>
          <dd class="weibo">微博</dd>
        </dl>
        <dl>
          <dt>下载APP</dt>
          <dd class="qrcode">
            <img src="./uploads/qrcode.jpg">
          </dd>
          <dd class="download">
            <span>扫描二维码</span>
            <span>立马下载APP</span>
            <a href="javascript:;">下载页面</a>
          </dd>
        </dl>
        <dl>
          <dt>服务热线</dt>
          <dd class="hotline">
            400-0000-000
            <small>周一至周日 8:00-18:00</small>
          </dd>
        </dl>
      </div>
    </div>
    <!-- 其它 -->
    <div class="extra">
      <div class="wrapper">
        <!-- 口号 -->
        <div class="slogan">
          <a href="javascript:;" class="price">价格亲民</a>
          <a href="javascript:;" class="express">物流快捷</a>
          <a href="javascript:;" class="quality">品质新鲜</a>
        </div>
        <!-- 版权信息 -->
        <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>
    </div>
  </div>
  <script>
    
  </script>
</body>

</html>

<script>
    (function(){
      // 1.发送短信验证
    const code=document.querySelector('.code')
    let flag=true   //通过一个变量来控制  节流阀
    // 1.1 点击事件
    code.addEventListener('click',function(){
      if(flag){
        flag=false
        let i=5
        // 点击完毕后立马触发
        code.innerHTML=`0${i}秒之后重新获取`
        // 开启定时器
        let timerId=setInterval(function(){
          i--
          code.innerHTML=`0${i}秒之后重新获取`
          if(i===0){
            // 清除定时器
            clearInterval(timerId)
            // 到点重新开启flag
            flag=true
            // 重新获取
            code.innerHTML=`重新获取`
          }
        },1000)
      }
    })
    })();
    
    // 2.验证用户名
    // 2.1 获取用户名表单
    const username=document.querySelector('[name=username]')
    // 2.2 使用change事件  值发生变化的时候
    username.addEventListener('change',verifyName)
    // 2.3 封装verifyName函数
    function verifyName(){
      const span=username.nextElementSibling
      // 2.4 定规则 用户名
      const reg= /^[a-zA-Z0-9-_]{6,10}$/
      if(!reg.test(username.value)){
        span.innerText='输入不合法，请输入6~10位'
        return false
      }
      // 2.5 合法的  就清空span
      span.innerText=''
      return true
    }

    // 3.验证手机号
    // 3.1 获取手机表单
    const phone=document.querySelector('[name=phone]')
    // 3.2 使用change事件  值发生变化的时候
    phone.addEventListener('change',verifyPhone)
    // 3.3 封装verifyPhone函数
    function verifyPhone(){
      const span=phone.nextElementSibling
      // 3.4 定规则 手机号
      const 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.innerText='输入不合法，请输入正确的11位手机号'
        return false
      }
      // 3.5 合法的  就清空span
      span.innerText=''
      return true
    }


    // 4.验证验证码
    // 4.1 获取验证码表单
    const code=document.querySelector('[name=code]')
    // 4.2 使用change事件  值发生变化的时候
    code.addEventListener('change',verifyCode)
    // 4.3 封装verifyCode函数
    function verifyCode(){
      const span=code.nextElementSibling
      // 4.4 定规则 验证码
      const reg=   /^\d{6}$/
      if(!reg.test(code.value)){
        span.innerText='输入不合法，请输入正确的6位数字'
        return false
      }
      // 4.5 合法的  就清空span
      span.innerText=''
      return true
    }

    // 5.验证密码
    // 5.1 获取密码表单
    const password=document.querySelector('[name=password]')
    // 5.2 使用change事件  值发生变化的时候
    password.addEventListener('change',verifyPassword)
    // 5.3 封装verifyPassword函数
    function verifyPassword(){
      const span=password.nextElementSibling
      // 5.4 定规则 密码
      const reg=  /^[a-zA-Z0-9-_]{6,20}$/
      if(!reg.test(password.value)){
        span.innerText='输入不合法，请输入正确的6位数字'
        return false
      }
      // 5.5 合法的  就清空span
      span.innerText=''
      return true
    }

    // 6.验证密码再次验证
    // 6.1 获取密码表单
    const confirm=document.querySelector('[name=confirm]')
    // 6.2 使用change事件  值发生变化的时候
    confirm.addEventListener('change',verifyConfirm)
    // 6.3 封装verifyConfirm函数
    function verifyConfirm(){
      const span=confirm.nextElementSibling
      // 当前的表单值不等于 密码框的值就错误
      if(confirm.value!==password.value){
        span.innerText='两次密码不一致'
        return false
      }
      // 6.5 合法的  就清空span
      span.innerText=''
      return true
    }

    // 7.我同意模块
    const queren=document.querySelector('.icon-queren')
    queren.addEventListener('click',function(){
      // 添加类 .icon-queren2 则是默认选中样式 可以使用 toggle切换类
      this.classList.toggle('icon-queren2')
    })

    // 8.提交模块
    const form=document.querySelector('form')
    form.addEventListener('submit',function(e){
      // 判断是否勾选我同意模块，如果有icon-queren2说明就勾选了，否则没勾选
      if(!queren.classList.contains('icon-queren2')){
        alert('请勾选同意协议')
        // 阻止提交
        e.preventDefault()
      }
      // 依次判断上面的每个框框 是否通过，只要有一个没有通过的就阻止
      if(!verifyName()) e.preventDefault()
      if(!verifyPhone()) e.preventDefault()
      if(!verifyCode()) e.preventDefault()
      if(!verifyPassword()) e.preventDefault()
      if(!verifyConfirm()) e.preventDefault()
    })
    
  </script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/447282.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

大国护眼学习笔记01

大国护眼学习笔记01

第一天&#xff08;23.4.17&#xff09; 2—11节什么是近视&#xff1f; 1、“近视离焦”是指成像点落在视网膜的哪里&#xff1f; 前面 2、“远视离焦”是指成像点落在视网膜的哪里&#xff1f; 后面 3、眼轴变长时&#xff0c;成像点会往前移还是往后移&#xff1f; 前移 4、…
阅读更多...
毛灵栋 : 以兴趣为壤，育能力之实 | 提升之路系列（一）

毛灵栋 : 以兴趣为壤，育能力之实 | 提升之路系列（一）

导读 为了发挥清华大学多学科优势&#xff0c;搭建跨学科交叉融合平台&#xff0c;创新跨学科交叉培养模式&#xff0c;培养具有大数据思维和应用创新的“π”型人才&#xff0c;由清华大学研究生院、清华大学大数据研究中心及相关院系共同设计组织的“清华大学大数据能力提升项…
阅读更多...
【RP-RV1126】Ubuntu上配置Buildroot Qt 开发板远程开发调试环境（SSH）

【RP-RV1126】Ubuntu上配置Buildroot Qt 开发板远程开发调试环境（SSH）

文章目录 一、前提二、基础设置建设Buildroot编译Qt5配置SSHBuildroot文件系统添加账号密码开发板联网Buildroot文件系统构建时打开rsync功能 三、QtCreator配置3.1 配置Qt交叉编译套件(Kits)配置Kits里面的交叉编译器配置Kits里面的qmake工具最后配置Kits 3.2 配置远程部署设备…
阅读更多...
VLAN基础实验

VLAN基础实验

实验要求&#xff1a; 1、PC1和PC3所在接口为Access接口 PC2/4/5/6处于同一网段:其中PC2可以访问PC4/5/6 PC4可以访问PC5&#xff0c;但不能访问PC6 PC5不能访问PC6 2、PC1/3与PC2/4/5/6不再同一网段 3、所有PC通过DHCP获取IP地址&#xff0c;且PC1/3可以正常访问PC2/4/5/6 实…
阅读更多...
tkinter-TinUI-xml实战（9）crosschat客户端

tkinter-TinUI-xml实战（9）crosschat客户端

tkinter-TinUI-xml实战&#xff08;9&#xff09;crosschat客户端 引言声明文件结构核心代码服务端连接登录界面主页面主文件 结语 引言 CrossChat&#xff08;十字街&#xff09;是一个线上匿名群聊平台&#xff0c;类似Hack.Chat。 现在通过websocket简单地构建一个cc的客户…
阅读更多...
随机蛙跳算法 （SFLA）简单实现（Matlab代码实现）

随机蛙跳算法 （SFLA）简单实现（Matlab代码实现）

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 随着计算机科学与技术的迅速发展,人类生存空间的扩大以及认识与改造世界范围的拓宽,人们对科学技术提出了新的和更高的要求,其…
阅读更多...
android中线程池的选择

android中线程池的选择

线程池是把一个或多个线程通过统一的方式进行调度和重复使用的技术。 避免了因为线程过多而带来使用上的开销。 在安卓开发中&#xff0c;为了更好的性能体验&#xff0c;我们在选择线程池的时候&#xff0c;需要从具体需求来考虑&#xff0c;主要考虑以下几方面&#xff1a; …
阅读更多...
计算机类专业的普通校招生毕业如何“卷”一份好工作？

计算机类专业的普通校招生毕业如何“卷”一份好工作？

毕业差不多两年的校招生有感 一、为什么写这篇文章&#xff1f;二、我 → 一名普通的校招生前身三、我 → 一名普通的校招生养成四、校招如何拿到offer&#xff1f;五、总结 一、为什么写这篇文章&#xff1f; 一开始我写CSDN是为了记录自己学习技术的小日记&#xff0c;小总结…
阅读更多...
JavaScript运算符与表达式

JavaScript运算符与表达式

目录 一、 二、|| 三、??与?. ?? ?. 四、... 五、[] {} [] {} 一、 严格相等运算符&#xff0c;用作逻辑判断 1 1 // 返回 true 1 1 // 返回 true&#xff0c;会先将右侧的字符串转为数字&#xff0c;再做比较 1 1 // 返回 false&#xff0c;类型不等…
阅读更多...
每日学术速递4.22

每日学术速递4.22

CV - 计算机视觉 | ML - 机器学习 | RL - 强化学习 | NLP 自然语言处理 Subjects: cs.CV 1.Reference-based Image Composition with Sketch via Structure-aware Diffusion Model 标题&#xff1a;通过结构感知扩散模型与草图进行基于参考的图像合成 作者&#xff1a;Kang…
阅读更多...
PDF转PPT：省时省力的高效方式

PDF转PPT：省时省力的高效方式

PDF和PPT是日常工作和学习中常见的文件格式&#xff0c;但是它们的使用场景不同&#xff0c;很多时候需要将PDF文件转换为PPT文件才能更好地展示内容。本文将介绍如何使用PDF转PPT工具来实现快速转换&#xff0c;省时省力。 一、为什么需要将PDF文件转换为PPT文件 1.PPT文件更…
阅读更多...
English Learning - L2-15 英音地道语音语调 语调四步法 2023.04.17 周一

English Learning - L2-15 英音地道语音语调 语调四步法 2023.04.17 周一

English Learning - L2-15 英音地道语音语调 语调 2023.04.17 周一 语调概念和汉语拼音对比 语音语调四步法语调练习意群划分重音重中之重语调的选择 语调的含义 语调概念 广义&#xff1a;语音技巧&#xff0c;连读&#xff0c;失去爆破&#xff0c;音同化&#xff0c;还有平…
阅读更多...
如何利用AI技术实现高品质的文字转语音效果

如何利用AI技术实现高品质的文字转语音效果

人们越来越依赖语音技术进行交流和获取信息。语音技术可以提高工作效率和舒适度&#xff0c;减轻眼睛疲劳和阅读负担。在数字化时代&#xff0c;AI技术已经能够帮助我们实现高品质的文字转语音效果。下面我们将介绍一些方法&#xff0c;以帮助您更好地利用AI技术实现高品质的文…
阅读更多...
Vue.js过滤器filters

Vue.js过滤器filters

目录 一、局部过滤器 二、全局过滤器 三、过滤器串联 四、过滤器接收多个参数 Vue.js允许自定义过滤器&#xff0c;过滤器的作用可被用于一些常见的文本格式化&#xff08;也就是修饰文本&#xff0c;但是文本内容不会改变&#xff09; 过滤器可以用在两个地方&#xff1a…
阅读更多...
微信小程序开发详细步骤是什么？

微信小程序开发详细步骤是什么？

微信小程序开发只需要三步&#xff0c;分别是注册小程序&#xff0c;编辑设计小程序内容和一键发布小程序zlzwgz0127。 这篇回答不介绍写代码开发小程序&#xff0c;因为更多人是不懂代码的&#xff0c;所以推荐用第三方平台开发小程序zlzwgz0127。 在开始制作小程序之前&#…
阅读更多...
Linux基础—深入理解Linux文件系统

Linux基础—深入理解Linux文件系统

Linux基础—深入理解Linux文件系统与日志分析 一、inode 与 block详解1.inode 和 block 概述2.inode的内容3.inode的大小4.inode的特殊作用5.inode 的号码6.查看文件的inode 号码7.inode 耗尽故障处理 二、恢复误删除的文件1.案例&#xff1a;恢复EXT类型的文件2.案例&#xff…
阅读更多...
qt中信号和槽机制

qt中信号和槽机制

文章目录 信号与槽机制实现 点击按钮 关闭窗口的案例 自定义信号槽自定义信号自定义槽函数触发自定义的信号案例:请老师吃饭 断开信号当槽函数遇到重载的时候拓展 信号与槽机制 connect&#xff08;信号的发送者&#xff0c; 发送的具体信号&#xff0c;信号的接受者&#xff0…
阅读更多...
SpringAop详解汇总

SpringAop详解汇总

文章目录 近期想法什么是AOPSpringAOP与AspectjSpringAOP体系概述概念详解连接点- Jointpoint切入点- Pointcut通知- Advice切面- Aspect织入- Weaving 实现原理—动态代理JDK动态代理描述原理代码示例注意执行结果 优点缺点 CGLib动态代理描述原理代码示例注意执行结果 优点缺…
阅读更多...
【UITableViewCell单元格重用补充 Objective-C语言】

【UITableViewCell单元格重用补充 Objective-C语言】

一、咱们再把刚才说的UITableViewCell单元格重用的思路再给大家捋一下 1.咱们刚才说的这个单元格重用就是，当我们滚动的时候，这里给大家简单画一下， 2.就是滚动的时候，当把这个最上面的单元格滚完毕以后，把这个单元格放到缓存池里面， 3.给这个单元格要起一个ID，给它做一…
阅读更多...
阿里云部署Stable Diffusion

阿里云部署Stable Diffusion

系列文章目录 本地部署Stable Diffusion教程&#xff0c;亲测可以安装成功 Stable Diffusion界面参数及模型使用 谷歌Colab云端部署Stable Diffusion 进行绘图 文章目录 系列文章目录前言一、AIGC是什么&#xff1f;二、操作步骤1.资源准备-零元开通试用套餐2.创建应用3.输入…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023