首页
<script>// 1.获取第一个小liconst li1 = document.querySelector('.xtx_navs li:first-child')const li2 = li1.nextElementSibling// 2.做过渲染函数来封装，因为后续更新数据需要重复渲染function render() {// 2.1读取本地存储的用户名const uname = localStorage.getItem('xtx-username')if (uname) {li1.innerHTML = `<a href="javascript:;"><i class="iconfont icon-user">${uname}</i></a>`li2.innerHTML = `<a href="javascript:;">退出登录</a>`} else {li1.innerHTML = '<a href="/login.html">请先登录</a>'li2.innerHTML = '<a href="/register.html">免费注册</a>'}}render()// 2.点击退出登录模块li2.addEventListener('click', function () {// 删除本地存储数据localStorage.removeItem('xtx-username')// 重新渲染render()})</script>
登录页
<script>//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)// 重新获取code.innerHTML = `重新获取`// 到时间了 开启flagflag = true}}, 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,9}$/if (!reg.test(username.value)) {span.innerHTML = '输入不合法，请输入6~16位'return false}//2.5 合法的，就清空spanspan.innerHTML = ''return true}// 3.验证的是手机号// 2.1获取用户名表单const phone = document.querySelector('[name=phone]')// 2.2是用change事件 值发生变化时生效phone.addEventListener('change', verifyphone)// 2.3封装verifyName函数function verifyphone() {const span = phone.nextElementSibling// 2.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.innerHTML = '输入不合法，请输入正确的11位手机号'return false}//2.5 合法的，就清空spanspan.innerHTML = ''return true}// 4.验证的是验证码// 2.1获取用户名表单const codeIput = document.querySelector('[name=code]')// 2.2是用change事件 值发生变化时生效codeIput.addEventListener('change', verifycode)// 2.3封装verifyName函数function verifycode() {const span = codeIput.nextElementSibling// 2.4定规则 用户名const reg = /^\d{6}$/if (!reg.test(codeIput.value)) {span.innerHTML = '输入不合法，请输入正确的6位数字'return false}//2.5 合法的，就清空spanspan.innerHTML = ''return true}// 5.验证的是密码// 2.1获取用户名表单const password = document.querySelector('[name=password]')// 2.2是用change事件 值发生变化时生效password.addEventListener('change', verifyPwd)// 2.3封装verifyName函数function verifyPwd() {const span = password.nextElementSibling// 2.4定规则 用户名const reg = /^[a-zA-Z0-9_]{6,20}$/if (!reg.test(password.value)) {span.innerHTML = '输入不合法，请输入正确的6位数字'return false}//2.5 合法的，就清空spanspan.innerHTML = ''return true}// 5.密码的再次验证// 2.1获取用户名表单const confirm = document.querySelector('[name=confirm]')// 2.2是用change事件 值发生变化时生效confirm.addEventListener('change', verifyConfirm)// 2.3封装verifyName函数function verifyConfirm() {const span = confirm.nextElementSibling// 当前表单的值不等于密码框里的值 就是错误的if (confirm.value !== password.value) {span.innerHTML = '两次密码输入不一致'return false}//2.5 合法的，就清空spanspan.innerHTML = ''return true}// 7.我同意模块const queren = document.querySelector('.icon-queren')queren.addEventListener('click', function () {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()}// 9.判断环节// 依次判断 上面的每个框框是否都通过 只要有一个不通过就阻止提交if (!verifyName()) e.preventDefault()if (!verifyConfirm()) e.preventDefault()if (!verifycode()) e.preventDefault()if (!verifyPwd()) e.preventDefault()if (!verifyphone()) e.preventDefault()})</script>
