css+js简单实现126邮箱注册页面
Posted Felx_chu
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css+js简单实现126邮箱注册页面相关的知识,希望对你有一定的参考价值。
经常受点刺激也是好事。提醒自己别忘了持之以恒。
开头先祝大家平安夜快乐。
下面是简单实现126邮箱注册,也是一个作业。主要实现了:邮箱检测,密码强度检测,重复密码检测等。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>126注册</title>
<style type="text/css">
<!--
body
margin-left:140px;
#top
margin-top:20px;
width:960px;
height:35px;
#pho
background-repeat:no-repeat;
width:650px;
height:35px;
background-image:url(img/pho.png);
float:left;
#txt
font:"宋体";
font-size:14px;
margin-top:10px;
margin-left:150px;
width:130px;
height:30px;
float:left;
#welcome
margin-top:20px;
background-image:url(img/welcome.png);
width:960px;
height:40px;
#main
width:960px;
height:540px;
border:1px;
#mleft
width:640px;
height:540px;
float:left;
#mright
width:320px;
height:540px;
background-image:url(img/rightm.png);
float:left;
#rbutton
margin-left:145px;
margin-top:50px;
#emailR
float:left;
background-color:#375BEC;
font-size:18px;
font-family: "宋体";
color: #FFFFFF;
border-radius:5px;
#phoneR
background-color:#375BEC;
font-size:18px;
font-family: "宋体";
color: #FFFFFF;
float:left;
border-radius:5px;
#tab
color:#999999;
padding-top:20px;
margin-left:60px;
widows:450px;
height:380px;
clear:both;
font:"微软雅黑";
font-size:16px;
#bottom
margin-top:20px;
#passStrongC
width:90px;
#ps1
float:left;
width:30px;
#ps2
float:left;
width:30px;
#ps3
float:left;
width:30px;
a:
-->
</style>
</head>
<body >
<div id="top">
<div id="pho"> </div>
<div id="txt"><a href="http://mail.163.com/html/mail_intro/">了解更多</a>|<a href="http://zhidao.mail.163.com/zhidao/feedback.jsp?t=reg">反馈意见</a></div>
</div>
<div id="welcome"></div>
<div id="main" style="border:1px;">
<div id="mleft">
<div id="rbutton">
<div id="emailR">注册字母邮箱</div>
<div id="phoneR">注册手机邮箱</div>
</div>
<div id="tab">
<table>
<tr>
<td width="85" height="50" style="font-size:18px; color:#000000;">*邮箱地址 </td>
<td colspan="3" height="57"><input name="Input" id="addEm" οnfοcus="" οnblur="chkaddEm()" size="20" height="25"/>
@
<select name="select" >
<option>126.com</option>
<option>163.com</option>
<option>yeah.com</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td height="33" colspan="3" style=" font-size:14px color:#666666" id="addEmNo">6~18个字符,可使用字母、数字、下划线,需以字母开头 </td>
</tr>
<tr>
<td height="50" style="font-size:18px; color:#000000;"> *密码 </td>
<td colspan="3">
<input name="Input2" id="pass" οnfοcus="" οnblur="passChk()" size="40" height="25" onKeyUp="pwStrength(this.value)"/>
</td>
</tr>
<tr>
<td></td>
<td colspan="2" style=" font-size:14px color:#666666" id="passNo">6~16个字符,区分大小写 </td>
<td width="172">
<table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc" height="20">
<tr align="center" bgcolor="#eeeeee">
<td width="33%" id="strength_L">弱</td>
<td width="33%" id="strength_M">中</td>
<td width="33%" id="strength_H">强</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="50" style="font-size:18px; color:#000000;">*确认密码 </td>
<td colspan="3"><input name="Input2" id="repass" οnfοcus="" οnblur="repassChk()" size="40" height="25" /></td>
</tr>
<tr>
<td></td>
<td colspan="3" style=" font-size:14px color:#666666" id="repassNo">请再次填写密码 </td>
</tr>
<tr>
<td height="50" style="font-size:18px;color:#000000;"> *验证码 </td>
<td colspan="3"><input name="Input2" size="20" height="25" /></td>
</tr>
<tr>
<td></td>
<td height="34" colspan="3" style=" font-size:14px color:#666666">请填写图片中的字符,不区分大小写</td>
</tr>
<tr>
<td height="38"></td>
<td colspan="3"><input name="checkbox" type="checkbox"/>
同意"<a href="http://reg.163.com/agreement.shtml">服务条款</a>"和"<a href="http://reg.163.com/agreement_game.shtml">隐私权相关政策 </a>" </td>
</tr>
<tr>
<td height="72"></td>
<td colspan="3" width="174"><input name="button" type="button" style="background-image:url(img/register.png); width:128px; height:38px;"/></td>
</tr>
</table>
</div>
</div>
<div id="mright"></div>
</div>
<div id="bottom" align="center">关于网易 关于网易免费邮 邮箱官方博客 客户服务 隐私政策 | 网易公司版权所有 1997-2013 </div>
<script type="text/javascript">
function chkaddEm()
var s = document.getElementById("addEm").value;
var sf = s.charAt(0);
var myreg = /^([a-zA-Z0-9]+[_|\\_|\\.]?)*[a-zA-Z0-9]/;
if(s.length<6||s.length>18)
document.getElementById("addEmNo").innerHTML="长度应为6~18个字符 ";
document.getElementById("addEmNo").style.color="red";
else if((!myreg.test(s)))
document.getElementById("addEmNo").style.color="red";
document.getElementById("addEmNo").innerHTML="邮件地址需由字母、数字或下划线组成 ";
function passChk()
var s = document.getElementById("pass").value;
if(s.length<6||s.length>16)
document.getElementById("passNo").innerHTML="6~16个字符,区分大小写";
document.getElementById("passNo").style.color="red";
function repassChk()
var s1 = document.getElementById("repass").value;
var s2 = document.getElementById("pass").value;
if(s1!= s2)
document.getElementById("repassNo").innerHTML="两次输入的密码不同,请重新输入";
document.getElementById("repassNo").style.color="red";
//CharMode函数
//测试某个字符是属于哪一类.
function CharMode(iN)
if (iN>=48 && iN <=57) //数字
return 1;
if (iN>=65 && iN <=90) //大写字母
return 2;
if (iN>=97 && iN <=122) //小写
return 4;
else
return 8; //特殊字符
//bitTotal函数
//计算出当前密码当中一共有多少种模式
function bitTotal(num)
modes=0;
for (i=0;i<4;i++)
if (num & 1) modes++;
num /= 2;
return modes;
//checkStrong函数
//返回密码的强度级别
function checkStrong(sPW)
if (sPW.length<=4)
return 0; //密码太短
Modes=0;
for (i=0;i<sPW.length;i++)
//测试每一个字符的类别并统计一共有多少种模式.
Modes|=CharMode(sPW.charCodeAt(i));
return bitTotal(Modes);
//pwStrength函数
//当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色
function pwStrength(pwd)
O_color="#eeeeee";
L_color="#FF0000";
M_color="#FF9900";
H_color="#33CC00";
if (pwd==null||pwd=='')
Lcolor=Mcolor=Hcolor=O_color;
else
S_level=checkStrong(pwd);
switch(S_level)
case 0:
Lcolor=Mcolor=Hcolor=O_color;
case 1:
Lcolor=L_color;
Mcolor=Hcolor=O_color;
break;
case 2:
Lcolor=Mcolor=M_color;
Hcolor=O_color;
break;
default:
Lcolor=Mcolor=Hcolor=H_color;
document.getElementById("strength_L").style.background=Lcolor;
document.getElementById("strength_M").style.background=Mcolor;
document.getElementById("strength_H").style.background=Hcolor;
</script>
</body>
</html>
以上是关于css+js简单实现126邮箱注册页面的主要内容,如果未能解决你的问题,请参考以下文章