golang和php 做网站,免费看舆情网站,哈尔滨工程招投标信息网,Wordpress的主机地址改变文章目录 文章目录 概要 整体架构流程 技术名词解释 代码展示#xff1a; 小结 需要素材即使联系我我会陆续更新的#xff01;#xff01; 概要
提示#xff1a;这里可以添加技术概要
发送验证码模块 ②#xff1a; 各个表单验证模块 ③#xff1a; 勾选已经阅读同意模… 文章目录 文章目录 概要 整体架构流程 技术名词解释 代码展示 小结 需要素材即使联系我我会陆续更新的 概要
提示这里可以添加技术概要
发送验证码模块 ② 各个表单验证模块 ③ 勾选已经阅读同意模块 ④ 下一步验证全部模块 只要上面有一个input验证不通过就不同意提交
整体架构流程
再次密码验证 如果本次密码不等于上面输入的密码则返回错误信息 其余同上 我同意模块 添加类 .icon-queren2 则是默认选中样式 可以使用 toggle切换类 表单提交模块 使用 submit 提交事件 如果没有勾选同意协议则提示 需要勾选classList.contains() 看看有没有包含某个类如果有则返回true么有则返回false 如果上面input表单 只要有模块返回的是 false 则 阻止提交
技术名词解释
提示这里可以添加技术名词解释
例如
required 属性不能为空
正则 /^[a-zA-Z0-9-_]{6,20}
代码展示
!DOCTYPE html
html langenheadmeta charsetUTF-8 /title小兔鲜儿 - 新鲜 惠民 快捷!/titlemeta http-equivX-UA-Compatible contentIEedge /meta namerenderer contentwebkit /link relshortcut icon href./favicon.ico /link relstylesheet href./css/common.css /link relstylesheet href./css/register.css /linkrelstylesheethrefhttps://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css //headbody!-- 项部导航 --div classxtx_topnavdiv classwrapper!-- 顶部导航 --ul classxtx_navslia href./login.html请先登录/a/lilia href./register.html免费注册/a/lilia href./center-order.html我的订单/a/lilia href./center.html会员中心/a/lilia hrefjavascript:;帮助中心/a/lilia hrefjavascript:;在线客服/a/lilia hrefjavascript:;i classmobile sprites/i手机版/a/li/ul/div/div!-- 头部 --div classxtx_headerdiv classwrapper!-- 网站Logo --h1 classxtx_logoa href/小兔鲜儿/a/h1!-- 主导航 --div classxtx_navsul classclearfixlia href./index.html首页/a/lilia href./category01.html生鲜/a/lilia href./category01.html美食/a/lilia href./category01.html餐厨/a/lilia href./category01.html电器/a/lilia href./category01.html居家/a/lilia href./category01.html洗护/a/lilia href./category01.html孕婴/a/lilia href./category01.html服装/a/li/ul/div!-- 站内搜索 --div classxtx_search clearfix!-- 购物车 --a href./cart-none.html classxtx_search_cart spritesi2/i/a!-- 搜索框 --div classxtx_search_wrapperinputtypetextplaceholder搜一搜onclicklocation.href./search.html //div/div/div/divdiv classxtx-wrapperdiv classcontainer!-- 卡片 --div classxtx-cardh3新用户注册/h3form classxtx-formdiv data-propusername classxtx-form-itemspan classiconfont icon-zhanghao/spaninput nameusername typetext placeholder设置用户名称 /span classmsg/span/divdiv data-propphone classxtx-form-itemspan classiconfont icon-shouji/spaninput namephone typetext placeholder输入手机号码 /span classmsg/span/divdiv data-propcode classxtx-form-itemspan classiconfont icon-zhibiaozhushibiaozhu/spaninput namecode typetext placeholder短信验证码 /span classmsg/spana classcode hrefjavascript:;发送验证码/a/divdiv data-proppassword classxtx-form-itemspan classiconfont icon-suo/spaninputnamepasswordtypepasswordplaceholder设置6至20位字母、数字和符号组合 /span classmsg/span/divdiv data-propconfirm classxtx-form-itemspan classiconfont icon-suo/spaninputnameconfirmtypepasswordplaceholder请再次输入上面密码 /span classmsg/span/divdiv classxtx-form-item pl50i classiconfont icon-queren/i已阅读并同意i《用户服务协议》/i/divdiv classxtx-form-itembutton classsubmit下一步/button!-- a classsubmit hrefjavascript:;下一步/a --/div/form/div/div/div!-- 公共底部 --div classxtx_footer clearfixdiv classwrapper!-- 联系我们 --div classcontact clearfixdldt客户服务/dtdd classchat在线客服/dddd classfeedback问题反馈/dd/dldldt关注我们/dtdd classweixin公众号/dddd classweibo微博/dd/dldldt下载APP/dtdd classqrcodeimg src./uploads/qrcode.jpg //dddd classdownloadspan扫描二维码/spanspan立马下载APP/spana hrefjavascript:;下载页面/a/dd/dldldt服务热线/dtdd classhotline400-0000-000small周一至周日 8:00-18:00/small/dd/dl/div/div!-- 其它 --div classextradiv classwrapper!-- 口号 --div classslogana hrefjavascript:; classprice价格亲民/aa hrefjavascript:; classexpress物流快捷/aa hrefjavascript:; classquality品质新鲜/a/div!-- 版权信息 --div classcopyrightpa hrefjavascript:;关于我们/aa hrefjavascript:;帮助中心/aa hrefjavascript:;售后服务/aa hrefjavascript:;配送与验收/aa hrefjavascript:;商务合作/aa hrefjavascript:;搜索推荐/aa hrefjavascript:;友情链接/a/ppCopyRight copy; 小兔鲜儿/p/div/div/div/divscript!(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 trueconst username document.querySelector([nameusername]);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([namephone]);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([namecode]);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([namepassword]);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([nameconfirm]);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 需要素材即使联系我我会陆续更新的
