概要
提示：这里可以添加技术概要
发送验证码模块
②： 各个表单验证模块
③： 勾选已经阅读同意模块
④： 下一步验证全部模块
只要上面有一个input验证不通过就不同意提交
整体架构流程
再次密码验证
如果本次密码不等于上面输入的密码则返回错误信息
其余同上
我同意模块
添加类 .icon-queren2 则是默认选中样式 可以使用 toggle切换类
表单提交模块
使用 submit 提交事件
如果没有勾选同意协议，则提示 需要勾选
classList.contains() 看看有没有包含某个类，如果有则返回true，么有则返回false
如果上面input表单 只要有模块，返回的是 false 则 阻止提交
技术名词解释
提示：这里可以添加技术名词解释
例如：
required 属性不能为空
正则 /^[a-zA-Z0-9-_]{6,20}
代码展示：
<!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 © 小兔鲜儿</p>
</div>
</div>
</div>
</div>
<script>
!(function () {
// ①： 发送验证码模块
const code = document.querySelector(".code");
let falg = true;
code.addEventListener("click", function () {
if (falg) {
falg = false;
let i = 5;
code.innerHTML = `0${i}秒后重新刷新`;
let timeId = setInterval(function () {
i--;
code.innerHTML = `0${i}秒后重新刷新`;
if (i === 0) {
clearInterval(timeId);
code.innerHTML = `重新获取`;
falg = true;
}
}, 1000);
}
});
})();
// 需求②： 用户名验证（注意封装函数 verifyxxx） , 失去焦点触发这个函数
// 正则 /^[a-zA-Z0-9-_]{6,10}$/
// 如果不符合要求，则出现提示信息 并 return false 中断程序
// 否则 则返回return true
const username = document.querySelector("[name=username]");
username.addEventListener("change", verifyusername);
function verifyusername() {
const reg = /^[a-zA-Z0-9-_]{6,10}$/;
if (!reg.test(username.value)) {
username.nextElementSibling.innerHTML = `输入6-10数字`;
return false;
}
// username.nextElementSibling.innerHTML = `输入正确`;
// username.nextElem entSibling.style.color = `pink`;
return true;
}
//2.2验证手机号
const phonename = document.querySelector("[name=phone]");
phonename.addEventListener("change", verifyphone);
function verifyphone() {
const regOne =
/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
const span = phonename.nextElementSibling;
if (!regOne.test(phonename.value)) {
span.innerHTML = `请输入正确的11位手机号`;
return false;
}
span.innerHTML = "";
return true;
}
//2.3验证码
const codename = document.querySelector("[name=code]");
codename.addEventListener("change", verifycode);
function verifycode() {
const regOne = /^\d{6}$/;
const span = codename.nextElementSibling;
if (!regOne.test(codename.value)) {
span.innerHTML = `验证码格式不正确`;
const random = parseInt(Math.random() * 10000 + 1)
.toString()
.padStart(6, "0");
if (codename.value !== random) {
span.innerHTML = `验证码输入不正确！`;
}
return false;
}
span.innerHTML = "";
return true;
}
//2.4验证密码
const passwordname = document.querySelector("[name=password]");
passwordname.addEventListener("change", verifypsd);
function verifypsd() {
const regOne = /^[a-zA-Z0-9-_]{6,20}$/;
const span = passwordname.nextElementSibling;
if (!regOne.test(passwordname.value)) {
span.innerHTML = `请正确输入6到20位数字`;
return false;
}
span.innerHTML = "";
return true;
}
const confirm = document.querySelector("[name=confirm]");
confirm.addEventListener("change", verifypsdconfirm);
function verifypsdconfirm() {
const regOne = /^[a-zA-Z0-9-_]{6,20}$/;
const span = confirm.nextElementSibling;
if (confirm.value !== passwordname.value) {
span.innerHTML = `两次密码不正确！`;
return false;
}
span.innerHTML = "";
return true;
}
// ②： 各个表单验证模块
// ③： 勾选已经阅读同意模块
const icon = document.querySelector(".icon-queren");
icon.addEventListener("click", function () {
icon.classList.toggle("icon-queren2");
});
// ④： 下一步验证全部模块
const form = document.querySelector("form");
form.addEventListener("submit", function (e) {
//判断是否有这这个类
if (!icon.classList.contains("icon-queren-2")) {
alert("请勾选复选框!");
e.preventDefault();
if (!verifytext()) e.preventDefault(); //判断你输入的内容是否合法，如果不合法取反为true 执行if里面的代码 如果是合法取反为fashle 则不执行里面的代码
if (!verifyphone()) e.preventDefault(); //判断你输入的内容是否合法，如果不合法取反为true 执行if里面的代码 如果是合法取反为fashle 则不执行里面的代码
if (!verifypsd()) e.preventDefault(); //判断你输入的内容是否合法，如果不合法取反为true 执行if里面的代码 如果是合法取反为fashle 则不执行里面的代码
if (!verifytext()) e.preventDefault(); //判断你输入的内容是否合法，如果不合法取反为true 执行if里面的代码 如果是合法取反为fashle 则不执行里面的代码
if (!verifyconfirmname()) e.preventDefault(); //判断
}
});
// 只要上面有一个input验证不通过就不同意提交
</script>
</body>
</html>
小结
先阻止默认行为
Ø 如果没有勾选同意，则提示要勾选
Ø required 属性不能为空
Ø 假设登录成功
把用户名记录到本地存储中
同时跳转到首页 location.href
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
