jQuery扫码/手机号码登录框切换代码

jQuery大气通用的登录框切换页面，微信扫码，账户密码，手机号码三种切换登录功能。支持一键qq登录，微信登录，微博登录功能等。这是一款非常实用的多功能登录框切换代码。

使用方法：

1、head引入css文件

<linkhref="css/style.css"rel="stylesheet"type="text/css"/>

2、head引入js文件

<scripttype="text/javascript"src="js/jquery.min.js"></script>

3、body编写HTML代码

<divclass="aui-register-popup"><divclass="aui-register-box"><divclass="aui-register-link"><ahref="javascript:;"class="fl">返回首页</a><ahref="javascript:;"class="fr">已有账号？去登录</a></div><divclass="aui-register-logo"><imgsrc="images/logo.png"alt=""></div><divclass="aui-register-form"id="verifyCheck"><divclass="register-wrap"id="register-wrap"><divclass="register"id="register"><divclass="register-top"id="reg-top"><h2class="normal"id="normal">普通登录</h2><h2class="nopassword"id="nopw">手机无密码登录</h2><aid="qrcode"href="#"><spanclass="aui-tag-size">扫码登录</span></a></div><!–账户密码登录–><divclass="register-con"id="rc"><divclass="aui-register-form-item"><inputtype="text"name="username"maxlength="20"placeholder="账户名"class="txt03f-r3required"tabindex="3"data-valid="isNonEmpty||between:3-20||isUname"data-error="<iclass='icon-tips'></i>您还没有输入账户名||<iclass='icon-tips'></i>用户名长度3-20位||<iclass='icon-tips'></i>只能输入字母、数字、且以中文或字母开头"id="adminNo"><labelclass="focusvalid"></label></div><divclass="aui-register-form-item"><inputtype="password"name="password"placeholder="密码"id="password"maxlength="20"class="txt04f-r3required"tabindex="4"style="ime-mode:disabled;"onpaste="returnfalse"autocomplete="off"data-valid="isNonEmpty||between:6-20||level:2"data-error="<iclass='icon-tips'></i>密码太短，最少6位||<iclass='icon-tips'></i>密码长度6-20位||<iclass='icon-tips'></i>密码太简单，有被盗风险，建议字母+数字的组合"><labelclass="focusvalid"></label></div><divclass="aui-register-form-item"><pclass="aui-for-pwd"><aclass=""href="#">忘记密码</a></p><inputid="aui-btn-reg"class="aui-btn-reg"placeholder=""readonly="readonly"value="登录"></div><divclass="aui-protocol">登录即同意<ahref="#">《站长图库使用协议》</a>&<ahref="#">《隐私权条款》</a></div><divclass="aui-thirds"><ahref="#"><iclass="aui-qq-img"></i><i>QQ登录</i></a><ahref="#"><iclass="aui-wx-img"></i><i>微信登录</i></a><ahref="#"><iclass="aui-wb-img"></i><i>微博登录</i></a><divclass="clear"></div></div></div><!–手机动态码登录–><divclass="login-con"id="lc"><divclass="aui-register-form-item"><inputtype="text"name="phone"placeholder="手机号码"class="txt01f-r3required"keycodes="tel"tabindex="1"data-valid="isNonEmpty||isPhone"data-error="<iclass='icon-tips'></i>请输入手机号||<iclass='icon-tips'></i>手机号码格式不正确"maxlength="11"id="phone"><labelclass="focusvalid"><divclass="msg"style="display:none"><iclass='icon-tips'></i>您还未输入手机号</div></label><spanclass="aui-get-codebtnbtn-grayf-r3f-ml5f-size13"id="time_box"disabledstyle="display:none;"></span><spanclass="aui-get-codebtnbtn-grayf-r3f-ml5f-size13"id="verifyYz">获取动态码</span></div><divclass="aui-register-form-item"><inputtype="text"placeholder="动态码"maxlength="6"id="verifyNo"class="txt02f-r3f-flrequired"tabindex="2"data-valid="isNonEmpty||isInt"data-error="<iclass='icon-tips'></i>请填写正确的手机动态码||<iclass='icon-tips'></i>请填写6位手机动态码"><labelclass="focusvalid"></label></div><divclass="aui-register-form-item"><inputid="aui-btn-reg1"class="aui-btn-reg"placeholder=""readonly="readonly"value="登录"></div><divclass="aui-protocol">登录即同意<ahref="#">《站长图库使用协议》</a>&<ahref="#">《隐私权条款》</a></div><divclass="aui-thirds"><ahref="#"><iclass="aui-qq-img"></i><i>QQ登录</i></a><ahref="#"><iclass="aui-wx-img"></i><i>微信登录</i></a><ahref="#"><iclass="aui-wb-img"></i><i>微博登录</i></a><divclass="clear"></div></div></div><!–扫码登录–><divclass="saoma"id="sm"><divclass="screen-tu"id="screen"><spanclass="aui-tag-size">密码登录</span></div><divclass="aui-text-item"><h1>1秒即登录，方便又安全</h1></div><divclass="qr-code"><spanclass="tips_img"></span><imgsrc="images/code.png"alt=""></div><divclass="aui-tab-footer"><p>站长图库扫码登录，同步账户信息|<ahref="#">下载APP</a></p></div></div></div></div><divclass="clearfix"></div></div><divclass="aui-register-bottom"><a>©zzTuKu.com</a><ahref="#">联系客服</a><ahref="#">帮助中心</a><divclass="clear"></div></div></div></div><scripttype="text/javascript"src="js/login.js"></script><scripttype="text/javascript">$(function(){$("#aui-btn-reg").click(function(){if(!verifyCheck._click())return;alert('恭喜你！登录成功')});$("#aui-btn-reg1").click(function(){if(!verifyCheck._click())return;alert('恭喜你！登录成功')});});</script>