使用JavaScript实现页面注册表单文本框验证方法

文章目录

概要

整体架构流程

技术名词解释

代码展示：

小结

需要素材即使联系我我会陆续更新的！！

概要

提示：这里可以添加技术概要

发送验证码模块
②：各个表单验证模块
③：勾选已经阅读同意模块
④：下一步验证全部模块
只要上面有一个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" /><linkrel="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"><inputtype="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><inputname="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><inputname="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>!(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("[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>