3JavaScript基础及数据验证main

最新推荐文章于 2024-09-30 18:55:14 发布
deersum
最新推荐文章于 2024-09-30 18:55:14 发布
阅读量54
点赞数
文章标签： javascript 前端开发语言
本文链接：https://blog.csdn.net/deersum/article/details/132667268
版权
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title></title>
		<script type="text/javascript">
        function setRootFontSize(){
        var rootHtml = document.documentElement;
        var rem = rootHtml.clientWidth / (1080 / 100);   //1080为设计图px宽度
        rootHtml.style.fontSize = rem + "px";
        }
        setRootFontSize();   //网页首次载入时执行一 次
        window.addEventListener("resize", setRootFontSize, false);   //网页大小改变时执行
        window.addEventListener("orientationchange", setRootFontSize, false);   //横屏切换时执行
        
        
        function init(){
        	document.getElementById("errorArea").style.display="none";
        }
        
        function checkReg(){
        	var errorArea = document.getElementById("errorArea");
        	if(document.getElementById("username").value=="")
        	{
        		errorArea.style.display = "block";
        		errorArea.innerText = "*用户名不能为空";
        	}
        	else if(document.getElementById("number").value=="")
        	{
        		errorArea.style.display = "block";
        		errorArea.innerText = "*手机号码不能为空";
        	}
        	else if(document.getElementById("password").value=="")
        	{
        		errorArea.style.display = "block";
        		errorArea.innerText = "*密码不能为空";
        	}
        	else if(document.getElementById("password_again").value=="")
        	{
        		errorArea.style.display = "block";
        		errorArea.innerText = "*请输入密码";
        	}
        	else{
        		window.location.href="news.html";
        	}
        }
        
        </script>
        
        <style>
        	body{
        		margin: 0;
        	}
        	#header{
        		background-color: #e66c05;
        		height: 1.32rem;
        	}
        	.header_left{
        		float: left;
        		background-image: url("sub_back.png");
        		width: 1.15rem;
        		height: 1.32rem;
        		background-repeat: no-repeat;
        		background-position:0.46rem 0.37rem ;
        		background-size: 0.55rem 0.55rem;
        		
        		
        		
        	}
        	.header_right{
        		float: right;
        		width: 1.15rem;
        		height: 1.32rem;
        		background-image:url("sub_more.png");
        		background-position: 0.46rem 0.37rem;
        		background-size: 0.55rem 0.55rem;
        		background-repeat: no-repeat;
        	}
        	.header_center{
        		text-align: center;
        		font-size:0.57rem ;
        		line-height: 0.57rem;
        		padding: 0.35rem 0rem 0.37rem 0rem;
        		margin: 0rem 1.15rem 0rem 1.15rem;
        		color: #ffffff;
        		
        	}
        	.header_left img{
        		width: 0.58rem;
        		height: 0.55rem;
        	}
        	.main_left,.number_left,.password_left{
        		float: left;
        		width: 2.1rem;
        		height: 1.1rem;
        		font-size: 0.42rem;
        		line-height: 0.42rem;
        		padding: 0.62rem 0rem 0rem  0.49rem;
        		color: #606060;
        	}
        	.main_center,.number_center,.password_center{
        		
        		height: 1.21rem;
        		padding: 0.62rem 0rem 0rem 0rem;
        		line-height: 0.42rem;
        		font-size:0.42rem ;
        		
        	}
        	
        	input{
        		width: 7.62rem;
        		height: 0.64rem;
        		border-top:none ;
        		border-left: none;
        		border-right: none;
        		border-bottom-color: #a1a1a1;
        		padding-left: 0.14rem;
        		padding-bottom:0.01rem ;
        		font-size:0.42rem ;
        		
        		
        	}
        	
        	
        	::-webkit-input-placeholder{
	            color: #a5a5a5;
	            font-size: 0.42rem;
            }
            :-moz-placeholder{
	            color: #a5a5a5;
	            font-size:0.42rem ;
	            line-height: 0.42rem;
            }
            ::-moz-placeholder{
	            color: #a5a5a5;
	            font-size: 0.42rem;
	            line-height: 0.42rem;
            }
            :-ms-input-placeholder{
	            color: #a5a5a5;
	            font-size: 0.42rem;
	            line-height: 0.42rem;
            }
            #number{
        		width: 3.84rem;
        	}
        	.number_left,.password_left,.password_center{
        		padding-top: 0rem;
        	}
        	.number_center{
        		float: center;
        		padding-top:0rem ;
        	}
            .number_right{
            	float:right;
            	padding-right:2.18rem ;
            	padding-top:0rem ;
            	word-spacing: 0.16rem;
            	color: #e76b09;
            	font-size:0.34rem ;
            	line-height: 0.34rem;
            }
            .register_center{
            	text-align: center;
            	width: 10rem;
            	background-color:#e66c05 ;
            	margin-left:0.39rem ;
            	margin-top: 0.6rem;
            	font-size: 0.45rem;
            	color: #FFFFFF;
            	padding-top:0.33rem ;
            	padding-bottom: 0.30rem;
            }
            #register{
            	background-color: #E66C05;
            	border: none;
            	width: 100%;
            }
            .other_left{
            	float: left;
            	font-size: 0.26rem;
            	padding-top:0.35rem ;
            	padding-left: 0.5rem;
            }
            .other_right{
            	float: right;
            	font-size: 0.26rem;
            	padding-right: 0.5rem;
            	padding-top:0.35rem ;
            }
            #ender{
            	position: fixed;
            	bottom: 0;
            	line-height: 1.44rem;
            	background-color: #e66c05;
            	width: 100%;
            	height: 1.46rem;
            }
            .photograph_left{
            	float: left;
            	height: 1.25rem;
            	width: 1.18rem;
            	background-color:#FFFFFF ;
            	margin-left:0.26rem ;
            	
            	
            	
            }
            #ender #pl{
            	
            	float: left;
            	height: 0.56rem;
            	width: 0.61rem;
            	padding: 0.18rem 0.27rem 0.52rem 0.27rem;
            	
            }
              
            .photograph_left .inside{
            	float: left;
            	width: 0.6rem;
            	height: 0.24rem;
            	line-height: 0.24rem;
            	font-size: 0.28rem;
            	color: #E66C05;
            	margin: -0.4rem -0.14rem -0.32rem 0.3rem;
            	
            	
            	}
            	
            
            
            .photograph_right{
            	background-color: #E66C05;
            	float: right;
            	height: 1.25rem;
            	width: 1.18rem;
            	margin-right:0.26rem
            
            }
            .photograph_right img{
            	float: right;
            	height: 0.56rem;
            	width: 0.61rem;
            	padding: 0.18rem 0.27rem 0.52rem 0.27rem;
            }
            .photograph_right .inside{
            	float: right;
            	width: 0.6rem;
            	height: 0.24rem;
            	line-height: 0.24rem;
            	font-size: 0.28rem;
            	color: #FFFFFF;
            	margin: -0.4rem 0.25rem -0.32rem -0.25rem;
            	
            	
            	}
            	
            	#errorArea{
            		
            	    margin-left:1.8rem ;
            	    padding-left: 1.rem;
            		padding-top:0.2rem ;
            		font-size:0.5rem ;
            		color: #E66C05;
            	}
           
           
            


        </style>
	</head>
	<body onload="init()">
		<div id="header">
			<div class="header_left"></div>
		    <div class="header_right"></div>
		    <div class="header_center">用户注册</div>
		</div>
		<div id = "mainArea">
			<div class="main_left">用户名</div>
			<div class="main_center"><input id = "username"type="text" placeholder="请输入用户名"></div>
			<div class="number_left">手机号</div>
			<div class="number_right">发送验证码</div>
			<div class="number_center"><input id="number" type="text" placeholder="请输入手机号"></div>
			<div class="password_left">密码</div>
			<div class="password_center"><input id="password" type="password" ></div>
			<div class="password_left">确认密码</div>
			<div class="password_center"><input id="password_again" type="password" ></div>
			<div id="errorArea">*用户名不能为空</div>
		    <div class="register_center"><input id = "register" type="button" align="center" value="注册" onclick="checkReg()"></div>
		    <div class="other_left">已有帐号</div>
		    <div class="other_right">更换手机号</div>
		</div>
		<div id="ender">
			<div class="photograph_left"><img id="pl"src="main_home2.png"><div class="inside">首页</div></div></li>
		    
				
			
			<div class="photograph_right"><img id="pr"src="main_config1.png"><div class="inside">设置</div></div>
			
			
		</div>
		
	</body>
</html>