手机号登录注册
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link href="../css/mui.min.css" rel="stylesheet" /> <link rel="stylesheet" type="text/css" href="../css/personal.css"/> <style> .mui-control-content { background-color: white; min-height: 215px; } .mui-control-content .mui-loading { margin-top: 50px; } body{ background: #fff; } </style> </head> <body> <script src="../js/mui.min.js"></script> <div class="mui-content"> <div class="denglu_bg"> <img src="../images/myself/denglu_bg.png"/> <div id="slider" class="mui-slider"> <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"> <a class="mui-control-item mui-active" href="javascript:void(0);"> 登录 </a> <a class="mui-control-item" href="javascript:void(0);"> 注册 </a> </div> <div class="mui-slider-group"> <div id="item1mobile" class="mui-slider-item mui-control-content mui-active"> <div id="scroll1" class="mui-scroll-wrapper"> <div class="mui-scroll"> <div class="denglu"> <form class="mui-input-group set_denglu"> <div class="mui-input-row"> <label for="user"><img src="../images/myself/user.png"/></label> <input type="tel" class="mui-input-clear" maxlength="11" placeholder="请输入您的手机号" id="user"> </div> <div class="mui-input-row"> <label for="pwd"><img src="../images/myself/lock.png"/></label> <input type="password" class="mui-input-password" placeholder="请输入密码" id="pwd"> </div> <div class="forget_mima"><p>忘记密码？</p></div> <div class="mui-content-padded"> <button type="button" class="mui-btn mui-btn-danger mui-btn-block btn_denglu">登录</button> </div> </form> </div> </div> </div> </div> <div id="item2mobile" class="mui-slider-item mui-control-content"> <div id="scroll2" class="mui-scroll-wrapper"> <div class="mui-scroll"> <div class="d_zhuce"> <form class="mui-input-group set_zhuce"> <div class="mui-input-row"> <label for="user"><img src="../images/myself/user.png"/></label> <input type="tel" class="mui-input-clear" maxlength="11" placeholder="请输入您的手机号" id="zhuce_user"> </div> <div class="mui-input-row"> <label><img src="../images/myself/lock.png"/></label> <input type="number" class="" placeholder="请输入验证码" id="zhuce_code"><span class="code_img"><img src="../images/myself/code_line.png" /></span><input type="button" value="获取验证码" id="zhuce_codes"> </div> <div class="mui-content-padded d_btn_zhuce"> <button type="button" class="mui-btn mui-btn-danger mui-btn-block btn_zhuce">确定</button> </div> </form> </div> </div> </div> </div> </div> </div> </div> </div> <script src="../js/jquery-1.8.3.min.js"></script> <script src="../js/reset.js"></script> <script src="../js/jquery.json-2.4.js"></script> <script> $(function(){ /*登录*/ $(".btn_denglu").click(function(){ var phone=$("#user").val(); var pwd = $("#pwd").val(); if(phone==""){ mui.toast("手机号不能为空"); $("#user").focus(); return false; } if (!(/^(1[3|4|5|7|8][0-9])\d{8}$/.test(phone))) { mui.toast("手机号有误"); $("#user").val(""); $("#user").focus(); return false; } if (pwd == "") { mui.toast(""); mui.toast("密码不能为空"); $("#pwd").focus(); return false; } $.ajax({ type:"post", dataType:"JSON", url:'', data:{username:phone,password:pwd,loginType:"0"}, success: function(data){ console.log(data.data); if(data.status==200){ var sid = data.data; localStorage.sid=sid; $.ajax({ type:"post", dataType:"JSON", url:'url?__sid='+data.data+'&__cookie=true', success: function(data){ localStorage.user = $.toJSON(data.data); window.location.href="../index.html"; $("#user").val(""); $("#pwd").val("") } }); } } }); }) //点击确定 function check_info(){ var phone=$("#zhuce_user").val(); var code = $("#zhuce_code").val(); var code_len=code.length; if (phone == "") { mui.toast("手机号不能为空"); $("#zhuce_user").focus(); return false; }else if (!(/^(1[3|4|5|7|8][0-9])\d{8}$/.test(phone))) { mui.toast("手机号有误"); $("#zhuce_user").val(""); $("#zhuce_user").focus(); return false; }else if (code == "") { mui.toast("验证码不能为空"); $("#zhuce_code").focus(); return false; }else if (code_len!= 6) { mui.toast("请输入六位验证码数字"); $("#zhuce_code").focus(); return false; }else{ return true; } } $(".btn_zhuce").click(function(){ if (check_info()) { var phone=$("#zhuce_user").val(); var code = $("#zhuce_code").val(); window.location.href="register.html?phone="+phone+"&code="+code; }else{ return false; } }) //点击发送 $("#zhuce_codes").click(function(){ var phone = $("#zhuce_user").val(); if(null == phone || undefined == phone || "" == phone){ mui.toast("请先输入手机号") return false; }else if (!(/^(1[3|4|5|7|8][0-9])\d{8}$/.test(phone))) { mui.toast("手机号有误"); $("#zhuce_user").val(""); $("#zhuce_user").focus(); return false; }else{ //设置发送验证码按钮不可用 time($(this)); $("#zhuce_codes").attr("disabled","disabled").css("color","#E3E3E3"); $.ajax({ type:"post", dataType:"JSON", url:'', data:{phone:phone}, success: function(data){ localStorage.sid = data.data.sid; if(data.status!=200){ mui.toast("验证码发送失败"); } } }); mui.toast("验证码已发送"); } }) }) //倒计时方法 var wait = 60; function time(o) { if (wait == 0) { o.removeAttr("disabled"); o.val("获取验证码"); wait = 60; } else { o.attr("disabled", true); o.val("重新获取(" + wait + ")"); wait--; setTimeout(function () { time(o) }, 1000) } } </script> <script> mui.init({ swipeBack: false }); (function($) { $('#slider .mui-scroll-wrapper').scroll({ indicators: true //是否显示滚动条 }); var item2 =$("#slider #item2mobile") var sliderSegmentedControl =$("#slider #sliderSegmentedControl") })(mui); </script> <script> </script> <script> $(".mui-control-item").on("touchstart",function () { $(this).addClass("mui-active").siblings().removeClass("mui-active"); var b = $(this).index(); $(".mui-slider-item").eq(b).addClass("mui-active").siblings().removeClass("mui-active"); $(".mui-slider-item").eq(b).css("display","inline-block").siblings().css("display","none") console.log(b); localStorage.setItem("aaaaa", b); }); function aaa() { var num = localStorage.getItem("aaaaa"); $(".mui-control-item").eq(num).addClass("mui-active").siblings().removeClass("mui-active"); $(".mui-slider-item").eq(num).addClass("mui-active").siblings().removeClass("mui-active"); $(".mui-slider-item").eq(num).css("display","inline-block").siblings().css("display","none") localStorage.removeItem('aaaaa') } window.onload = function () { aaa(); } </script> </body> </html>
同事写的 一些有用的信息可以看看
