实现综合案例的注册、登录和跳转到主页面

最新推荐文章于 2024-04-15 23:06:05 发布

原创最新推荐文章于 2024-04-15 23:06:05 发布 · 206 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

这个案例展示了如何实现一个综合性的网站注册、登录功能以及跳转到主页面的过程。网页包括顶部导航、头部、搜索框和注册表单等元素。用户在完成注册时需要输入用户名、手机号、验证码、密码并确认密码，同时需同意服务协议。页面还包含验证功能，如手机号、验证码、密码等的正则验证，并在输入不符合要求时提供错误提示。此外，注册完成后会跳转到主页面。

<!DOCTYPE html>

<head>

<title>小兔鲜案例</title>

</head>

<body>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

<i class="mobile sprites"></i> 手机版

</a >

</li>

</ul>

</div>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

</a >

</div>

<h3>新用户注册</h3>

</div>

</div>

<a class="code" href="javascript:;">发送验证码</a >

</div>

</div>

</div>

<i class="iconfont icon-queren"></i> 已阅读并同意

<i>《用户服务协议》</i>

</div>

</div>

</form>

</div>

<dl>

</dl>

<dl>

</dl>

<dl>

<dt>下载APP</dt>

< img src="./课堂-综合案例/uploads/qrcode.jpg">

</dd>

<span>扫描二维码</span>

<span>立马下载APP</span>

</dd>

</dl>

<dl>

400-0000-000

<small>周一至周日 8:00-18:00</small>

</dd>

</dl>

</div>

</div>

<p>

<a href="javascript:;">配送与验收</a >

</p >

</div>

// 需求①：发送验证码

// 用户点击之后，显示 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>