<body> <div class="container"> <div class="imgBox"></div> <div class="panel"> <div class="content login"> <div class="switch"> <span id="login" class="active" onclick="loginGO(this)">Login</span ><span>/</span><span id="signup">Sign Up</span> </div> <form action=""> <div id="email" class="input" placeholder="E-mail"> <input type="text" class="E-mail" /> </div> <div class="input" placeholder="Phone"> <input type="text" class="Phone" /> </div> <div id="username" class="input" placeholder="UserName"> <input type="text" id="UserName" /> </div> <div class="input" placeholder="PassWord"> <input type="text" id="PassWord" /> </div> <div id="repeat" class="input" placeholder="PassWord-repeat"> <input type="text" /> </div> <input type="submit" id="btn" class="btnLogin" value="LOGIN" /> </form> </div> </div> </div> <script src="../JS/public.js"></script>//这是ajax请求 <script src="../JS/login.js"></script>//这是登陆的js代码 </body>好了 给html穿上衣服吧
css代码
/* 配色方案：背景：rgb(224,207,254),rgb(255,239,255)按钮: rgb(181,154,254),rgb(245,189,253)*/.panel{ position: absolute; left: 50%; top: 50%; margin-top: -135px; margin-left: -97px;}.switch span{ color: #ccc; font-size: 1.4rem; cursor: pointer;}.switch span.active{ color: rgb(181,154,254);}form{ width: 12rem; margin: 2rem 0 0; }form .input{ margin-top: 3rem; position: relative; opacity: 1; height: 2rem; width: 100%; margin: 2rem 0; transition: .4s;}.input input,#code_input{ outline: none; width: 100%; border: none; border-bottom: .1rem solid rgb(181, 154, 254)}.input::after{ /* attr(是CSS所引用的HTML属性名称) */ content:attr(placeholder); position: absolute; left: 0; top:-20%; font-size: 1.3rem; color: rgb(129,101,207); transition: .3s ;}.input.focus::after{ top: -80%; font-size: 1rem;}.login .input#email,.login .input#repeat,.login .input#username{ margin: 0; height: 0; opacity: 0;}form span{ display: block; color: rgb(110,89,167); font-size: .8rem; cursor: pointer;}form #btn{ border: none; border-radius: 3rem; background: linear-gradient(90deg,rgb(181,154,254),rgb(245,189,253)); margin: 2rem 0 0; width: 100%; height: 3.5rem; box-shadow: 0 0 8px rgb(181,154,254); cursor: pointer;}.errShow{ font-size: .8rem; color: red;}okok
来段js代码，实现切换样式
// 获取按钮var btn=myId("btn");// 判断为登陆还是注册 true为登陆 flase为注册var btnVal=true;var login=myId("login");// 点击登陆时的样式function loginGO(login){ var spanBox=document.querySelectorAll(".switch span"); for(var i=0;i<spanBox.length;i++){ spanBox[i].classList.remove("active") } login.classList.add("active"); login.parentElement.parentElement.classList.remove("signup"); login.parentElement.parentElement.classList.add("login"); return btnVal=true;}// 登陆时的样式var signup=myId("signup");signup.onclick=function(){ var spanBox=document.querySelectorAll(".switch span"); for(var i=0;i<spanBox.length;i++){ spanBox[i].classList.remove("active") } this.classList.add("active"); this.parentElement.parentElement.classList.remove("login"); this.parentElement.parentElement.classList.add("signup") btn.value="Sign Up" return btnVal=false;}那么，正式的开始咯
首先 类似于百度注册效果，当鼠标点到上面去之后，页面也会出现对应解释~
//输入框var inputBox=document.querySelectorAll(".input input");var errShow=document.createElement("span");var errBOX=["请输入正确的邮箱地址","请输入正确的电话号码","用户名为4-9非中文字符","请输入10位-15位英文或数字密码","确认密码"]// 输入框循环绑定err时，和点击时提示区域for(var z=0;z<inputBox.length;z++){ inputBox[z].index=z; inputBox[z].inputTest=true; inputBox[z].onfocus=function(){ this.parentElement.appendChild(errShow); errShow.innerHTML=errBOX[this.index]; this.parentElement.classList.add("focus"); } // 实时进行判定 inputBox[z].oninput=function(){ if(!this.value==""){ return this.inputTest=false; }else{ return this.inputTest=true; } } // 取消聚焦时，父级取消样式 inputBox[z].onblur=function(){ if(this.inputTest){ this.parentElement.classList.remove("focus"); } }}接下来就是判断了
会用到数据库判断，
我把去要去数据库的内容封装在函数里，
在用户输入是
//正则判断//获取用户输入的值进行判定var userBox={};btn.onclick=function(e){ e=e||event; if(btnVal){//登陆时在后台判定是否正确 var Phone=myClass("Phone")[0].value; var PassWord=myId("PassWord").value; checkPassWord(Phone,PassWord)// 判断密码是否正确 }else{ //注册判定 var regBox=[/^\w+@\w+\.com|cn|net$/,/^1[365789]\d{9}$/,/^\w{4,9}$/,/^\w{10,15}$/,/^\w{10,15}$/]; var indexBoxVal=[]; for(var z=0;z<inputBox.length;z++){ var testInput=regBox[z].test(inputBox[z].value); if(z==4){ testInput=inputBox[z].value==inputBox[z-1].value?true:false; } if(!testInput){ inputBox[z].style.borderColor="red"; }else{ inputBox[z].style.borderBottom=".1rem solid rgb(181, 154, 254)" } indexBoxVal+=indexBoxVal.length==0?regBox[z].test(inputBox[z].value):","+regBox[z].test(inputBox[z].value); } // 输入错误时 if(indexBoxVal.indexOf(false)>=0){ e.preventDefault(); return; }else{ // 当页面判断正确的时候,后台数据库 if(giveSqlUser()){ window.history.back(); } // 密码正确跳转 // window.location="https://www.baidu.com"; } }}// 去数据库匹配 正确后，插入数据库function giveSqlUser(){ var E_mail=myClass("E-mail")[0].value; var Phone=myClass("Phone")[0].value; var UserName=myId("UserName").value; var PassWord=myId("PassWord").value; userBox={E_mail:E_mail,Phone:Phone,UserName:UserName,PassWord:PassWord}; // 可以得到了！ // 我去数据库匹配有没有这个人，到底注册了么？我通过手机号去匹配 AJSOgo('GET', 'http://127.0.0.1:8087/getUserSql?Phone='+Phone, signupJudge); function signupJudge(th){ th=JSON.parse(th); //如果能获取到结果 if(th.des[0].Phone){ alert("你已注册，请登陆"); loginGO(login); }else{ // 数据库里面没有；就去注册 userBox=JSON.stringify(userBox); AJSOgo('GET', 'http://127.0.0.1:8087/giveUserSql?userBox='+userBox,getUserBox); function getUserBox(th){ th=JSON.parse(th); if(th.stat){ userBox=JSON.parse(userBox) // giveCookie(userBox.Phone,userBox.PassWord); cookie7(userBox.Phone,userBox.PassWord); alert("注册成功!!"); return true; }else{ alert("没有注册成功，请重新注册!!"); } } } }}// 会员登陆时，匹配密码和电话号码function checkPassWord(){ var Phone=myClass("Phone")[0].value; AJSOgo('GET', 'http://127.0.0.1:8087/getUserSql?Phone='+Phone, checkTrue); function checkTrue(th){ th=JSON.parse(th); var PassWord=myId("PassWord").value; if(th.state){ if(PassWord==th.des[0].PassWord){ // 密码正确跳转 var Phone=myClass("Phone")[0].value; var PassWord=myId("PassWord").value; // giveCookie(Phone,PassWord); cookie7(Phone,PassWord) alert("欢迎"+th.des[0].UserName) location.href="../page/com.html"; }else{ var PassWordBox=myId("PassWord"); PassWordBox.style.border="1px solid red"; PassWordBox.value="密码错误"; PassWordBox.focus(); } }else{ alert("亲，没有注册哦~"); } }}// 是否愿意7天免登陆function cookie7(Phone_,PassWord_){ var cookie7Val=confirm("需要设置七天免登陆么？") if(cookie7Val){ giveCookie(Phone_,PassWord_) }else{ sessionStorage.setItem("phonenum", Phone_); sessionStorage.setItem("PassWord", PassWord_); }}// 把获取正确的值，写到cookie里面function giveCookie(Phone_,PassWord_){ setCookie("phonenum", Phone_, 7); setCookie("PassWord", PassWord_, 7);}最后的最后！！
来一段public.js用在这一此代码中的
function myId(idname) { return document.getElementById(idname);}function myClass(classname) { return document.getElementsByClassName(classname);}function myTag(tagname) { return document.getElementsByTagName(tagname);}//获取滚动高度var scroll_top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;//关于浏览器存储function cearTime(exp,expireDay){ var exp=new Date; }//创建cookie//name_是类名，nameVal是值，expireDay是想存储的日期function setCookie(name_, nameVal, expireDay) { var exp = new Date; exp.setDate(exp.getDate() + expireDay); document.cookie = name_ + "=" + nameVal + ((expireDay == null) ? "" : ";expires=" + exp.toGMTString() + "; path=/;"); console.log()}//获取cookiefunction getCookie(name_) { var CookieBOX = document.cookie.split(";");//根据；把每一个分割开 for (var i = 0; i < CookieBOX.length; i++) { var getCookie = CookieBOX[i].split("=");//获取单个内容，用=分割开 getCookie[0]=getCookie[0].trim(); if (name_ == getCookie[0]) { return getCookie[1]; } }return "";}//删除cookiefunction removeCookie(name_) { setCookie(name_, "", -1);}//AJSO ByGo="GET/POST" UrlGo="url" ; 调用区域调用AJAXbox;function AJSOgo(ByGo, UrlGo,fn) { var xmlhttp; //判断浏览器，并创建对象 if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest();//IE7+ 创建对象 } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//IE5/6 } //发送请求 console.log(ByGo,UrlGo) xmlhttp.open(ByGo, UrlGo, true); xmlhttp.send(); //响应事件 xmlhttp.onreadystatechange = function () { //响应状态(服务器响应已做好被处理的准备时所执行的任务) if (xmlhttp.readyState === 4 && xmlhttp.status === 200) { //获取服务器数据 var AJAXbox = xmlhttp.responseText; // return AJAXbox; fn(AJAXbox); } }} ok!
