页面注册案例

文章列表

页面注册案例

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

分析业务模块：

发送验证码模块
各个表单验证模块
勾选已经阅读同意模块
下一步验证全部模块：只要上面有一个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=falselet i=5// 点击完毕后立马触发code.innerHTML=`0${i}秒之后重新获取`// 开启定时器let timerId=setInterval(function(){i--code.innerHTML=`0${i}秒之后重新获取`if(i===0){// 清除定时器clearInterval(timerId)// 到点重新开启flagflag=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 合法的  就清空spanspan.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 合法的  就清空spanspan.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 合法的  就清空spanspan.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 合法的  就清空spanspan.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 合法的  就清空spanspan.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>

页面注册案例

公告

标签

页面注册案例

相关问题

公告

标签