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

 3148去下载

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


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


使用方法:

1、head引入css文件

  1. <link href="css/style.css" rel="stylesheet" type="text/css" />

2、head引入js文件

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

3、body编写HTML代码

  1. <div class="aui-register-popup">
  2.     <div class="aui-register-box">
  3.         <div class="aui-register-link">
  4.             <a href="javascript:;" class="fl">返回首页</a>
  5.             <a href="javascript:;" class="fr">已有账号?去登录</a>
  6.         </div>
  7.         <div class="aui-register-logo">
  8.             <img src="images/logo.png" alt="">
  9.         </div>
  10.         <div class="aui-register-form" id="verifyCheck">
  11.             <div class="register-wrap" id="register-wrap">
  12.                 <div class="register" id="register">
  13.                     <div class="register-top" id="reg-top">
  14.                         <h2 class="normal" id="normal">普通登录</h2>
  15.                         <h2 class="nopassword" id="nopw">手机无密码登录</h2>
  16.                         <a id="qrcode" href="#">
  17.                             <span class="aui-tag-size">扫码登录</span>
  18.                         </a>
  19.                     </div>
  20.                     <!--账户密码登录-->
  21.                     <div class="register-con" id="rc">
  22.                         <div class="aui-register-form-item">
  23.                             <input type="text" name="username" maxlength="20"  placeholder="账户名" class="txt03 f-r3 required" tabindex="3" data-valid="isNonEmpty||between:3-20||isUname" data-error="<i class='icon-tips'></i>您还没有输入账户名||<i class='icon-tips'></i>用户名长度3-20位||<i class='icon-tips'></i>只能输入字母、数字、且以中文或字母开头" id="adminNo">
  24.                             <label class="focus valid"></label>
  25.                         </div>
  26.                         <div class="aui-register-form-item">
  27.                             <input type="password" name="password" placeholder="密码" id="password" maxlength="20" class="txt04 f-r3 required" tabindex="4" style="ime-mode:disabled;" onpaste="return  false" autocomplete="off" data-valid="isNonEmpty||between:6-20||level:2" data-error="<i class='icon-tips'></i>密码太短,最少6位||<i class='icon-tips'></i>密码长度6-20位||<i class='icon-tips'></i>密码太简单,有被盗风险,建议字母+数字的组合">
  28.                             <label class="focus valid"></label>
  29.  
  30.                         </div>
  31.                         <div class="aui-register-form-item">
  32.                             <p class="aui-for-pwd">
  33.                                 <a class="" href="#">忘记密码</a>
  34.                             </p>
  35.                             <input id="aui-btn-reg" class="aui-btn-reg" placeholder=""  readonly="readonly" value="登录" >
  36.                         </div>
  37.                         <div class="aui-protocol">
  38.                             登录即同意
  39.                             <a  href="#">《站长图库使用协议》</a>&
  40.                             <a  href="#">《隐私权条款》</a>
  41.                         </div>
  42.                         <div class="aui-thirds">
  43.                             <a href="#">
  44.                                 <i class="aui-qq-img"></i>
  45.                                 <i>QQ登录</i>
  46.                             </a>
  47.                             <a href="#">
  48.                                 <i class="aui-wx-img"></i>
  49.                                 <i>微信登录</i>
  50.                             </a>
  51.                             <a href="#">
  52.                                 <i class="aui-wb-img"></i>
  53.                                 <i>微博登录</i>
  54.                             </a>
  55.                             <div class="clear"></div>
  56.                         </div>
  57.                     </div>
  58.  
  59.                     <!--手机动态码登录-->
  60.                     <div class="login-con" id="lc">
  61.                         <div class="aui-register-form-item">
  62.                             <input type="text" name="phone" placeholder="手机号码" class="txt01 f-r3 required" keycodes="tel" tabindex="1" data-valid="isNonEmpty||isPhone" data-error="<i class='icon-tips'></i>请输入手机号||<i class='icon-tips'></i>手机号码格式不正确" maxlength="11" id="phone">
  63.                             <label class="focus valid"><div class="msg" style="display:none"><i class='icon-tips'></i>您还未输入手机号</div></label>
  64.                             <span class="aui-get-code btn btn-gray f-r3 f-ml5 f-size13" id="time_box" disabled style="display:none;"></span>
  65.                             <span class="aui-get-code btn btn-gray f-r3 f-ml5 f-size13" id="verifyYz" >获取动态码</span>
  66.                         </div>
  67.                         <div class="aui-register-form-item">
  68.                             <input type="text" placeholder="动态码" maxlength="6" id="verifyNo" class="txt02 f-r3 f-fl required" tabindex="2" data-valid="isNonEmpty||isInt" data-error="<i class='icon-tips'></i>请填写正确的手机动态码||<i class='icon-tips'></i>请填写6位手机动态码">
  69.                             <label class="focus valid"></label>
  70.                         </div>
  71.                         <div class="aui-register-form-item">
  72.                             <input id="aui-btn-reg1" class="aui-btn-reg" placeholder=""  readonly="readonly" value="登录" >
  73.                         </div>
  74.                         <div class="aui-protocol">
  75.                             登录即同意
  76.                             <a  href="#">《站长图库使用协议》</a>&
  77.                             <a  href="#">《隐私权条款》</a>
  78.                         </div>
  79.                         <div class="aui-thirds">
  80.                             <a href="#">
  81.                                 <i class="aui-qq-img"></i>
  82.                                 <i>QQ登录</i>
  83.                             </a>
  84.                             <a href="#">
  85.                                 <i class="aui-wx-img"></i>
  86.                                 <i>微信登录</i>
  87.                             </a>
  88.                             <a href="#">
  89.                                 <i class="aui-wb-img"></i>
  90.                                 <i>微博登录</i>
  91.                             </a>
  92.                             <div class="clear"></div>
  93.                         </div>
  94.                     </div>
  95.  
  96.  
  97.                     <!-- 扫码登录 -->
  98.                     <div class="saoma" id="sm">
  99.                         <div class="screen-tu" id="screen">
  100.                             <span class="aui-tag-size">密码登录</span>
  101.                         </div>
  102.                         <div class="aui-text-item">
  103.                             <h1>1秒即登录,方便又安全</h1>
  104.                         </div>
  105.                         <div class="qr-code">
  106.                             <span class="tips_img"></span>
  107.                             <img src="images/code.png" alt="">
  108.                         </div>
  109.                         <div class="aui-tab-footer">
  110.                             <p>站长图库扫码登录,同步账户信息 | <a href="#">下载APP</a></p>
  111.                         </div>
  112.  
  113.                     </div>
  114.                 </div>
  115.             </div>
  116.             <div class="clearfix"></div>
  117.         </div>
  118.         <div class="aui-register-bottom">
  119.             <a>© zzTuKu.com</a>
  120.             <a href="#">联系客服</a>
  121.             <a href="#">帮助中心</a>
  122.             <div class="clear"></div>
  123.         </div>
  124.     </div>
  125. </div>
  126.  
  127.  
  128. <script type="text/javascript" src="js/login.js"></script>
  129. <script type="text/javascript">
  130. $(function() {
  131.     $("#aui-btn-reg").click(function() {
  132.         if (!verifyCheck._click()) return;
  133.         alert('恭喜你!登录成功')
  134.  
  135.     });
  136.     $("#aui-btn-reg1").click(function() {
  137.         if (!verifyCheck._click()) return;
  138.         alert('恭喜你!登录成功')
  139.  
  140.     });
  141. });
  142. </script>


本文网址:https://www.zztuku.com/detail-12729.html
转载请声明来自:站长图库 - jQuery扫码/手机号码登录框切换代码


使用声明:

1、本站所有素材,仅限学习交流,请勿用于商业用途。

2、本站资源大多无解压密码,如遇需要解压密码,无特殊说明,均为:zztuku.com

3、下载积分可通过日常 签到绑定邮箱 等途径免费获得!

4、本站提供的源码、模板、软件工具等其他资源,均不包含技术服务,请大家谅解!由于资源大多存储在云盘,如出现链接失效请评论反馈。

5、如果素材损害你的权益,请 联系我们 给予处理。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    猜你喜欢