实例：利用html表单和js的数学对象及函数做一个有验证码的简单登录表单

最新推荐文章于 2021-11-29 18:33:10 发布

你的阿wen

最新推荐文章于 2021-11-29 18:33:10 发布

阅读量962

点赞数 17

分类专栏： js 实操文章标签： js javascript

本文链接：https://blog.csdn.net/qq_45948983/article/details/106288867

版权

js 实操专栏收录该内容

7 篇文章 2 订阅

订阅专栏

**
刚刚不是学了js中的数学对象，也学会了random产生随机数，那么下面就利用刚刚学的知识做一个简单的登录额，登录的表单吧，嗯账号为1234，密码为1234，只有输入正确的账号和密码以及正确的验证码才会登陆成功
**

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	 //第一步这里是htmlform标签做的一个表单
		<form action="">
		用户名：<input type="text" id="un" />
		<br />
		密码：<input type="password" id="up" />
		<br />
		验证码：<input type="text" id="yzm" /> <span id="spans"></span>
		<br />
		<input type="button" value="登录" id="btn">
		</form>
		
	<script>
	//用document.getEIementById来获取这个控件对象
		var spans=document.getElementById("spans");
		var username=document.getElementById("un");
		var password=document.getElementById("up");
		var yzm=document.getElementById("yzm");
		var btn=document.getElementById("btn");
		
		//用的数组然后随机截取拼接成四个随机数字
		var a="0123456789"
		var b=""
		for(var i=0;i<4;i++){
			b+=a[Math.floor(Math.random()*10)]
		}
		spans.innerHTML= b;
	
	//这里是一个点击事件，然后执行一个函数，利用if来执行筛选条件	
		btn.onclick = function(){
			if(username.value=="1234"){
				if(password.value=="1234"){
					if(yzm.value==spans.innerHTML){
						document.write("登陆成功");
					}else{
						document.write("验证码错误")
					}
				}else{
					document.write("密码错误");
				}
			}else{
				document.write("账号错误");
			}
			
			
		}
		
		
	</script>
	</body>
</html>

在这里插入图片描述
这是执行结果，然后只有当你输入正确的账号密码以及验证码之后才会出现登陆成功

**

你的阿wen

关注

17
点赞
踩
5

收藏

觉得还不错? 一键收藏
16
评论
实例：利用html表单和js的数学对象及函数做一个有验证码的简单登录表单

**刚刚不是学了js中的数学对象，也学会了random产生随机数，那么下面就利用刚刚学的知识做一个简单的登录额，登录的表单吧，嗯账号为1234，密码为1234，只有输入正确的账号和密码以及正确的验证码才会登陆成功**<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> //第一
复制链接

扫一扫