输入账号 密码 实现登录功能
Posted agansj
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了输入账号 密码 实现登录功能相关的知识,希望对你有一定的参考价值。
当实现用户的账户和密码输入正确之后,页面跳转 跳转 使用window.loacation.href ="网址",
这个时候 那个登录的地方有个 账号和密码 这个是怎么做到的呢?
现在有个方法是:
在输入账号和密码的时候 ,当账号和密码都正确的时候,把这个两个值都存在本地,然后转到登录进去的页面的时候,
再在本地的缓存里面取到这2个值,即可。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } #top{ width:100%; height:40px; background-color:black; text-align:right; font-size:14px; } #top a{ color:white; text-decoration:none; line-height:40px; vertical-align:middle; margin-right:40px; } #login{ display:none; margin-left:40px; } #login a{ display:block; width:300px; height:40px; background-color:firebrick; line-height:40px; vertical-align: middle; color:white; text-decoration:none; text-align:center; } input{ width:300px; height:40px; font-size:14px; } #login .name,.password,.bu{ margin-lfet:20px; margin-top:15px; } a{ cursor:pointer; } </style> <script src="jquery-1.10.2.min.js"></script> <script src="layer/layer.js"></script> <script> function showLogin(){ layer.open({ type:1,//type为1表示弹出的是div title:‘登陆‘, area:[‘395px‘,‘300px‘], content:$(‘#login‘) }); } function login(){ var userName= $.trim($(".userName").val());//trim用于去掉空格 var password= $.trim($(".password").val()); if(userName==" "||password==" "){ layer.alert("用户名或密码不能为空",{ title:‘提示‘, icon:5 }); }else{ //输入用户名和密码不为空 //ajax,第一个是传到的后台页面,第二个参数是用户名密码,第三个参数是从后台获取的数据 $.post("/后台页面",{"userName":userName,"password":password},function(data){
//这个地方使用的是layer的弹出框 ,
不使用就可以直接跳转到相应的页面 在此之前,可以把2个值存到本地 即用户名和密码
window.location.href = "网址" if(data=="登陆成功"){ layer.alert("登陆成功",{ title:‘提示‘, icon:6 }); }else{
这个地方可以用到在输入框下面把用户名或者密码错误显示出来
当然这个地方可以用到正则,提示输入的密码符合怎么规则,账号是什么规则等等 。
layer.alert("用户名或密码出错",{ title:‘提示‘, icon:5 }); } }); } } </script> </head> <body> <div id="top"> <a id="reg">注册</a> <a id="log" onclick="showLogin()">登陆</a> </div> <!--sql注入,利用SQL语句的漏洞来攻击数据库--> <div id="login"> <div class="name"> <input type="text" class="userName" placeholder="请输入用户名"> </div> <div class="password"> <input type="password" class="password" placeholder="请输入密码"> </div> <div class="bu"><a onclick="login()">登陆</a></div> </div> </body> </html>
以上是关于输入账号 密码 实现登录功能的主要内容,如果未能解决你的问题,请参考以下文章