码迷,mamicode.com
首页 > 其他好文 > 详细

验证用户名和密码

时间:2018-01-13 18:40:01      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:提示   width   pre   height   ace   span   .sh   pass   pad   

禁止alert事件

window.alert = function(){ return false; };

1、html

<input name="LoginName" value="" type="text" placeholder="请输入用户名">
<input name="PSD" value="" type="password" class="t-input " placeholder="请输入密码">
<button class="t-btn btnYes"  value="登陆">登陆</button>

 

  <div class="mixfirm"></div>  //定时弹框

2、css

/*弹框css*/
.mixfirm {
    width: 141px;
    height: 40px;
    background-color: #1084FB;
    opacity: 0.8;
    position: fixed;
    bottom: 50%;
    left: 50%;
    margin-left: -62px;
    margin-top: -20PX;
    text-align: center;
    display: none;
    padding: 0 10px;
    z-index: 30;
    border-radius: 30px;
}
.mixfirm h4 {
    margin-top: 13px;
    color: #fff;
}

3、定时弹框js

/*定时弹框*/
function mixfirm(obj) {
    var strs = ‘<h4>‘+obj+‘</h4>‘;
    $(".mixfirm").html(strs);
    $(".mixfirm").show();
}

附赠*
//确认弹出框html
<div class="firm" ></div>

//确认弹框css
.firm {
    width: 185px;
    height: 130px;
    background-color: #fff;
    position: fixed;
    bottom: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -65PX;
    text-align: center;
    display: none;
    padding: 0 10px;
    z-index: 30;
    border: 1px solid #1084FB;
}
.firm h4 {
    font-size: 16px;
    color: #000;
    margin: 30px 0 20px 0;
}
.firbtn button{
    margin: 0 5px;
}

//确认弹出框js
function firm(obj) {
    var str = ‘<h4>‘+obj+‘</h4>‘ +
        ‘<div class="firbtn">‘ +
        ‘<button type="button" class="mui-btn mui-btn-primary" onclick="addsure()">确定</button>‘ +
        ‘<button type="button" class="mui-btn mui-btn-primary addcancel">取消</button>‘ +
        ‘<div>‘
    $(".firm").html(str);
    $(".firm").show();
    $(".addcancel").click(function() {
        $(".firm").hide();
    })
} 
function addsure() { //弹框确认按钮执行事件,适情况而定
    $(".firm").hide();
}  

 

4、判断用户名密码的js

//数据库一般存储的密码是md5格式,判断密码是否正确时,先将密码转为md5格式,再判断;(转md5格式,先引用md5js,再写hex_md5("2121212") 即可)

  $(function() {
     //根据localStorage中是否有值,判断用户是否登录过
if(window.localStorage){ //用户登录过 var name1 = localStorage.getItem("loginName"); //获取存储的用户名 var pwd1 = localStorage.getItem("pwd"); //获取存储的密码 $("input[name=LoginName]").val(name1); //用户名赋值 $("input[name=PSD]").val(pwd1); //密码赋值 }else{ $("input[name=LoginName]").val(""); $("input[name=PSD]").val(""); } })
  //点击登录按钮 $(
‘.btnYes‘).click(function (event) { if($("input[name=LoginName]").val()=="") { //用户名为空时 $(".mixfirm").show(); mixfirm("用户名不能为空"); setTimeout(function() { $(".mixfirm").hide(); },1000); return false; } if($("input[name=PSD]").val()=="") { //密码为空 $(".mixfirm").show(); mixfirm("密码不能为空"); setTimeout(function() { $(".mixfirm").hide(); },1000); return false; } var list1 = $("input[name=LoginName]").val(); //获取当前输入的用户名,根据用户名查SQL ttyu.sql.getRowBySql("select * from Sys_User_Users where LoginName=‘"+list1+"‘",function(data) { if(data!=null) { //如果用户名存在 var ps1 = data.PSD; //获取数据库密码 var ps2 = hex_md5($("input[name=PSD]").val()); //获取输入的密码,并转成md5格式 if(ps1 == ps2) { //如果输入的密码正确,执行loginAfter方法 //用ttyu平台获取所有用户的信息的方法,可以在此写SQL直接查数据库
            $(
"#form1").send({ table: "Sys_User_Users", action: "login", backAfter: "loginAfter" }); }else { //密码错误,弹框提示 $(".mixfirm").show(); mixfirm("密码错误"); setTimeout(function() { $(".mixfirm").hide(); },1000); return false; } }else{ //用户名不存在 $(".mixfirm").show(); mixfirm("该用户不存在"); setTimeout(function() { $(".mixfirm").hide(); },1000); return false; } }) }); //登录回调函数 function loginAfter(result) { //result -- 所有用户信息 try { ttyu.user.saveUser(result); //当前用户信息 var names = $("input[name=LoginName]").val(); //获取输入的用户名 var pwds = $("input[name=PSD]").val(); //获取输入的密码 localStorage.setItem("loginName",names); //本地存储 localStorage.setItem("pwd",pwds); location = "index.html"; //跳转到首页面 } catch (e) { firm(result); } }

 

验证用户名和密码

标签:提示   width   pre   height   ace   span   .sh   pass   pad   

原文地址:https://www.cnblogs.com/dxt510/p/8279862.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!