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

<!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>

综合案例:实现注册、登录和跳转到主页面的功能。相关推荐

实现综合案例的注册、登录和跳转到主页面的功能
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
JavaWeb25.3【综合案例：注册功能(含邮箱激活账号)】
register.html 1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta char ...
Winform中实现简单的登录成功后跳转到主页面的逻辑
场景 Winform中实现运行项目后首先启动登录窗体,验证成功之后,跳转到主页面. 注: 博客: BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot, ...
JavaWeb_10_mvc案例_注册登录
UserDao位于dao包 package cn.itcast.dao; import cn.itcast.domain.User; public interface UserDao {//操作1,添 ...
php用户登录后跳转到主页,phpmyadmin登录后跳到首页的问题
我的做法是配置好 PHP 之后,直接到 DOCUMENT_ROOT 下建立一个到 PMA 的软链接. [16:56] caiknife@caiknife-ThinkPad-T400:/usr/shar ...
《Spark SQL大数据实例开发》9.2 综合案例实战——电商网站搜索排名统计
<Spark SQL大数据实例开发>9.2 综合案例实战--电商网站搜索排名统计 9.2.1 案例概述本节演示一个网站搜索综合案例:以京东为例,用户登录京东网站,在搜索栏中输入搜 ...
Java实现注册登录系统——基于Java Swing实现
技术简介:Java Swing 介绍 Swing 是一个为Java设计的GUI工具包. Swing是JAVA基础类的一部分. Swing包括了图形用户界面(GUI)器件如:文本框,按钮,分隔窗格和表. ...
java swing登录系统_Java实现注册登录系统——基于Java Swing实现
技术简介:Java Swing 介绍 Swing 是一个为Java设计的GUI工具包. Swing是JAVA基础类的一部分. Swing包括了图形用户界面(GUI)器件如:文本框,按钮,分隔窗格和表. ...
知云文献翻译登录时不显示二维码，显示二维码后扫描登录不跳转解决方案
1.登录时不显示二维码--解决方案打开 Internet Explorer 点击"设置"中的"Internet 选项" 切换到"连接"选项 ...

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

综合案例:实现注册、登录和跳转到主页面的功能。相关推荐

最新文章

热门文章