JQuery完整验证&密码的显示与隐藏&验证码
HTML
<link href="bootstrap.css" rel="stylesheet">
<link href="gloab.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
<script src="jquery-1.js"></script>
<script src="register.js"></script>
</head>
<body class="bgf4">
<div class="login-box f-mt10 f-pb50">
<div class="main bgf">
<div class="reg-box-pan display-inline">
<div class="step">
<ul>
<li class="col-xs-4 on">
<span class="num"><
em class="f-r5"></em>
<i>1</i></span>
<span class="line_bg lbg-r"></span>
<p class="lbg-txt">填写账户信息</p>
</li>
<li class="col-xs-4">
<span class="num"><
em class="f-r5"></em>
<i>2</i></span>
<span class="line_bg lbg-l"></span>
<span class="line_bg lbg-r"></span>
<p class="lbg-txt">验证账户信息</p>
</li>
<li class="col-xs-4">
<span class="num"><
em class="f-r5"></em>
<i>3</i></span>
<span class="line_bg lbg-l"></span>
<p class="lbg-txt">注册成功</p>
</li>
</ul>
</div>
<div class="reg-box" id="verifyCheck" style="margin-top:20px;">
<div class="part1">
<div class="item col-xs-12">
<span class="intelligent-label f-fl"><b class="ftx04">*</b>用户名：</span>
<div class="f-fl item-ifo">
<input maxlength="20" class="txt03 f-r3 required" tabindex="1" data-valid="isNonEmpty||between:3-20||isUname" data-error="用户名不能为空||用户名长度3-20位||只能输入中文、字母、数字、下划线，且以中文或字母开头" id="adminNo" type="text"> <span class="ie8 icon-close close hide"></span>
<label class="icon-sucessfill blank hide"></label>
<label class="focus"><span>3-20位，中文、字母、数字、下划线的组合，以中文或字母开头</span></label>
<label class="focus valid"></label>
</div>
</div>
<div class="item col-xs-12">
<span class="intelligent-label f-fl"><b class="ftx04">*</b>手机号：</span>
<div class="f-fl item-ifo">
<input class="txt03 f-r3 required" keycodes="tel" tabindex="2" data-valid="isNonEmpty||isPhone" data-error="手机号码不能为空||手机号码格式不正确" maxlength="11" id="phone" type="text">
<span class="ie8 icon-close close hide"></span>
<label class="icon-sucessfill blank hide"></label>
<label class="focus">请填写11位有效的手机号码</label>
<label class="focus valid"></label>
</div>
</div>
<div class="item col-xs-12">
<span class="intelligent-label f-fl"><b class="ftx04">*</b>密码：</span>
<div class="f-fl item-ifo">
<input id="password" maxlength="20" class="txt03 f-r3 required" tabindex="3" style="ime-mode:disabled;" onpaste="return false" autocomplete="off" data-valid="isNonEmpty||between:6-20||level:2" data-error="密码不能为空||密码长度6-20位||该密码太简单，有被盗风险，建议字母+数字的组合" type="password">
<span class="ie8 icon-close close hide" style="right:55px"></span>
<span class="showpwd" data-eye="password"></span>
<label class="icon-sucessfill blank hide"></label>
<label class="focus">6-20位英文（区分大小写）、数字、字符的组合</label>
<label class="focus valid"></label>
<span class="clearfix"></span>
<label class="strength">
<span class="f-fl f-size12">安全程度：</span>
<b><i>弱</i><i>中</i><i>强</i></b>
</label>
</div>
</div>
<div class="item col-xs-12">
<span class="intelligent-label f-fl"><b class="ftx04">*</b>确认密码：</span>
<div class="f-fl item-ifo">
<input maxlength="20" class="txt03 f-r3 required" tabindex="4" style="ime-mode:disabled;" onpaste="return false" autocomplete="off" data-valid="isNonEmpty||between:6-16||isRepeat:password" data-error="密码不能为空||密码长度6-16位||两次密码输入不一致" id="rePassword" type="password">
<span class="ie8 icon-close close hide" style="right:55px"></span>
<span class="showpwd" data-eye="rePassword"></span>
<label class="icon-sucessfill blank hide"></label>
<label class="focus">请再输入一遍上面的密码</label>
<label class="focus valid"></label>
</div>
</div>
<div class="item col-xs-12">
<span class="intelligent-label f-fl"><b class="ftx04">*</b>验证码：</span>
<div class="f-fl item-ifo">
<input maxlength="4" class="txt03 f-r3 f-fl required" tabindex="4" style="width:167px" id="randCode" data-valid="isNonEmpty" data-error="验证码不能为空" type="text">
<span class="ie8 icon-close close hide"></span>
<label class="f-size12 c-999 f-fl f-pl10">
<img src="%E6%B3%A8%E5%86%8C_files/yzm.jpg">
</label>
<label class="icon-sucessfill blank hide" style="left:380px"></label>
<label class="focusa">看不清？<a href="javascript:;" class="c-blue">换一张</a></label>
<label class="focus valid" style="left:370px"></label>
</div>
</div>
<div class="item col-xs-12" style="height:auto">
<span class="intelligent-label f-fl"> </span>
<p class="f-size14 required" data-valid="isChecked" data-error="请先同意条款">
<input checked="checked" type="checkbox"><a href="javascript:showoutc();" class="f-ml5">我已阅读并同意条款</a>
</p>
<label class="focus valid"></label>
</div>
<div class="item col-xs-12">
<span class="intelligent-label f-fl"> </span>
<div class="f-fl item-ifo">
<a href="javascript:;" class="btn btn-blue f-r3" id="btn_part1">下一步</a>
</div>
</div>
</div>
<div class="part2" style="display:none">
<div class="alert alert-info" style="width:700px">短信已发送至您手机，请输入短信中的验证码，确保您的手机号真实有效。</div>
<div class="item col-xs-12 f-mb10" style="height:auto">
<span class="intelligent-label f-fl">手机号：</span>
<div class="f-fl item-ifo c-blue">
15824450934
</div>
</div>
<div class="item col-xs-12">
<span class="intelligent-label f-fl"><b class="ftx04">*</b>验证码：</span>
<div class="f-fl item-ifo">
<input maxlength="6" id="verifyNo" class="txt03 f-r3 f-fl required" tabindex="4" style="width:167px" data-valid="isNonEmpty||isInt" data-error="验证码不能为空||请输入6位数字验证码" type="text">
<span class="btn btn-gray f-r3 f-ml5 f-size13" id="time_box" disabled="" style="width:97px;display:none;">发送验证码</span>
<span class="btn btn-gray f-r3 f-ml5 f-size13" id="verifyYz" style="width:97px;">发送验证码</span>
<span class="ie8 icon-close close hide" style="right:130px"></span>
<label class="icon-sucessfill blank hide"></label>
<label class="focus"><span>请查收手机短信，并填写短信中的验证码（此验证码3分钟内有效）</span></label>
<label class="focus valid"></label>
</div>
</div>
<div class="item col-xs-12">
<span class="intelligent-label f-fl"> </span>
<div class="f-fl item-ifo">
<a href="javascript:;" class="btn btn-blue f-r3" id="btn_part2">注册</a>
</div>
</div>
</div>
<div class="part3" style="display:none">
<div class="item col-xs-12">
<span class="intelligent-label f-fl"><b class="ftx04">*</b>真实姓名：</span>
<div class="f-fl item-ifo">
<input maxlength="10" class="txt03 f-r3 required" tabindex="1" data-valid="isNonEmpty||between:2-10||isZh" data-error="真实姓名不能为空||真实姓名长度2-10位||只能输入中文" id="adminNo" type="text">
<span class="ie8 icon-close close hide"></span>
<label class="icon-sucessfill blank hide"></label>
<label class="focus">2-10位，中文真实姓名</label>
<label class="focus valid"></label>
</div>
</div>
<div class="item col-xs-12">
<span class="intelligent-label f-fl"><b class="ftx04">*</b>身份证号：</span>
<div class="f-fl item-ifo">
<input class="txt03 f-r3 required" tabindex="2" data-valid="isNonEmpty||isCard" data-error="身份证号不能为空||身份证号码格式不正确" maxlength="18" id="phone" type="text">
<span class="ie8 icon-close close hide"></span>
<label class="icon-sucessfill blank hide"></label>
<label class="focus">请填写18位有效的手机号码</label>
<label class="focus valid"></label>
</div>
</div>
<div class="item col-xs-12">
<span class="intelligent-label f-fl"> </span>
<div class="f-fl item-ifo">
<a href="javascript:;" class="btn btn-blue f-r3" id="btn_part3">下一步</a>
</div>
</div>
</div>
<div class="part4 text-center" style="display:none">
<h3>恭喜cz82465，您已注册成功，现在开始您的投资之旅吧！</h3>
<p class="c-666 f-mt30 f-mb50">页面将在 <strong id="times" class="f-size18">10</strong> 秒钟后，跳转到 <a href="http://www.jq22.com/demo/jQuery-verify20160304/my.html" class="c-blue">用户中心</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="m-sPopBg" style="z-index:998;"></div>
<div class="m-sPopCon regcon">
<div class="m-sPopTitle"><strong>服务协议条款</strong><b id="sPopClose" class="m-sPopClose" onclick="closeClause()">×</b></div>
<div class="apply_up_content">
<pre class="f-r0"> <strong>同意以下服务条款，提交注册信息</strong>
</pre>
</div>
<center><a class="btn btn-blue btn-lg f-size12 b-b0 b-l0 b-t0 b-r0 f-pl50 f-pr50 f-r3" href="javascript:closeClause();">已阅读并同意此条款</a></center>
</div>
<script>
$(function(){
//第一页的确定按钮
$("#btn_part1").click(function(){
if(!verifyCheck._click()) return;
$(".part1").hide();
$(".part2").show();
$(".step li").eq(1).addClass("on");
});
//第二页的确定按钮
$("#btn_part2").click(function(){
if(!verifyCheck._click()) return;
$(".part2").hide();
$(".part3").show();
});
//第三页的确定按钮
$("#btn_part3").click(function(){
if(!verifyCheck._click()) return;
$(".part3").hide();
$(".part4").show();
$(".step li").eq(2).addClass("on");
countdown({
maxTime:10,
ing:function(c){
$("#times").text(c);
},
after:function(){
window.location.href="my.html";
}
});
});
});
function showoutc(){$(".m-sPopBg,.m-sPopCon").show();}
function closeClause(){
$(".m-sPopBg,.m-sPopCon").hide();
}
</script>
</body>gloab.css
@charset "utf-8";
/*icon set*/
@font-face {
font-family: "iconfont";
src: url('../fonts/iconfont.eot'); /* IE9*/
src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */
url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
[class^="p2p-"], [class*="p2p-"]{font-family: 'iconfont','microsoft yahei';speak: none;font-style: normal;font-variant: normal;text-transform: none;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; position:relative;}
.index .intro [class^="icon-"],.index .intro [class*="icon-"],.icon-phone,.icon-weixin,.icon-weibo,.icon-data,.icon-fabu{font-family: 'iconfont','microsoft yahei';}
.icon-down:before{content: "\e60c"; margin-left:5px;}
.icon-phone:before{content: "\e613";}
.icon-weixin:before{content: "\e614";}
.icon-weibo:before{content: "\e612";}
.p2p-notice:before{content: "\e605";}
.icon-data:before{content: "\e604";}
.icon-safe:before { content: "\e601"; }
.icon-profit:before { content: "\e602"; }
.icon-access:before { content: "\e603"; }
.icon-safe:after{content: "\e600";}
.icon-fabu:before { content: "\e617"; }
a:focus {outline: none;blr:expression(this.onFocus=this.blur());}
/*common set*/
body{ font-family:"microsoft yahei"; min-width:1080px;}
a{ color:#666;}
a:hover{text-decoration:none;color:#0080cb;}
a:hover,a:visited,a:active,a:link{text-decoration:none;}
ul,li{ list-style:none; margin:0; padding:0;}
p{ margin:0;}
h1,h2,h3,h4,h5,h6{margin:0;}
.ho{ height:auto; overflow:hidden;}
em,i{font-style:normal;}
.cursor-pointer{ cursor:pointer;}
/*color*/
.c-white{color:#fff;}.c-whiteq{color:#969696;}
.c-666{color:#666;}.c-333{color:#333;}.c-999{color:#999;}.c-ccc{color:#ccc;}.c-777{ color:#777;}
.c-orange{color:#ff7800;}
.c-blue{color:#1997d7;}.c-blueq{color:#3aabe4;}.c-blued{color:#3c6173;}.c-blueh{color:#2c8abe;}.c-blues{ color:#6ba5c2;}
.c-pink{color:#ff6160;}.c-green{color:#77b716;}
.c-yellow{ color:#ffb324;}
/*background*/
.bgf4{background-color:#f4f4f7;}
.bgf{background-color:#fff;}
/*btn*/
.btn-green{ background-color:#1ed17f;border-color:#1ed17f;color:#fff;}
.btn-green:hover,.btn-green:active:hover,.btn-green:focus{background-color:#19c475;border-color:#19c475;color:#fff;}
.btn-blue{ background-color:#1997d7;border-color:#1997d7;color:#fff;}
.btn-blue:hover,.btn-blue:active:hover,.btn-blue:focus{background-color:#188dc8;border-color:#127db3;color:#fff;}
.btn-pink{ background-color:#ff6160;border-color:#ff6160;color:#fff;}
.btn-pink:hover,.btn-pink:active:hover,.btn-pink:focus{background-color:#f34948;border-color:#f34948;color:#fff;}
.btn-gray{ background-color:#f3f5f7;border-color:#e3e3e3;color:#5f5f5f;}
.btn-gray:hover,.btn-gray:active:hover,.btn-gray:focus{background-color:#e6e7e7;border-color:#e3e3e3;color:#999;}
.btn.disabled,.btn.disable,
.btn[disabled],
fieldset[disabled] .btn,
.btn.disabled:hover,.btn.disable:hover,
.btn[disabled]:hover,
fieldset[disabled] .btn:hover,
.btn.disabled:focus,.btn.disable:focus,
.btn[disabled]:focus,
fieldset[disabled] .btn:focus,
.btn.disabled.focus,.btn.disable.focus,
.btn[disabled].focus,
fieldset[disabled] .btn.focus,
.btn.disabled:active,.btn.disable:active,
.btn[disabled]:active,
fieldset[disabled] .btn:active,
.btn.disabled.active,.btn.disable.active,
.btn[disabled].active,
fieldset[disabled] .btn.active{background-color:#e5e5e5;border-color: #e5e5e5; color:#a9a9a9;}
/*font-size*/
.f-size12{ font-size:12px;}.f-size13{ font-size:13px;}.f-size14{ font-size:14px;}.f-size16{ font-size:16px;}.f-size18{ font-size:18px;}.f-size20{ font-size:20px;}.f-size24{ font-size:24px;}.f-size28{ font-size:28px;}.f-size32{ font-size:32px;}.f-size36{ font-size:36px;}.f-size40{ font-size:40px;}.f-size48{ font-size:48px;}.f-size60{ font-size:60px;}.f-size72{ font-size:72px;}.f-size30{ font-size:30px;}
.f-wpre100{ width:100%;}.f-wpre50{width:50%;}.f-wpre40{width:40%;}
.f-weight-bold{font-weight:700}.f-weight-normal{font-weight:400}
/*margin and padding*/
.f-m0{margin:0;}.f-m5{margin:5px;}.f-m10{margin:10px;}.f-m15{margin:15px;}.f-m20{margin:20px;}
.f-mt0{margin-top:0;}.f-mt3{margin-top:3px;}.f-mt5{margin-top:5px;}.f-mt7{margin-top:7px;}.f-mt10{margin-top:10px;}.f-mt15{margin-top:15px;}.f-mt20{margin-top:20px;}.f-mt25{margin-top:25px;}.f-mt30{margin-top:30px;}.f-mt40{margin-top:40px;}.f-mt50{margin-top:50px;}
.f-mr0{margin-right:0;}.f-mr3{margin-right:3px;}.f-mr5{margin-right:5px;}.f-mr7{margin-right:7px;}.f-mr10{margin-right:10px;}.f-mr15{margin-right:15px;}.f-mr20{margin-right:20px;}.f-mr25{margin-right:25px;}.f-mr30{margin-right:30px;}.f-mr40{margin-right:40px;}.f-mr50{margin-right:50px;}
.f-mb0{margin-bottom:0;}.f-mb3{margin-bottom:3px;}.f-mb5{margin-bottom:5px;}.f-mb7{margin-bottom:7px;}.f-mb10{margin-bottom:10px;}.f-mb15{margin-bottom:15px;}.f-mb20{margin-bottom:20px;}.f-mb25{margin-bottom:25px;}.f-mb30{margin-bottom:30px;}.f-mb40{margin-bottom:40px;}.f-mb50{margin-bottom:50px;}
.f-ml0{margin-left:0;}.f-ml3{margin-left:3px;}.f-ml5{margin-left:5px;}.f-ml7{margin-left:7px;}.f-ml10{margin-left:10px;}.f-ml15{margin-left:15px;}.f-ml20{margin-left:20px;}.f-ml25{margin-left:25px;}.f-ml30{margin-left:30px;}.f-ml40{margin-left:40px;}.f-ml50{margin-left:50px;}
.f-p0{padding:0;}.f-p5{padding:5px;}.f-p10{padding:10px;}.f-p15{padding:15px;}.f-p20{padding:20px;}.f-p30{padding:30px;}
.f-pt0{padding-top:0;}.f-pt3{padding-top:3px;}.f-pt5{padding-top:5px;}.f-pt7{padding-top:7px;}.f-pt10{padding-top:10px;}.f-pt15{padding-top:15px;}.f-pt20{padding-top:20px;}.f-pt25{padding-top:25px;}.f-pt30{padding-top:30px;}.f-pt40{padding-top:40px;}.f-pt50{padding-top:50px;}
.f-pr0{padding-right:0;}.f-pr3{padding-right:3px;}.f-pr5{padding-right:5px;}.f-pr7{padding-right:7px;}.f-pr10{padding-right:10px;}.f-pr15{padding-right:15px;}.f-pr20{padding-right:20px;}.f-pr25{padding-right:25px;}.f-pr30{padding-right:30px;}.f-pr40{padding-right:40px;}.f-pr50{padding-right:50px;}
.f-pb0{padding-bottom:0;}.f-pb3{padding-bottom:3px;}.f-pb5{padding-bottom:5px;}.f-pb7{padding-bottom:7px;}.f-pb10{padding-bottom:10px;}.f-pb15{padding-bottom:15px;}.f-pb20{padding-bottom:20px;}.f-pb25{padding-bottom:25px;}.f-pb30{padding-bottom:30px;}.f-pb40{padding-bottom:40px;}.f-pb50{padding-bottom:50px;}
.f-pl0{padding-left:0;}.f-pl3{padding-left:3px;}.f-pl5{padding-left:5px;}.f-pl7{padding-left:7px;}.f-pl10{padding-left:10px;}.f-pl15{padding-left:15px;}.f-pl20{padding-left:20px;}.f-pl25{padding-left:25px;}.f-pl30{padding-left:30px;}.f-pl40{padding-left:40px;}.f-pl50{padding-left:50px;}
/*border*/
.b-se5{border:1px solid #e5e5e5;}.b-bse5{border-bottom:1px solid #e5e5e5;}.b-tse5{border-top:1px solid #e5e5e5;}.b-lse5{border-left:1px solid #e5e5e5;}.b-rse5{border-right:1px solid #e5e5e5;}.b-bde5{border-bottom:1px dashed #e5e5e5;}.b-tde5{border-top:1px dashed #e5e5e5;}.b-lde5{border-left:1px dashed #e5e5e5;}.b-rde5{border-right:1px dashed #e5e5e5; }
.b-tsf{border-top:1px solid #fff;}
.b-t0{border-top:0;}.b-l0{border-left:0;}.b-b0{border-bottom:0;}.b-r0{border-right:0;}
/*radius*/
.f-r0{ border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;}.f-r3{ border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}.f-r5{ border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}.f-r10{ border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}.f-r20{ border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px;}.f-r100{ border-radius:100%;-moz-border-radius:100%;-webkit-border-radius:100%;}
.position-absolute{ position:absolute;}.position-relative{ position:relative;}.position-fixed{ position:fixed;}
.display-inline{ display:inline-block;}.display-block{ display:block;}.display-none{ display:none;}
/*height*/
.f-h39{height:39px; line-height:39px;}.f-h48{height:48px; line-height:48px;}
.f-italic{ font-style:italic;}.f-normal{ font-style:normal;}
/*text*/
.txt{ border:1px solid #e3e3e3; height:34px;text-indent:5px;}
.txt01,.inputElem{ border:1px solid #e3e3e3; height:28px;line-height:20px; padding:3px 0;text-align:left;text-indent:5px;}
.txt-sm{width:80px}.txt-nm{width:150px;}.txt-lg{width:200px;}
/*step*/
.step{ margin:0 auto; display:block; height:60px;}
.step li{ position:relative; text-align:center;}
.step .line_bg{ height:3px; background:#d9eaf3; display:inline-block; width:50%; top:13px; position:absolute; z-index:1;}
.step .lbg-l{left:0;}
.step .lbg-r{right:0;}
.step .num{ position:relative; z-index:2; background:#fff;width:54px; height:30px;text-align:center; display:inline-block;}
.step .num em,.num i{width:24px; height:24px; display:inline-block; left:15px; top:2px;position:absolute;}
.step .num em{ background:#d9eaf3;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);z-index:2;}
.step .num i{ z-index:3; color:#fff; font-style:normal; font-weight:700; top:4px;}
.step .lbg-txt{ position:relative; color:#b6c6ce; font-size:13px;}
.step .on .lbg-txt{color:#1a97d7;}
.step .on .line_bg,.step .on .num em{ background:#1a97d7}
/*out*/
.m-sPopBg{ position:fixed; background:rgba(0,0,0,0.2); width:100%;height:100%;display:block;z-index:998;top:0;left:0; display:none;}
.m-sPopCon,.m-sImg{position:fixed;z-index:999;-moz-border-radius:2px;-webkit-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;display:none;}
.m-sImg{ width:100%; height:100%;top:0;left:0; text-align:center;}
.m-sPopCon{min-width:420px;min-height:200px;max-width:800px;background:#fff;top:50%;left:50%;}
.m-sPopTitle{ height:60px; line-height:60px; text-align:center; color:#fff; font-size:18px; background:#1997d7;}
.m-sPopClose{ position:absolute;top:18px; right:35px; font-size:24px; color:#fff; cursor:pointer;}
.m-sPopClose:hover{ opacity:.5; filter:alpha(opacity=50);}
.m-sImg .m-sPopClose{background: #000;display: inline-block;width: 60px;height: 60px;text-align: right;line-height: 60px;right: 0;top: 0;border-radius: 100%;margin-top: -15px;margin-right: -15px; font-size:36px; z-index:1000;}
.m-sImg .m-sPopClose:after{ left:6px; top:5px;}
.m-sPopText{ padding:30px 0;}
.m-sPopCon .tips{ font-size:14px; text-align:center; padding:30px;}
.m-sPopCon .m-btns{ margin-top:30px; text-align:center;}
.m-sPopCon .m-btns .btn{ width:100px; height:35px; line-height:35px; padding:0;}
.m-sPopCon .m-btns .btn-gray{ background:#c9c9c9;border-color:#c9c9c9; color:#fff;}
.m-sPopCon .m-btns .btn-gray:hover{ background:#c0c0c0; border-color:#c0c0c0;}
/**/
.success{color:#7abd54; display:inline-block;}
.success strong,.success p{ font-size:12px; line-height:16px;}
.success p{ color:#666;}
.success p a{ color:#2f82eb;}
.success .success-info{ margin-left:25px;}
.success .icon-sucessfill{ width:16px; height:16px; font-size:16px;}
.success .icon-sucessfill:after{content: "\e605"; color:#7abd54}
.success .icon-sucessfill:before{content: "\e609"; color:#fff; position:absolute;z-index:2;left:0; top:0;}
.success.big .icon-sucessfill{ font-size:62px;}
.success.big .success-info{ margin-left:75px;}
.success.big strong{ font-size:18px; line-height:40px;}
.success.big p{ font-size:14px;}
.success.um .icon-sucessfill{ font-size:36px;}
.success.um .success-info{ margin-left:30px;}
.success.um strong{ font-size:16px; line-height:36px;}
.success.error{ color:#ff0000;}
.success.error .icon-sucessfill:after{color:#ff0000;}
.success.error .icon-sucessfill:before{content: "\e608";}
/*pagination*/
.pagination{padding:40px 0;}
.pagination a{ display:inline-block; height:33px; padding: 0px 13px; background:#fff; border:1px solid #e5e5e5; line-height:33px; text-align:center; min-width:33px; font-size:13px; margin:0 5px; color:#666;}
.pagination a:hover,.pagination a.current{ background:#1997d7; border-color:#1997d7; color:#fff;}
.pagination a.more,.pagination a.more:hover{ background:none; border:0; color:#666; cursor:default;}
.pagination a.disabled{background-color:#e5e5e5;border-color: #e5e5e5; color:#a9a9a9;}
.tabcut li{ float:left;}
input[readonly],input[disabled]{ background:#f6f6f6;}index.css
@charset "utf-8";
/* CSS Document */
input:focus {outline: none}
.min-width{min-width:1080px;}
.main{width:1080px;min-width:1080px;margin:0 auto;}
/*login and reg*/
label{ margin:0; font-weight:normal;}
.login-box-pan{ padding:50px 80px 50px 30px;}
.login-info{ width:290px;}
.login-info h2{ border-bottom:2px solid #eeeff3; color:#3498db; font-size:18px; font-weight:700; line-height:38px; width:100%;}
.login-info h2 span{ border-bottom:2px solid #3498db; height:38px; display:inline-block; padding:0 10px;position:relative; bottom:-2px;}
.login-info .item{ height:70px; width:290px;}
.login-info .item-input{ border:1px solid #e5e5e5; height:38px; line-height:24px; padding:7px 10px;}
.txt02{ height:24px; line-height:24px; border:0; float:left; font-size:13px;}
.login-info .item-input .txt02{ width:220px; float:left;}
.login-info .item-tips{ line-height:30px; font-size:12px; color:#ee1615;}
.login-info img{ width:70px; height:30px; margin:2px 10px 0;}
.f-h34{ height:34px; line-height:34px;}.f-h24{height:24px; line-height:24px;}
.login-box a.c-blue:hover{ color:#ff7d27; text-decoration:underline;}
.reg-box-pan{ padding:40px 40px 50px; width:100%;}
.txt03{width:270px;line-height: 16px;padding:9px 10px;border: 1px solid #cccccc;float: none;font-size: 14px;font-family: arial,"宋体";color: #999;overflow: hidden;}
.reg-box .item {height:68px;line-height:34px;position: relative;z-index:5;}
.reg-box .intelligent-label {width:100px;text-align: right;font-size: 14px;color: #666;padding-right: 10px;}
.reg-box .intelligent-label b{font-family: "????";margin-right: 5px;font-weight: normal; color:red;}
.reg-box .item .item-ifo{position: relative;width: 270px;}
.reg-box .txt02{width:270px;line-height: 16px;padding:9px 10px;border: 1px solid #cccccc;float: none;font-size: 14px;font-family: arial,"宋体";color: #999;overflow: hidden;}
.reg-box .txt03.v_error{border-color:#FF0000;}
.reg-box .txt03:focus{border-color:#1a97d7;}
.reg-box .blank {width:16px;height:16px; font-size:16px;position: absolute;left:280px;top:11px;float: none; color:#7abd54}
.reg-box .close{position: absolute;top:5px;right:25px;font-size: 24px;}
.reg-box .focus,.reg-box .focusa,.reg-box .error{line-height:34px;height:34px;position: absolute;top: 0px;left:280px;width:270px;padding: 0 5px;z-index:3; font-weight:normal; font-size:12px; color:#999}
.reg-box .focus span,.reg-box .error span{ line-height:16px; display:block; padding:3px 0;}
.reg-box .focus{color: #999;}
.reg-box .valid{color: #f00;}
.reg-box .strength {color: #999;line-height: 22px;padding-right: 10px;clear: both;float: none;position: absolute;top:39px;right: -9px; display:none}
.reg-box .strength b {float: left;width: 108px;height:16px;overflow: hidden;margin-top: 5px; font-weight:400;}
.reg-box .strength b i{ font-style:normal; font-size:10px; width:34px; height:16px;line-height:16px; display:inline-block; float:left; background:#dbdbdb; text-align:center; margin-left:1px; color:#fff;}
.reg-box .strength b i.on{ background:#ff6160}
.reg-box .btn-blue{ font-size:18px; height:44px; line-height:44px; padding:0; width:270px;}
.reg-box .btn-gray{ height:34px; line-height:34px; padding:0 12px;}
.reg-box .part1,.reg-box .part2,.reg-box .part3{ padding-left:150px;}
.regcon {width: 482px;height:360px;margin-left: -241px;margin-top: -180px;background: #fff;}
.regcon pre {border: 1px solid #B2B2B2;height: 240px;margin: 10px;overflow-x: hidden;overflow-y: scroll;padding: 5px;resize: both;width: 450px;background: #fff;font-size: 12px;color: #333;line-height: 1.7em;}
.showpwd{ display:inline-block; width:16px; height:16px; background:url(../images/showPwd.png) no-repeat center center; background-size:16px 16px; position:absolute; top:8px;right:10px; cursor:pointer;}
.showpwd.hidepwd{ background-image:url(../images/hidePwd.png);}
register.js
/**
* 功能说明: 输入验证
* @author: vivy <lizhizyan@qq.com>
* @time: 2015-9-25 16:15:30
* @version: V1.1.0
* @使用方法:
* <input class="required" type="text" data-valid="isNonEmpty||isEmail" data-error="email不能为空||邮箱格式不正确" id="" />
* 1、需要验证的元素都加上【required】样式
* 2、@data-valid 验证规则，验证多个规则中间用【||】隔开，更多验证规则，看rules和rule，后面遇到可继续增加
* 3、@data-error 规则对应的提示信息，一一对应
*
* @js调用方法：
* verifyCheck({
* formId:'verifyCheck', <验证formId内class为required的元素
* onBlur:null, <被验证元素失去焦点的回调函数>
* onFocus:null, <被验证元素获得焦点的回调函数>
* onChange: null, <被验证元值改变的回调函数>
* successTip: true, <验证通过是否提示>
* resultTips:null, <显示提示的方法，参数obj[当前元素],isRight[是否正确提示],value[提示信息]>
* clearTips:null, <清除提示的方法，参数obj[当前元素]>
* code:true <是否需要手机号码输入控制验证码及点击验证码倒计时,目前固定手机号码ID为phone,验证码两个标签id分别为time_box，resend,填写验证框id为code>
* phone:true <改变手机号时是否控制验证码>
* })
* $("#submit-botton").click(function(){ <点击提交按钮时验证>
* if(!common.verify.btnClick()) return false;
* })
*
* 详细代码请看register.src.js
*/
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(k($){n h,F=Y,E;n j=k(a){a=$.2n(D.1e,a||{});E=a;u(1u D()).16(a)};k D(f){n g={R:/^1(3\\d|5[0-35-9]|8[2L-9]|2H)\\d{8}$/,2f:/^[\\1b-\\1t-1s-Z][\\1b-\\1t-1s-2x-9\\s-,-.]*$/,2r:/^[\\1b-\\1t-1s-Z][\\1b-\\1t-1s-2x-3d]*$/,2o:/^[\\2E-\\2C]+$/,2i:/^((1[1-5])|(2[1-3])|(3[1-7])|(4[1-6])|(5[0-4])|(6[1-5])|3w|(8[12])|3l)\\d{4}(((((19|20)((\\d{2}(0[13-9]|1[2w])(0[1-9]|[12]\\d|30))|(\\d{2}(0[2q]|1[1o])31)|(\\d{2}1o(0[1-9]|1\\d|2[0-8]))|(([24][26]|[2p][2g]|0[2c])29)))|3y)\\d{3}(\\d|X|x))|(((\\d{2}(0[13-9]|1[2w])(0[1-9]|[12]\\d|30))|(\\d{2}(0[2q]|1[1o])31)|(\\d{2}1o(0[1-9]|1\\d|2[0-8]))|(([24][26]|[2p][2g]|0[2c])29))\\d{3}))$/,2t:/^[0-9]*$/,s:\'\'};q.23={3v:k(a,b){b=b||" ";m(!a.B)u b},3A:k(a,b,c){c=c||" ";m(a.B<b)u c},2D:k(a,b,c){c=c||" ";m(a.B>b)u c},2K:k(a,b,c){c=c||" ";m(a!==$("#"+b).G())u c},3s:k(a,b,c){c=c||" ";n d=25(b.1h(\'-\')[0]);n e=25(b.1h(\'-\')[1]);m(a.B<d||a.B>e)u c},2B:k(a,b,c){c=c||" ";n r=j.1G(a);m(b>4)b=3;m(r<b)u c},2G:k(a,b){b=b||" ";m(!g.R.O(a))u b},2M:k(a,b){b=b||" ";m(!g.2f.O(a))u b},3b:k(a,b){b=b||" ";m(!g.2t.O(a))u b},3c:k(a,b){b=b||" ";m(!g.2r.O(a))u b},3e:k(a,b){b=b||" ";m(!g.2o.O(a))u b},3h:k(a,b){b=b||" ";m(!g.2i.O(a))u b},3j:k(c,d,e){d=d||" ";n a=$(e).w(\'T:3u\').B,b=$(e).w(\'.P\').B;m(!a&&!b)u d}}};D.1F={16:k(b){q.1H=b;q.2A=$(\'#\'+b.1r).w(\'.1D:1n\');n c=I;n d=q;m(b.2l){$("#17").18(k(){$("#N").M("Y s后可重发");d.15()})}$(\'1k\').P({3i:k(a){d.1I($(q));m(b.R&&$(q).y("1i")==="R")d.1O($(q));b.1P?b.1P($(q)):\'\'},V:k(a){b.1w?b.1w($(q)):$(q).C().w("1x.V").2e(".K").Q("v").2j(".K").H("v")&&$(q).C().w(".1y").H("v")&&$(q).C().w(".W").H("v")},2k:k(a){m(b.R&&$(q).y("1i")==="R")d.1O($(q))},2J:k(a){b.1z?b.1z($(q)):\'\'}},"#"+b.1r+" .1D:1n");$(\'1k\').P("18",".W",k(){n p=$(q).C(),T=p.w("T");T.G("").V()})},1I:k(a){n b=a.y(\'J-K\');m(b===1A)u I;n c=b.1h(\'||\');n d=a.y(\'J-1j\');m(d===1A)d="";n e=d.1h("||");n f=[];1B(n i=0;i<c.B;i++){f.1p({2s:c[i],22:e[i]})};u q.2v(a,f)},2v:k(a,b){n d=q;1B(n i=0,1q;1q=b[i++];){n e=1q.2s.1h(\':\');n f=1q.22;n g=e.3m();e.3n(a.G());e.1p(f);e.1p(a);n c=d.23[g].3r(a,e);m(c){E.1f?E.1f(a,I,c):j.1E(a,I,c);u I}}E.2d?(E.1f?E.1f(a,S):j.1E(a,S)):j.1v(a);u S},15:k(){n a=q;$("#17").M("发送验证码").v();$("#N").M("10 s后可重发").L();m(F===0){27(h);F=Y;n b=/^1([^28])\\d{9}$/;m(!b.O($("#R").G())){$("#N").M("发送验证码")}14{$("#17").L();$("#N").v()}u}$("#N").M(F+" s后可重发");F--;h=2a(k(){a.15()},2b)},1O:k(a){n b=q;m(a.G().B!=11){$("#17").v();$("#N").L();m(F===Y)$("#N").M("发送验证码");$("#1J").G("");q.1H.1K?q.1H.1K($("#1J")):j.1v($("#1J"));u}n c=/^1([^28])\\d{9}$/;m(!c.O(a.G()))u I;m(F===Y){$("#17").L();$("#N").v()}14{$("#17").v();$("#N").L()}}};j.1L=k(c){c=c||E.1r;n d=$("#"+c).w(\'.1D:1n\'),2F=q,U=S,t=1u D(),r=[];$.2I(d,k(a,b){U=t.1I($(b));m(U)r.1p(U)});m(d.B!==r.B)U=I;u U};j.1v=k(a){a.C().w(".1y").H("v");a.C().w(".K").H("v");a.Q("1M")};j.1E=k(a,b,c){a.C().w("1x.V").2e(".K").H("v").2j(".V").Q("v");a.C().w(".W").H("v");a.Q("1M");c=c||"";m(c.B>21)c="<2h>"+c+"</2h>";n o=a.C().w("1x.K");m(!b){o.H("1j");a.H("1M");m($.1N(a.G()).B>0)a.C().w(".W").Q("v")}14{a.C().w(".1y").Q("v")}o.M("").2N(c)};j.2O=k(a){n b=/[\\1b-\\2P]|[\\2Q-\\2R]|[\\2S-\\2T]|[\\2U-\\2V]|[\\2W-\\2X]|[\\2Y-\\2Z]|[\\32-\\33]|[\\34-\\36]|[\\37]|[\\38]/g;m(b.O(a))u a.1g(b).B;14 u 0};j.1G=k(a){n b=0;m(a.1g(/[a-z]/g)){b++}m(a.1g(/[A-Z]/g)){b++}m(a.1g(/[0-9]/g)){b++}m(a.1g(/(.[^a-39-3a-Z])/g)){b++}m(b>4){b=4}m(b===0)u I;u b};D.1e={1r:\'1d\',1P:1l,1w:1l,1z:1l,2d:S,1f:1l,1K:1l,2l:S,R:I};1Q.1d=$.1d=j})(1R);(k($){n f;n g=k(){u(1u D()).16()};k D(a){};D.1F={16:k(){n b=q;$(\'1k\').P({18:k(a){b.1L($(q))}},".3f:1n")},1L:k(a){n c=a.y(\'J-3g\');m(c===1A)u I;n d=$("#"+c),2m=!d.y("1S")?"":d.y("1S"),1a=!d.G()?"":d.G(),1c=d.y("1c")==="1T"?"M":"1T",b=d.C().w("b.3k"),1m=b.B===0?I:S;n s=d.y("1U")?" 1U=\'"+d.y("1U")+"\'":"";s+=d.y("J-K")?" J-K=\'"+d.y("J-K")+"\'":"";s+=d.y("J-1j")?" J-1j=\'"+d.y("J-1j")+"\'":"";s+=d.y("1V")?" 1V=\'"+d.y("1V")+"\'":"";n e=\'<T 3o 1c="\'+1c+\'" 1S="\'+2m+\'" 1a="\'+1a+\'" 1i="\'+c+\'"\'+s+\' />\';m(1c==="M"){m(1m)b.v();d.C().w(".3p-W.W").H("v");d.3q("1i").v();d.1W(e);a.H("1X")}14{d.2u("T").y("1i",c).G(1a).L();m(1m&&$.1N(1a)===""){d.2u("T").v();b.L()}d.3t();a.Q("1X")};$(\'1k\').P("18","#"+c,k(){$(q).C().w(".1X").18();m(1m&&$.1N($(q).G())===""){d.L();b.v()}d.V()})}};D.1e={};1Q.1Y=$.1Y=g})(1R);(k($){n b,F,E;n d=k(a){a=$.2n(D.1e,a||{});E=a;d.1Z();u(1u D()).16()};k D(a){};D.1F={16:k(){F=E.1C;q.15()},15:k(){n a=q;m(F===0){d.1Z();E.1W();F=E.1C;u}F--;E.2y(F);b=2a(k(){a.15()},2b)}};d.1Z=k(){27(b)};D.1e={1C:Y,3x:0,2y:k(c){},1W:k(){}};1Q.2z=$.2z=d})(1R);$(k(){1Y();1d();$(\'1k\').P("2k","#1T",k(){n t=$(q).G(),o=$(q).C().w(".3z");m(t.B>=6){o.L();n l=1d.1G(t);o.w("b i").Q("P");1B(n i=0;i<l;i++){o.w("b i").3B(i).H("P")}}14{o.v()}})});',62,224,'||||||||||||||||||||function||if|var|||this||||return|hide|find||attr|||length|parent|require|opt|timerC|val|addClass|false|data|valid|show|text|time_box|test|on|removeClass|phone|true|input|result|focus|close||60||||||else|_sendVerify|_init|verifyYz|click||value|u4E00|type|verifyCheck|defaults|resultTips|match|split|id|error|body|null|isB|visible|02|push|rule|formId|zA|u9FA5a|new|_clearTips|onFocus|label|blank|onChange|undefined|for|maxTime|required|_resultTips|prototype|pwdStrong|config|formValidator|verifyNo|clearTips|_click|v_error|trim|_change|onBlur|window|jQuery|class|password|name|placeholder|after|hidepwd|togglePwd|_clear|||errorMsg|rules|13579|parseInt||clearTimeout|01269|0229|setTimeout|1000|48|successTip|not|company|048|span|card|siblings|keyup|code|cls|extend|zh|2468|13578|uname|strategy|int|prev|_add|012|Z0|ing|countdown|getInputs|level|u9fa5|maxLength|u4e00|self|isPhone|47|each|change|isRepeat|025|isCompany|append|textChineseLength|u9FA5|u3001|u3002|uFF1A|uFF1F|u300A|u300F|u3010|u3015|u2013|u201D|||uFF01|uFF0E|u3008||u3009|u2026|uffe5|z0|9A|isInt|isUname|9_|isZh|showpwd|eye|isCard|blur|isChecked|placeTextB|91|shift|unshift|readonly|icon|removeAttr|apply|between|remove|checked|isNonEmpty|71|minTime|20000229|strength|minLength|eq'.split('|'),0,{})); <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/production/markdown_views-ea0013b516.css">
</div>
2018-04-25更新
今天自己手动要增加了一个email验证，现在总结一下添加步骤：第一步，表单中的input添加代码“
<input id="email" name="email" type="text" class="txt03 f-r3 required" tabindex="4" data-valid="isNonEmpty||isEmail" data-error="email不能为空||邮箱格式不正确" value="${param.email}" />
”第二步，register.src文件中99行附近添加isEmail: function(value, errorMsg) {
errorMsg=errorMsg||" ";
if (!rule.email.test(value)) return errorMsg;
}
第三步，register.js文件中45行附近添加邮箱的正则表但是“email: /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/,”
第四步，register.js文件中102行附近添加isEmail: function(a, b) {
b = b || " ";
if (!g.email.test(a)) return b
},
至此，一个新的验证添加成功！
