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
},
至此,一个新的验证添加成功!
JQuery完整验证&密码的显示与隐藏&验证码的更多相关文章
- js控制密码的显示与隐藏实例
原理是建立2个input,一个type是text,一个type是password.在点击按钮时,这两input个的显示状态与val()的值在切换. html: <!DOCTYPE html> ...
- Android文本输入框(EditText)切换密码的显示与隐藏
package cc.c; import android.app.Activity; import android.os.Bundle; import android.text.Selection; ...
- IOS swift实现密码的显示与隐藏切换
最近做项目遇到一个需要做密码的显示与隐藏功能,简单从功能上讲是比较简单的,但是,ios有个恶心的BUG,就是在切换显示密码后再隐藏密码时输入就被清空了,这个非常不友好,为了解决这个问题,我在网上找了相 ...
- JS实现登录页密码的显示和隐藏功能
在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能,其实实现原理很简单,通过点击事件来改变input的type类型,具体过程看代码: 在没给大家分享实现代码之前,先给大家展示下效 ...
- js密码修改显示与隐藏效果
一.添加input框 <form class="login_form"> <input class="password inputpwd" i ...
- Android之密码的显示与隐藏
很多应用都是显示与隐藏密码的功能. 之前的项目都没这个功能要求,也没有专门研究这个.最近项目有加这个功能,我这里也刚好整理一下. 我的思路是设置EditText的InputType.代码如下: if ...
- JQuery采纳CSS实现DOM显示和隐藏要素
今天参加了Code Review活动.阅读编写代码的同事,感到满足当前功能的实现,但是从长远来看,,无论角度还是从代码重用是来看显然不佳维修点. 有什么需要看的权利.通过选择不同的选项下拉框需求,为了 ...
- el-input 标签中密码的显示和隐藏
效果展示: 密码隐藏: 密码显示: 代码展示: 一:<el-input>标签代码 <el-form-item label="密码" prop="pass ...
- 利用 jQuery 来验证密码两次输入是否相同
html <div class="row"> <div class="panel panel-info"> <div class= ...
随机推荐
- 解决springmvc 中文post请求乱码的过滤器配置
在web.xml中添加如下配置 <!-- 过滤器 解决post乱码 --> <filter> <filter-name>characterEncodingFilte ...
- spring JdbcTemplate最基本的使用
package com.com.jdbctemplate; import org.springframework.jdbc.core.JdbcTemplate; import org.springfr ...
- Flask中的session机制
cookie和sessioncookie:网站中,http请求是无状态的,第一次和服务器连接后并且登陆成功后,第二次请求服务器依然不能知道当前请求是哪个用户.cookie的出现就是解决了改问题,第一次 ...
- 关于memset的使用
有些oj上的G++支持 cstdio的memset,有些则支持stdio.h中的memset(划掉) 这两个头文件关系比较复杂, 具体我也说不清...按照c++文档中的说法,stdio已经deprec ...
- Vue.js NPM 安装方法
由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像. npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v ...
- 【python之路18】内置函数,补充请看【python之路46】
1.abs(number)表示某个数字的绝对值 print(abs(-123)) #打印出123 2.all(iterable) 表示可迭代的参数全部为True那么返回True,否则返回False r ...
- Ajax--解析JSON数据与解析XML数据
一.Ajax解析JSON数据 nav.json(json数据) [ { "link":"http://www.jd.com", "src": ...
- The method getTextContent() is undefined ?
晚上下班的时候,把班上写了半截的代码带了回来.结果回到家后出乎意料的是回来的时候将代码导入eclipse后,下面这行代码就直接报错了,显示 getTextContent()未定义 . ((Elemen ...
- WatchKit编程指南:概览--Watch应用的体系结构
Apple Watch应用程序包含两个部分:Watch应用和WatchKit应用扩展.Watch应用驻留在用户的Apple Watch中,只含有故事板和资源文件,要注意它并不包含任何代码.而Watch ...
- 阿里云MVP北京闭门会圆满落幕 多把“利剑”助力开发者破阵蜕变
摘要: 从传统制造业到新零售,从人工智能到新金融,阿里云MVP正在成为中国乃至全球各行各业数字化转型的中坚力量.当这群技术先锋者与阿里核心技术力量汇聚在一起,一场无与伦比的思想碰撞就此展开. 3月21 ...