【无标题】

最新推荐文章于 2023-01-05 16:11:36 发布

XiaoJiangSiger

最新推荐文章于 2023-01-05 16:11:36 发布

阅读量67

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/XiaoJiangSiger/article/details/123761952

版权

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户登录</title>
<link href="images/login.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
	var str = "qwertyupasdfghjkzxcvbnmQWERTYUPASDFGHJKLZXCVBNM23456789";
	function yz() {
		//随机出4个0-字符串长度之间的数字 做为下标
		yzmStr="";
		for(var i=1;i<=4;i++){
			yzmStr+=str.substr(Math.round(Math.random()*(str.length-1)),1);
		}
		//把验证码赋值到页面
		document.getElementById("syzm").innerHTML=yzmStr;
	}
	
	
	function $(id) {
		return document.getElementById(id);
	}
	
	function login_yz() {
		//验证 用户名 和 密码不能为空 
		//获取用户名
		var uname = $("uname").value;	
		if(uname.length==0){
			alert("用户名不能为空");
			return false;
		}
		//获取密码
		var upwd = $("upwd").value;
		if(upwd.length==0){
			alert("密码不能为空");
			return false;
		}
		
		//获取验证码:判断和电脑的验证码是否相等
		//PS：自己实现-输入的验证码不区分大小写-大小写转换
		var yzm = $("uyzm").value;
		var str1=yzm.toUpperCase();
		var str2=yzm.toUpperCase();
		if(str1!=str2){
			alert("验证码输入错误,请重新输入");
			$("uyzm").value="";
			yz();
			return false;//这是验证码输入不区分大小写
		}
		/*
		这是验证码输入区分大小写的
		var yzm = $("uyzm").value;
		if(yzm!=yzmStr){
			alert("验证码输入错误，请重新输入");
			//清空输入的验证码
			$("uyzm").value="";
			//重新生成验证码
			yz();
			return false;
		}   
		*/
	}


</script>
</head>
<body onload="yz()">

	<div id="login">

		<div id="top">
			<div id="top_left">
				<img src="images/login_03.gif" />
			</div>
			<div id="top_center"></div>
		</div>

		<div id="center">
			<div id="center_left"></div>
			<div id="center_middle">
			<form action="admin.jsp" onsubmit="return login_yz()">
				<div id="user">
					用 户 <input type="text" id="uname" name="textfield" />
				</div>
				<div id="password">
					密 码 <input type="password" id="upwd" name="textfield2" />
				</div>
				
				<div id="yzm">
					验证码 <input id="uyzm" style="width: 50px;" type="text" name="textfield3" />
					<span id="syzm" onclick="yz()"></span>
				</div>
				<div id="btn">
					<input type="submit" value="登录">
					<input type="reset" value="清空">
				</div>
			</form>
			</div>
			<div id="center_right"></div>
		</div>
		<div id="down">
			<div id="down_left">
				<div id="inf">
					<span class="inf_text">版本信息</span> <span class="copyright">管理信息系统
						2008 v2.0</span>
				</div>
			</div>
			<div id="down_center"></div>
		</div>

	</div>
</body>
</html>

加入了表单验证，使用touppercase方法解决验证码问题

XiaoJiangSiger

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【无标题】

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>用户登录</title><link href="images/login.css" rel="stylesheet" type="text/css" /><script type="text/javascript"> var str...
复制链接

扫一扫