登录注册界面前端代码
html代码：
<body>
<div class="content">
<div class="ucSimpleHeader">
<a href="##" class="meizuLogo"></a>
<div class="trigger">
<a href="##">登录</a>
<span> | </span>
<a href="##">注册</a>
</div>
</div>
<form id="#mainForm1" class="mainForm mainForm1">
<div class="number">
<a href="##" class="linkABlue">手机号码注册</a>
<span></span>
<a href="##" class="linkAGray number1">账户名注册</a>
</div>
<div class="normalInput">
<input type="text" class="phone" maxlength="11" placeholder="手机号码">
</div>
<span class="error error1"></span>
<div class="normalInput">
<input type="text" class="kapkey" maxlength="6" placeholder="验证码">
<span class="formLine"></span>
<a href="##" id="getKey" class="linkABlue">获取验证码</a>
</div>
<span class="error error2"></span>
<div class="normalInput">
<input type="text" class="password" maxlength="16" autocomplete="off" placeholder="密码">
<input type="password" class="password1" maxlength="16" autocomplete="off" placeholder="密码">
<a id="pwdBtn" href="##" class="pwdBtnShow" isshow="false">
<i class="i_icon"></i>
</a>
</div>
<span class="error error3"></span>
<div class="rememberField">
<span class="checkboxPic check_chk" tabindex="-1" isshow="false">
<i class="i_icon"></i>
</span>
<label class="pointer">我已阅读并接受</label>
<a href="#" target="_blank" class="linkABlue">《Flyme服务协议条款》</a>
</div>
<span class="otherError">请确认已阅读并同意Flyme服务协议条款</span>
<a href="##" class="fullBtnBlue">注册</a>
</form>
<form id="#mainForm2" class="mainForm mainForm2">
<div class="number">
<a href="##" class="linkABlue2 number2">手机号码注册</a>
<span></span>
<a href="##" class="linkAGray2">账户名注册</a>
</div>
<div class="normalInput">
<input type="text" class="username" maxlength="32" placeholder="账户名" autocomplete="off">
<span class="grayTip">@flyme.cn</span>
</div>
<span class="error error1"></span>
<div class="normalInput">
<input type="text" class="passwordN" maxlength="16" autocomplete="off" placeholder="密码">
<input type="password" class="password1N" maxlength="16" autocomplete="off" placeholder="密码">
<a id="pwdBtnN" href="##" class="pwdBtnShowN" isshow="false">
<i class="i_icon"></i>
</a>
</div>
<span class="error error3"></span>
<div class="normalInput">
<input type="text" class="email" maxlength="32" placeholder="安全邮箱" autocomplete="off">
</div>
<span class="error error2"></span>
<div class="rememberField">
<span class="checkboxPic check_chk" tabindex="-1" isshow="false">
<i class="i_icon"></i>
</span>
<label class="pointer">我已阅读并接受</label>
<a href="https://member.meizu.com/ServiceAgreement.jsp" target="_blank" class="linkABlue">《Flyme服务协议条款》</a>
</div>
<span class="otherError">请确认已阅读并同意Flyme服务协议条款</span>
<a href="##" class="fullBtnBlue">注册</a>
</form>
</div>
</div>
<ul class="bRadius2 mail">
<li data-mail="@qq.com" class="item item1">@qq.com</li>
<li data-mail="@sina.com" class="item item2">@sina.com</li>
<li data-mail="@126.com" class="item item3">@126.com</li>
<li data-mail="@163.com" class="item item4">@163.com</li>
<li data-mail="@gmail.com" class="item item5">@gmail.com</li>
</ul>
<div id="mz_Float">
<div class="mz_FloatBox">
<div class="mz3AngleL">
<i class="i_icon"></i>
</div>
<div class="mzFloatTip bRadius2">长度为8-16个字符，区分大小写，至少包含两种类型</div>
</div>
</div>
</body>
css代码：
*{ margin: 0;padding: 0;}
li,ul{list-style: none;}
img,input{border: 0;}
a{text-decoration: none;}
body{font-family: "微软雅黑","Microsoft Yahei",Arial,Helvetica,sans-serif,"宋体";font-size: 14px;color: #515151;}
body input, body textarea {font-family: "微软雅黑","Microsoft Yahei",Arial,Helvetica,sans-serif,"宋体";background-color: white;outline: none;}
.content{ width: 100%; height: auto;}
.ucSimpleHeader{ height: 30px;margin: 0 auto;position: relative;padding-top: 45px;width: 1000px;}
.meizuLogo{ width: 110px; height: 20px; float: left;background: url("images/base.png") -388px -90px no-repeat; display: block;}
.trigger{float: right;height: 20px;line-height: 20px;width: 100px;text-align: center;}
.trigger a{color: #7f7f7f;}
.trigger a:hover{color: #474747;}
.trigger a:nth-child(3){color:#474747;}
/*mainForm1*/
.mainForm{margin-top: 100px;width: 343px;margin: 100px auto 0px;overflow: hidden;}
.number{font-size: 20px;margin-left: -5px;margin-bottom: 30px;width: 350px;text-align: center;}
.number a{color: #515151;}
.linkABlue:visited {color: #00a7ea;}
.linkAGray:hover{color: #2b2b2b;}
.number span{color: #d9d9d9;display: inline-block;border: 1px solid #dadada;border-left: 1px;height: 16px;line-height: 20px;margin-right: 50px;margin-left: 50px;}
.normalInput{float: left;position: relative;display: inline-block;padding: 0px 10px;width: 320px;height: 50px;line-height: 22px;font-size: 16px;margin-bottom: 20px;border: 1px solid #dadada;outline: none;color: #474747;overflow: visible;}
.error{display: none;margin-left: 0px;margin-bottom: 20px;color: red;float: left;}
/*#mainForm1 .normalInput input,#mainForm2 .normalInput input{line-height: 22px;padding: 14px 0;height: 22px;}*/
.normalInput input{font-size: 16px;width: 100%;padding: 14px 0;height: 22px;}
.errorC{ margin-bottom: 10px;border-color: red;color: red;}
.checkedN{border: 1px solid #1ece6d;}
.formLine{color: #d9d9d9;height: 40px;display: inline-block;border-left: 1px solid #dadada;position: absolute;right: 100px;top: 5px;}
#getKey{width: 80px;border: none;outline: none;height: 50px;line-height: 50px;font-size: 16px;position: absolute;right: 10px;top: 0px;}
.i_icon{display: inline-block;width: 100%;height: 100%;overflow: hidden;}
.normalInput .password{float: left;width: 200px;}
.normalInput .password1{float: left;width: 200px;display: none;}
.normalInput .passwordN{float: left;width: 200px;display: block;}
.normalInput .password1N{float: left;width: 200px;display: none;}
.pwdBtnShow{outline: none;position: relative;display: inline-block;width: 30px;height: 30px;cursor: pointer;overflow: hidden;float: right;margin-right: 5px;}
#pwdBtn {margin-top: 13px;margin-bottom: 10px;}
.pwdBtnShow i{background-image:url("images/elements.png");background-position: -30px -93px; background-repeat: no-repeat;}
.pwdBtnShowN{outline: none;position: relative;display: inline-block;width: 30px;height: 30px;cursor: pointer;overflow: hidden;float: right;margin-right: 5px;}
#pwdBtnN {margin-top: 13px;margin-bottom: 10px;}
.pwdBtnShowN i{background-image:url("images/elements.png");background-position: -30px -93px; background-repeat: no-repeat;}
.rememberField{margin-bottom: 30px;height: 20px;line-height: 20px;float: left;display: block;}
.checkboxPic {outline: none; display: inline-block;width: 25px;height: 20px;line-height: 20px;cursor: pointer;vertical-align: middle;overflow: hidden;}
.check_chk i {background-position: -31px -127px;background-image: url("images/elements.png");background-repeat: no-repeat;}
.pointer{cursor: pointer;}
.otherError{display: none;margin-left: 0px;margin-bottom: 20px;color: red;float: left;}
.fullBtnBlue{display: inline-block;height: 50px;width: 342px;font-size: 20px;line-height: 50px;text-align: center;margin-bottom: 20px;outline: none;cursor: pointer;background-color: #32a5e7;color: #fff;}
/*mainForm1end*/
/*mainForm2*/
.linkAGray2:visited {color: #00a7ea;}
.linkABlue2:hover{color: #2b2b2b;}
.normalInput .username{width: 220px;border: none;outline: none;font-size: 16px;height: 22px;line-height: 22px;padding: 14px 0;}
.grayTip {height: 50px;line-height: 50px;vertical-align: top;display: inline-block;color: #7f7f7f;}
/*mainForm2end*/
.footer{position: absolute;bottom: 0;width: 100%;height: 130px;border-top: solid 1px #E5E6E7;background-color: #fff;color: black;top: 669px;}
.footerInner{width: 1000px;margin: 24px auto 30px;}
.footerLayer1{height: 50px;line-height: 50px;}
.footerInnerLink{float: left;}
.footerInnerLink a{color: black;}
.foot-line {background-color: #888;margin: 0px 5px;width: 1px;height: 10px;}
.footerLanguage{position: relative;overflow: hidden;cursor: default;background: url("images/base.png") -30px -150px no-repeat;}
.footerService{float: left;margin-left: 36px;}
.serviceLabel{margin-right: 10px;}
.serviceNum{margin-right: 20px;}
.serviceOnline{display: inline-block;height: 20px;line-height: 18px;width: 64px;color: white;background-color: #32a5e7;border-radius: 2px;-webkit-border-radius: 2px;text-align: center;}
.footerOuterLink{position: relative;float: right;padding-top: 9px;}
.footerOuterLink a{margin-left: 10px;display: inline-block;overflow: hidden;width: 32px;height: 32px;}
.footerOuterLink i{background: url("images/base.png") no-repeat;}
.footerSinaMblog i{background-position: -168px -91px;}
.footerTencentMblog i{background-position: -210px -91px;}
.footerWeChat i{background-position: -252px -91px;}
.footerQzone i{background-position: -294px -91px;}
.footerSinaMblog:hover i{background-position: -168px -137px;}/*只能作用于自身或子元素加 ~(通用兄弟选择器) 可以作用于兄弟元素*/
.footerTencentMblog:hover i{background-position: -210px -137px;}
.footerWeChat:hover i{background-position: -252px -137px;}
.footerQzone:hover i{background-position: -294px -137px;}
.wechatPic{position: absolute;z-index: 100;width: 310px;height: 270px;background: url("images/weixin.png") no-repeat;left: -38px;top: -267px;display: none;}
.footerWeChat:hover ~ .wechatPic{display: block;}
.footerLanguagMenuBox{display: inline-block;}
.footerLanguagMenu{left: 474.5px;bottom: 89px;display: none;box-shadow: 0px 0px 10px #E1E4E8;border-radius: 2px;background-color: #FEFEFE;position: absolute;border: solid 1px #E1E4E8;overflow: hidden;width: 140px; height: 200px;z-index: 10;}
.footerLanguagMenu a{display: block;height: 40px;line-height: 40px;width: 118px;margin: 0px auto;border-bottom: solid 1px #E4E7E9;font-size: 14px;color: #000000;text-align: left;padding-left: 10px;}
.footerLanguagMenu .checked, .footerLanguagMenu .checked:hover {color: #1daeed;}
.footerLanguagMenu .ClobalItem:hover{color: #515151;}
#globalContainer a:nth-child(5):{border-width: 0px;}
.footerLanguagMenuBox:hover #globalContainer{display: block;};
.copyrightWrap{width: 100%;}
.copyrightInner{width: 1000px;margin: 0px auto;overflow: hidden;}
.copyrightInner span{color: #a2a2a2;float: left;}
.copyrightInner a{float: left;color: #a2a2a2;margin-left: 6px;white-space: nowrap;}/*white-space 属性设置如何处理元素内的空白。*/
#mz_Float{position: absolute;z-index: 1000;top: -376px;left: 851px;width: 200px;display: block;}
.mz_FloatBox{position: relative;}
.mz3AngleL{z-index: 1;position: absolute;width: 10px;height: 16px;top: 10px;left: -1px;overflow: hidden;}
.mz3AngleL i {background-position: 0px -96px;background-image: url("images/elements.png");background-repeat: no-repeat;}
.mzFloatTip {width: 170px; padding: 6px 10px 6px 10px;background-color:#fff;position: absolute;right: 0px;color: #515151;border: solid 1px #E5E5E5;}
.bRadius2 {border-radius: 2px;outline: medi um none;}
.mail{box-shadow: 0 0 15px #141414;width: 340px;border: solid 1px silver;position: absolute;z-index: 10;left: 503px;top: 429px;display: none;}
.mail .item{background-color: #fff;color: #515151;cursor: pointer;height: 22px;line-height: 22px;letter-spacing: 1px;font-size: 13px;padding-left: 5px;}/*letter-spacing字符间距*/
.mail .item:hover{background-color: #ccc; color: #fff;}
.mainForm2{display: none;}
js代码：
$(function(){
//页面切换初始化
$(".number2").click(function(){
$(".mainForm1").show();
$(".mainForm2").hide();
$(".error").hide();
$(".normalInput").removeClass("errorC");
$(".normalInput").removeClass("checkedN");
$(".mainForm input").val("");
});
$(".number1").click(function(){
$(".mainForm2").show();
$(".mainForm1").hide();
$(".error").hide();
$(".normalInput").removeClass("errorC");
$(".normalInput").removeClass("checkedN");
$(".mainForm input").val("");
});
//文本框失去焦点
$(".mainForm input").blur(function(){
$("#mz_Float").css("top","");
});
//协议条款
$(".checkboxPic").click(function(){
if($(this).attr("isshow")=="false")
{
$(this).parent().css("margin-bottom","10px");
$(".checkboxPic i").css({"background-position":" -0px -127px"});
$(".otherError").css("display","block");
$(this).attr("isshow","true");
}
else
{
$(this).parent().css("margin-bottom","");
$(".checkboxPic i").css({"background-position":"-31px -127px"});
$(".otherError").hide();
$(this).attr("isshow","false");
}
});
//mainform1
//密码是否可见(mainform1)
$(".pwdBtnShow").click(function(){
if($(".pwdBtnShow").attr("isshow")=="false")
{
$(".pwdBtnShow i").css("background-position","-60px -93px");
$(".password").hide();
$(".password1").val($(".password").val());
$(".password1").show();
$(".pwdBtnShow").attr("isshow","true");
}
else
{
$(".pwdBtnShow i").css("background-position","-30px -93px");
$(".password1").hide();
$(".password").val($(".password1").val());
$(".password").show();
$(".pwdBtnShow").attr("isshow","false");
}
});
//手机号栏失去焦点
$(".phone").blur(function(){
reg=/^1[3|4|5|8][0-9]\d{4,8}$/i;//验证手机正则(输入前7位至11位)
if( $(".phone").val()=="")
{
$(".phone").parent().addClass("errorC");
$(".error1").html("请输入手机号");
$(".error1").css("display","block");
}
else if($(".phone").val().length<11)
{
$(".phone").parent().addClass("errorC");
$(".error1").html("手机号长度有误！");
$(".error1").css("display","block");
}
else if(!reg.test($(".phone").val()))
{
$(".phone").parent().addClass("errorC");
$(".error1").html("逗我呢吧，你确定这是你的手机号!!");
$(".error1").css("display","block");
}
else
{
$(".phone").parent().addClass("checkedN");
}
});
//验证码栏失去焦点
$(".kapkey").blur(function(){
reg=/^.*[\u4e00-\u9fa5]+.*$/;
if( $(".kapkey").val()=="")
{
$(".kapkey").parent().addClass("errorC");
$(".error2").html("请填写验证码");
$(".error2").css("display","block");
}
else if($(".kapkey").val().length<6)
{
$(".kapkey").parent().addClass("errorC");
$(".error2").html("验证码长度有误！");
$(".error2").css("display","block");
}
else if(reg.test($(".kapkey").val()))
{
$(".kapkey").parent().addClass("errorC");
$(".error2").html("验证码里无中文！");
$(".error2").css("display","block");
}
else
{
$(".kapkey").parent().addClass("checkedN");
}
});
//密码栏失去焦点(mainform1)
$(".password,.password1").blur(function(){
reg1=/^.*[\d]+.*$/;
reg2=/^.*[A-Za-z]+.*$/;
reg3=/^.*[_@#%&^+-/*\/\\]+.*$/;//验证密码
if($(".pwdBtnShow").attr("isshow")=="false")
{
var Pval = $(".password").val();
}
else
{
var Pval = $(".password1").val();
}
if( Pval =="")
{
$(".password").parent().addClass("errorC");
$(".error3").html("请填写密码");
$(".error3").css("display","block");
}
else if(Pval.length>16 || Pval.length<8)
{
$(".password").parent().addClass("errorC");
$(".error3").html("密码应为8-16个字符，区分大小写");
$(".error3").css("display","block");
}
else if(!((reg1.test(Pval) && reg2.test(Pval)) || (reg1.test(Pval) && reg3.test(Pval)) || (reg2.test(Pval) && reg3.test(Pval)) ))
{
$(".password").parent().addClass("errorC");
$(".error3").html("需至少包含数字、字母和符号中的两种类型");
$(".error3").css("display","block");
}
else
{
$(".password").parent().addClass("checkedN");
}
});
//手机号栏获得焦点
$(".phone").focus(function(){
$(".phone").parent().removeClass("errorC");
$(".phone").parent().removeClass("checkedN");
$(".error1").hide();
$("#mz_Float").css("top","232px");
$("#mz_Float").find(".bRadius2").html("输入11位手机号码，可用于登录和找回密码");
});
//验证码栏获得焦点
$(".kapkey").focus(function(){
$(".kapkey").parent().removeClass("errorC");
$(".kapkey").parent().removeClass("checkedN");
$(".error2").hide();
if($(".error1").css("display")=="block")
{
$("#mz_Float").css("top","334px");
}
else
{
$("#mz_Float").css("top","304px");
}
$("#mz_Float").find(".bRadius2").html("请输入手机收到的验证码");
});
//密码栏获得焦点(mainform1)
$(".password,.password1").focus(function(){
$(".password").parent().removeClass("errorC");
$(this).parent().removeClass("checkedN");
$(".error3").hide();
if($(".error1").css("display")=="block" && $(".error2").css("display")=="block")
{
$("#mz_Float").css("top","436px");
}
else if($(".error1").css("display")=="block" || $(".error2").css("display")=="block")
{
$("#mz_Float").css("top","406px");
}
else
{
$("#mz_Float").css("top","376px");
}
$("#mz_Float").find(".bRadius2").html("长度为8-16个字符，区分大小写，至少包含两种类型");
});
//mainform1end
//mainForm2
//密码是否可见(mainform2)
$(".pwdBtnShowN").click(function(){
if($(".pwdBtnShowN").attr("isshow")=="false")
{
$(".pwdBtnShowN i").css("background-position","-60px -93px");
$(".passwordN").hide();
$(".password1N").val($(".passwordN").val());
$(".password1N").show();
$(".pwdBtnShowN").attr("isshow","true");
}
else
{
$(".pwdBtnShowN i").css("background-position","-30px -93px");
$(".password1N").hide();
$(".passwordN").val($(".password1N").val());
$(".passwordN").show();
$(".pwdBtnShowN").attr("isshow","false");
}
});
//账户名栏获得焦点
$(".username").focus(function(){
$(".username").parent().removeClass("errorC");
$(".username").parent().removeClass("checkedN");
$(".error1").hide();
$("#mz_Float").css("top","232px");
$("#mz_Float").find(".bRadius2").html("长度为4-32个字符支持数字、字母、下划线，字母开头，字母或数字结尾");
});
//邮箱栏获得焦点
$(".email").focus(function(){
$(".email").parent().removeClass("errorC");
$(".email").parent().removeClass("checkedN");
$(".error2").hide();
if($(".error1").css("display")=="block" && $(".error3").css("display")=="block")
{
$("#mz_Float").css("top","436px");
}
else if($(".error1").css("display")=="block" || $(".error3").css("display")=="block")
{
$("#mz_Float").css("top","406px");
}
else
{
$("#mz_Float").css("top","376px");
}
$("#mz_Float").find(".bRadius2").html("用于找回密码，提高账户安全等级");
});
//密码栏获得焦点(mainform2)
$(".passwordN,.password1N").focus(function(){
$(".passwordN").parent().removeClass("errorC");
$(this).parent().removeClass("checkedN");
$(".error3").hide();
if($(".error1").css("display")=="block")
{
$("#mz_Float").css("top","334px");
}
else
{
$("#mz_Float").css("top","304px");
}
$("#mz_Float").find(".bRadius2").html("长度为8-16个字符，区分大小写，至少包含两种类型");
});
//账户名栏失去焦点
$(".username").blur(function(){
reg=/^[a-zA-Z][0-9a-zA-Z_]{2,30}[0-9a-zA-Z]$/;//验证手机正则(输入前7位至11位)
if( $(".username").val()=="")
{
$(".username").parent().addClass("errorC");
$(".error1").html("请输入账户名");
$(".error1").css("display","block");
}
else if($(".username").val().length>32 || $(".username").val().length<4)
{
$(".username").parent().addClass("errorC");
$(".error1").html("账户名长度有误！");
$(".error1").css("display","block");
}
else if(!reg.test($(".username").val()))
{
$(".username").parent().addClass("errorC");
$(".error1").html("账户名格式有误!!");
$(".error1").css("display","block");
}
else
{
$(".username").parent().addClass("checkedN");
}
});
//密码栏失去焦点(mainform2)
$(".passwordN,.password1N").blur(function(){
reg1=/^.*[\d]+.*$/;
reg2=/^.*[A-Za-z]+.*$/;
reg3=/^.*[_@#%&^+-/*\/\\]+.*$/;//验证密码
if($(".pwdBtnShow").attr("isshow")=="false")
{
var Pval = $(".passwordN").val();
}
else
{
var Pval = $(".password1N").val();
}
if( Pval =="")
{
$(".passwordN").parent().addClass("errorC");
$(".error3").html("请填写密码");
$(".error3").css("display","block");
}
else if(Pval.length>16 || Pval.length<8)
{
$(".passwordN").parent().addClass("errorC");
$(".error3").html("密码应为8-16个字符，区分大小写");
$(".error3").css("display","block");
}
else if(!((reg1.test(Pval) && reg2.test(Pval)) || (reg1.test(Pval) && reg3.test(Pval)) || (reg2.test(Pval) && reg3.test(Pval)) ))
{
$(".passwordN").parent().addClass("errorC");
$(".error3").html("需至少包含数字、字母和符号中的两种类型");
$(".error3").css("display","block");
}
else
{
$(".passwordN").parent().addClass("checkedN");
}
});
//邮箱栏键盘操作
$(".email").keyup(function(){//键盘监听keyup,keydown,keypress
var emailVal = $(".email").val();
emailValN = emailVal.replace(/\s/g,'');//去空
emailValN = emailValN.replace(/[\u4e00-\u9fa5]/g,'');//屏蔽中文
if(emailValN!=emailVal)
{
$(".email").val(emailValN);
}
var mailVal = emailValN.split("@");
var mailHtml=mailVal[0];
if(mailHtml.length>15)
{
mailHtml=mailHtml.slice(0,15)+"...";//字数超加省略
}
for(var i=1;i<6;i++)
{
var M = $(".item"+i).attr("data-mail");
$(".item"+i).html(mailHtml+M);
}
});
//邮箱提示
$(".item").click(function(){
var a= $(".email").val();
var b= $(this).attr("data-mail");
$(".email").val(a+b);
$(".email").trigger("focus");//setTimeout($(".email").("focus") );效果同，时间设多少无所谓
});
$(".email").click(function(){
if($(".error1").css("display")=="block" && $(".error3").css("display")=="block")
{
$(".mail").css("top","489px");
}
else if($(".error1").css("display")=="block" || $(".error3").css("display")=="block")
{
$(".mail").css("top","459px");
}
else
{
$(".mail").css("top","429px");
}
$(".mail").show();
return false;
});
$(document).click(function(){
$(".mail").hide();
});
//邮箱栏失去焦点
$(".email").blur(function(){
reg=/^\w+[@]\w+((.com)|(.net)|(.cn)|(.org)|(.gmail))$$/;
if( $(".email").val()=="")
{
$(".email").parent().addClass("errorC");
$(".error2").html("邮箱不能为空!");
$(".error2").css("display","block");
}
else if(!reg.test($(".email").val()))
{
$(".email").parent().addClass("errorC");
$(".error2").html("邮箱格式错误！");
$(".error2").css("display","block");
}
else
{
$(".email").parent().addClass("checkedN");
}
});
});
