跳转到主页面的功能。"/>
综合案例:实现注册、登录和跳转到主页面的功能。
<!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=".css">
</head>
<body>
<!-- 项部导航 -->
<div class="xtx_topnav">
<div class="wrapper">
<!-- 顶部导航 -->
<ul class="xtx_navs">
<li>
<a href=" ">请先登录</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="搜一搜" οnclick="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 © 小兔鲜儿</p >
</div>
</div>
</div>
</div>
<script>
// 需求①： 发送验证码
// 用户点击之后，显示 05秒后重新获取
// 时间到了，自动改为 重新获取
let code = document.querySelector('.code')
code.addEventListener('click', function () {
this.innerHTML = `05秒后重新获取`
let mark = 5
let time = setInterval(function () {
mark--
code.innerHTML = `0${mark}秒后重新获取`
if (mark === 0) {
clearInterval(time)
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个字符'
//return 退出函数
return false
}
//如果符合 不给出提示
span.innerHTML = ''
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 = '请输入合法手机号'
return false
}
//手机号合法
span.innerHTML = ''
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位数字验证码'
return false
}
//验证码合法
span.innerHTML = ' '
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 = '请输入合法密码'
return false
}
//密码合法
span.innerHTML = ''
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 = '两次密码不一致'
return false
}
span.innerHTML = ''
return true
}
// 需求七：我同意模块
// 切换类 .icon-queren2 则是默认选中样式
let icon=document.querySelector('.icon-queren')
icon.addEventListener('click',function(){
//classList.toggle()切换
this.classList.toggle('icon-queren2')
})
// 需求八：提交按钮模块
// 使用 submit 提交事件
// 如果上面的每个模块，返回的是 false 则 阻止提交
// 如果没有勾选同意协议，则提示 需要勾选
// 在提交之前先验证
let form=document.querySelector('form')
form.addEventListener('submit',function(e){
if(!verifyUsername()){
//返回值是false，需要阻止提交
//事假对象的阻止默认行为：e.preventDefault()
e.preventDefault()
}
if(!verifyConfirm()){
//同上
e.preventDefault()
}
if(!verifyInputCode()){
e.preventDefault()
}
if(!verifyPhone()){
e.preventDefault()
}
if(!verifypassword()){
e.preventDefault()
}
// 如果没有勾选同意协议，则提示 需要勾选
//classList.contains 是否包含，如果有则返回true，没有则返回false
if(!icon.classList.contains('icon-queren2')){
alert('请勾选同意框')
e.preventDefault()
}
})
</script>
</body>
</html>
更多推荐
综合案例:实现注册、登录和跳转到主页面的功能。
发布评论