126注册界面

最新推荐文章于 2024-08-16 20:24:29 发布

心有阳光必有诗和远方★

最新推荐文章于 2024-08-16 20:24:29 发布

阅读量289

点赞数

文章标签： css javascript html

本文链接：https://blog.csdn.net/qq_51532109/article/details/125314078

版权

这是一个HTML页面，用于网易邮箱的注册。页面包含邮箱地址和密码的输入框，以及相应的验证提示。当输入框获取焦点时，显示验证提示，失去焦点时进行验证。验证规则包括邮箱地址的格式和密码的复杂性要求。页面底部有一个同意服务条款的复选框和‘立即注册’的提交按钮。

摘要由CSDN通过智能技术生成

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>收到</title>
<style type="text/css">
.backgrd {		width:403px;
		height:536px;
		margin-left:auto;
		margin-right:auto;
		padding-left:80px;
		padding-top:50px;
		
		background-color:#A1D9C0;}
.bk {	border:#CFCFCF solid 2px;
	width:320px;
	margin-top:30px;
	background:#FFFFFF;
	margin-bottpm:10px;
	height:40px;}
.forgetpassword {	width:80px;
	float:left;
	color:#65AB68;
	margin-top:5px;
	margin-bottom:50px;
	font-size:12px;}
.headl {		padding-left:0px;
		width:300px;
		padding-top:10px;
		font-size:24px;
		height:30px;}
.insi {border:none;
width:220px;

	height:35px;}
.lj {				background:#FFCD21;
				width:120px;
				height:40px;
				border-radius:16px;
				font-size:20px;				}
.ljlj {			position:absolute;
			left:460PX;
			top:670px}
.ll {					background:#979797;
					color:#FFFFFF;
					border-radius:50px;}
.llj {			position:absolute;
			left:690PX;
			top:680px}
.mydiv1 {	float:left;
	width:230px;
	height:35px;}
.mydiv2 {	width:80px;
	height:25px;
	padding-top:8px;
	float:left}
.ni {				width:100px;
				font-size:15px;
				color:#56A250;
				margin-top:10px;
				margin-right:50px;}
.nii {				width:100px;
				margin-top:10px;
				font-size:15px;
				color:#56A250;
				margin-left:50px;}
.repair {float:left;}
.row {	float:left;
	width:300px;}
.submi {		
		width:320px;
		font-size:18px;
		color:#FFFFFF;
		background:#388CDB;
		margin-bottom:20px;
		margin-top:30px;
		height:42px;}
		.cha{width:400px;
		height:50ppx;}
.thirty {	 font-size:12px;
	 float:left;
	 margin-top:20px;
	 width:350px;
	 color:#868686;}
	 .si{
		 height:20px;
		 width:350px;
		 display:none;
		 font-size:12px;
		 color:#ADADAD;}
		 .sit{
		 height:20px;
		 width:350px;
		 display:none;
		 font-size:12px;
		 color:#F10609;}
		 .vis{
			 display:none;
			 }
</style>
</head>

<body>
<div class="backgrd">
  <form action="" method="">
    <div class="headl">欢迎注册网易邮箱</div>
    <div class="bk">
      <div class="mydiv1">
        
        <div class="repair">
          <input type="text" class="insi" placeholder="邮箱地址" onFocus="vis();" onBlur="invis();" id="oone">
        </div>
        
      </div>
      
      <div class="mydiv2"> @126.com </div>
    </div>
    <div class="si"  id="one">
          8-16个字符，可以使用字母、数字、下划线，需要以字母开头
        </div>
        <div class="sit"  id="otoo">
          邮箱地址需以字母开头
        </div>
        <div class="sit"  id="otot">
          长度应为8～16个字符
        </div>
        <div class="sit"  id="otor">
          只能输入字母、数字、下划线
        </div>
    <div class="bk">
      <div class="mydiv1">
        
        <div class="repair">
          <input type="password" class="insi" placeholder="密码" onFocus="vis2();" onBlur="invis2();" id="ttwo">
        </div>
      </div>
    </div>
     <div class="si"  id="two">
          8-16个字符，需包含大、小写字母和数字
        </div>
        <div class="sit"  id="ttoo">
          密码长度应为8-16个字符
        </div>
        <div class="sit"  id="ttot">
          密码安全系数较低，需包含大、小写字母和数字
        </div>
        
    <div class="row">
      
      
    </div>
    <div> <div class="thirty">
        <input type="checkbox">
        同意《服务条款》、《隐私政策》和《儿童隐私政策》</div></div>
    <div class="cha">
      <input type="submit" class="submi" value="立 即 注 册">
      
     
    </div>
    
  </form>
</div>
</body>
</html>
<script>
var one=document.getElementById("one");
var two=document.getElementById("two");
var oone=document.getElementById("oone");
var ttwo=document.getElementById("ttwo");
var otoo=document.getElementById("otoo");
var otot=document.getElementById("otot");
var otor=document.getElementById("otor");
var ttoo=document.getElementById("ttoo");
var ttot=document.getElementById("ttot");

function vis()
{
	
	one.style.display="block";
	otot.style.display="none";
	otoo.style.display="none";
	otor.style.display="none";
	}
	function vis2()
{
	ttoo.style.display="none";
	ttot.style.display="none";
	two.style.display="block";
	}
function invis()
{
	one.style.display="none";
	
	var res=oone.value;
	var len=res.length;
	
	for(i=0;i<len;i++)
	{if(!(len>=8&&len<=16)){otot.style.display="block"; break;}
	if(res[0]=='_'){otoo.style.display="block";break;}
	if(res[0]>='0'&&res[0]<='9'){otoo.style.display="block";break;}
		if(res[i]>='a'&&res[i]<='z'||res[i]>='A'&&res[i]<='Z'||res[i]=='_'||res[i]>='0'&&res[i]<='9'){continue;}
	else 
	{otor.style.display="block";break;}
	}
	}
	function invis2()
{
	two.style.display="none";
	var res=ttwo.value;
	var len=res.length;
	var p=0,y=0,z=0;
	for(i=0;i<len;i++)
	{if(!(len>=8&&len<=16)){ttoo.style.display="block"; break;}
	
		if(res[i]>='A'&&res[i]<='Z')p=1;
		if(res[i]>='a'&&res[i]<'z')y=1;
		if(res[i]>='0'&&res[i]<='9')z=1;
		if(i==len-1&&!(p==1&&y==1&&z==1))
		{
			ttot.style.display="block";
			
			break;
			}
	}
	
	
	}
</script>