新闻项目登录页面表单验证

原创已于 2022-03-26 22:46:48 修改 · 723 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#tomcat #eclipse

于 2022-03-26 22:45:11 首次发布

登录页面静态效果图及代码块

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

以下是实现效果代代码

1.验证用户名不能为空

	function $(id) {
		return document.getElementById(id);
	}

	function login_yz() {
		//验证 用户名不能为空 
		//获取用户名
		var uname = $("uname").value;
		if (uname.length == 0) {
			alert("用户名不能为空");
			return false;
		}

2.验证密码不能为空


		var upwd = $("upwd").value;
		if (upwd.length == 0) {
			alert("密码不能为空");
			return false;
		}

3.获取验证码及获取验证码并判断和电脑的验证码是否相等

如果输入的的验证码与电脑随机给出的不一样，文本框会清空，电脑也将会刷新验证码

点击验证码也可以变换验证码（注释：此代码写的验证区分大小写）

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;
	}
    
		var yzm = $("uyzm").value;
		if (yzm != yzmStr) {
			alert("验证码输入错误，请重新输入");
			//清空输入的验证码
			$("uyzm").value = "";
			//重新生成验证码
			yz();
			return false;
		}