JavaScript数学对象—【小案例】表单随机验证码

最新推荐文章于 2022-03-06 04:31:55 发布

原创最新推荐文章于 2022-03-06 04:31:55 发布 · 504 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了两个JavaScript实现的登录验证案例，涉及随机生成四位纯数字验证码和混合数字字母的验证码。用户需输入用户名、密码及正确的验证码，当用户名和密码均为'admin'时，点击登录按钮将跳转页面。案例详细阐述了验证码生成、用户输入验证以及页面跳转的实现过程。

案例一：

要求：
     用户名，密码，验证码 (随机4位纯数字)
     以上所有内容都正确(true) ====》点击登录按钮，跳转页面
步骤：
     1) 验证码页面中的随机随机数（innerHIML 往元素中写入html代码）
     2) 用单击事件，获取按钮，点击登录按钮，跳转到login. html页面中
     3) 获取用户名、密码、验证码的value值
     4) 以上用户名对了,才去验证密码，用户名和密码都对了，才去验证随机数
     5) 用户名和密码必须都是admin才能登录

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <form action="">
			用户名: <input type="text" id="userName"><br>
			密 码: <input type="password" id="userPwd"><br>
			验证码: <input type="text" id="yzm">
			<span id="spans">123</span><br>
			<input type="button" value="登录" id="btn">
	</form>
	<script>
    var spans=document.getElementById("spans");//1)
    btn=document.getElementById("btn");//2)用单击事件，获取按钮，点击跳转
    userName=document.getElementById("userName"),
    userPwd=document.getElementById("userPwd"),
    yzm=document.getElementById("yzm");//3)获取value值
    spans.innerHTML=(Math.floor(Math.random()*9000)+1000);
    //1)验证码随机   四位数验证码随机范围1000-9999
    btn.onclick=function(){
	if(userName.value=="admin"){ //4)admin登录
		if(userPwd.value=="admin"){
			if(yzm.value==spans.innerHTML){
				location.href="login.html";
			}else{
			alert("密码错误");
			}
		}else{
			alert("用户名错误");
		}
	}
}
    
    </script>
	</body>
</html>

这里用户名和密码必须填admin，否则显示“用户名错误提示”
在这里插入图片描述
当用户名和密码都输入admin时，即将跳转页面

页面跳转成功：

案例二：

如果是字母和数字（以及汉字）混合的验证码获取的情况

要求：
用户名，密码，验证码 (4位数随机混合:数字+字母)
以上所有内容都完成了(true) ====》点击登录按钮，跳转页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <form action="">
			用户名: <input type="text" id="userName"><br>
			密 码: <input type="password" id="userPwd"><br>
			验证码: <input type="text" id="yzm">
			<span id="spans">123</span><br>
			<input type="button" value="登录" id="btn">
	</form>
	<script>
	var spans=document.getElementById("spans");
	btn=document.getElementById("btn");
	userName=document.getElementById("userName"),
	userPwd=document.getElementById("userPwd"),
	yzm=document.getElementById("yzm");
    var str="deciu9wjqoiedhr2br4idkawope8r743tnt5490";
    var str1="";
    for(var i=0;i<4;i++){
	str1+=str[Math.floor(Math.random()*str.length)];
    }//i<4 四位数; str1+=str[2]==>str1=str1+c==>c=c+c
    spans.innerHTML=str1;
    btn.onclick=function(){
	if(userName.value=="admin"){
		if(userPwd.value=="admin"){
			if(yzm.value==spans.innerHTML){
				location.href="login.html";
			}else{
			alert("密码错误");
			}
		}else{
			alert("用户名错误");
		}
	}
}
   </script>
   </body>
</html>