码迷,mamicode.com
首页 > Web开发 > 详细

网页登录界面

时间:2017-05-17 10:16:23      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:logs   abs   ack   界面   pass   span   doc   script   title   

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户登录</title>
		<style type="text/css">
			#div0{
				width: 600px;
				height: 250px; 
				position: absolute;
			}
			#div1{
				width: 320px;
				height: 250px;
				position: absolute;
				left: 600px;				
			}
			/*判断是否输入*/
			#div2{
				width: 300px;
				height: 30px;
				position: absolute;
				left: 920px;
				top:70px;	
			}
		</style>
		<script type="text/javascript">
		    /*判断用户名*/
			function judge(){
				var div2 = document.getElementById("div2");
				
				div2.style.fontSize="15px";
				var userName = document.getElementById("userName").value;
				var rule = /^[a-zA-Z]{3}/;  /*前三个字符为字母*/
				if(rule.test(userName)){
					div2.style.color="green";
					div2.innerHTML="格式正确";
				}else{
					div2.style.color="red";
					div2.innerHTML="前三个字符必须为字母";
				}
			}
			function subm(name){
				var rule = /^[a-zA-Z]{3}/;
				if(rule.test(name.value)){
					return true;
				}else{
					return false;
				}
			}
		</script>
</head>
<body>
	<div id="all">
		<div id="div0">
			
		</div>
		<div id="div1">
			<form action="http://www.baidu.com" method="get" onsubmit="return subm(this.userName)">
			<table align="center" width="300px">
				<tr align="center">
					<td colspan="2">
						<span style="font-size: 20px;">论坛用户帐号登录</span><hr />
					</td>
				</tr>
				<tr>
					<td colspan="2"></td>
				</tr>
				<tr>
					<td>
						<span style="font-size: 18px;">用户名:</span>
					</td>
					<td>
						<input type="text" name="userName"  id="userName" onblur="judge()" style="height: 30px;width: 220px;font-size: 20px;"/>
					</td>
				</tr>
				<tr>
					<td colspan="2"></td>
				</tr>
				<tr>
					<td>
						<span style="font-size: 18px;">密 码:</span>
					</td>
					<td>
						<input type="password" name="password" style="height: 30px;width: 220px;font-size: 20px;"/>
					</td>
				</tr>
				<tr>
					<td colspan="2"></td>
				</tr>
				<tr align="right">
					<td colspan="2">
						<a href="toRegister.do?opt=toRegister" id="a_1">立即注册</a>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="submit" value="登 录" style="background-color: #2894FF;color: white;width: 300px;height: 50px;font-size: 20px;"/>
					</td>
				</tr>
			</table>	
		</form>
		</div>
		<div id="div2">
			
		</div>
	</div>
</body>
</html>

  

网页登录界面

标签:logs   abs   ack   界面   pass   span   doc   script   title   

原文地址:http://www.cnblogs.com/syj1993/p/6865673.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!