【案例2-8】while do..while验证用户名和密码
一、案例描述
- 考核知识点
while、do…while循环语句
- 练习目标
- 掌握while语句。
- do…while循环语句。
- 需求分析
在网站上登录时会用到表单,让用户属于用户名和密码,输入正确才可以进入,本案例将采用while do..while两种循环方式来进行用户名和密码的验证。
- 案例分析
- 打开页面时,效果如图2-11所示。
- 输入用户名展示
- 输入密码效果展示
如果输入的信息正确,则弹出如图2-13所示提示。
- 提示登录成功
如果输入的信息不正确,则弹出如图2-14所示提示。
- 提示登录失败
- 具体实现步骤如下:
- 用户输入用户名。
- 用户输入密码。
- 输入的内容,如果符合语句中的条件则提示“登录成功”,不符合时提示“用户名或者密码有误”,让你一直输入用户名和密码,直到输入正确为止。
二、案例实现
1、while循环方式实现
根据上面的分析,可以通过简单的JavaScript代码来实现这一效果,具体代码如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>验证用户名和密码</title>
- </head>
- <body>
- <script>
- // 输入用户名和密码,如果正确,给出弹出框提示"登录成功",如果不对,一直输入:while
- /* 第一种方式 while*/
- var userName = prompt("请输入用户名");
- var passWord = prompt("请输入密码");
- while( userName!="admin" || passWord!="123456" ){
- alert("用户名或者密码有误");
- userName = prompt("请输入用户名");
- passWord = prompt("请输入密码");
- }
- alert("登录成功");
- </script>
- </body>
- </html>
2、do…while循环方式实现
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>验证用户名和密码</title>
- </head>
- <body>
- <script>
- // 输入用户名和密码,如果正确,给出弹出框提示"登录成功",如果不对,一直输入
- /* 第二种方式 do...while
- do {
- // alert("用户名或者密码有误");
- var userName = prompt("请输入用户名");
- var passWord = prompt("请输入密码");
- }while(userName!="admin"||passWord!="123456")
- alert("登录成功");*/
- </script>
- </body>
- </html>