简历登录界面

最新推荐文章于 2024-07-24 17:16:26 发布

jettzed

最新推荐文章于 2024-07-24 17:16:26 发布

阅读量278

点赞数

文章标签： html javascript

本文链接：https://blog.csdn.net/jettzed/article/details/52223884

版权

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>登录</title>
		<style>
			.ok {
				color:green;
				border:1px solid green;
			}
			.error {
				color:red;
				border:1px solid red;
			}
		</style>
		<script>
			//js中的方法默认都返回undefined
			//校验账号格式
			function check_acc() {
				//1.获取元素
				var input = 
					document.getElementById("acc");
				var span = 
					document.getElementById("acc_msg");
				//2.获取文本框的值
				var acc = input.value;
				//3.校验其格式
				var reg = /^\w{6,12}$/;
				if(reg.test(acc)) {
					//对了，增加正确的样式
					span.className = "ok";
					return true;
				} else {
					//错了，增加错误的样式
					span.className = "error";
					return false;
				}
			}
			//校验密码格式
			function check_pwd() {
				//1.获取元素
				var input = 
					document.getElementById("pwd");
				var span = 
					document.getElementById("pwd_msg");
				//2.获取密码框的值
				var pwd = input.value;
				//3.校验密码格式
				var reg = /^\w{8,20}$/;
				if(reg.test(pwd)) {
					//对了，加正确样式
					span.className = "ok";
					return true;
				} else {
					//错了，加错误样式
					span.className = "error";
					return false;
				}
			}
		</script>
	</head>
	<body>
		<form action="http://www.baidu.com"
			οnsubmit="return check_acc()+check_pwd()==2;">
			<p>
				账号：
				<input type="text" id="acc"
					οnblur="check_acc();"/>
				<span id="acc_msg">6-12位字母、数字、下划线的组合</span>
			</p>
			<p>
				密码：
				<input type="password" id="pwd"
					οnblur="check_pwd();"/>
				<span id="pwd_msg">8-20位字母、数字、下划线的组合</span>
			</p>
			<p>
				<input type="submit" value="登录"/>
			</p>
		</form>
	</body>
</html>

jettzed

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简历登录界面

登录 .ok { color:green; border:1px solid green; } .error { color:red; border:1px solid red; } //js中的方法默认都返回undefined //校验账号格式 function check_acc() { //1
复制链接

扫一扫