验证用户名和密码

Posted 2020-10-20 党欣彤

禁止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);
        }
    }