css+js简单实现126邮箱注册页面
2013-12-24 21:22
525 查看
经常受点刺激也是好事。提醒自己别忘了持之以恒。
开头先祝大家平安夜快乐。
下面是简单实现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" onfocus="" onblur="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" onfocus="" onblur="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" onfocus="" onblur="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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js+html+css实现简单页面交互功能（2015知乎前端笔试题）http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html?from=y1.7-1.2
- Html+css+js+jquery实现简单页面登录
- css+js实现一个弹出层，完成注册功能 带有遮罩层，比较简单
- JSP作业3 - 使用JSP实现简单的用户登录注册页面
- JS一个简单的注册页面实例
- 初识网站前端--用简单的HTML+CSS+js实现的选项卡切换效果
- [Yii Framework] 如何在当前页面注册css和js文件
- JS+CSS实现简单滑动门(滑动菜单)效果
- 手把手教小白如何用css+js实现页面中图片放大展示效果
- js实现单一html页面两套css切换代码
- js+css实现的简单易用兼容好的分页
- js+css实现的简单易用兼容好的分页
- js+css实现页面右键菜单
- js+css实现页面右键菜单
- 原生js+css实现重力模拟弹跳系统的登录页面
- css超简单实现div页面居中【适合做弹出框】
- css实现登录注册可切换页面与boostrap按钮组
- js实现注册页面
- HTML+CSS实现的简单注册表单
- JS小功能(列表页面隔行变色)简单实现