zoukankan      html  css  js  c++  java
  • 验证用户名和密码

    禁止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 {
         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 sql("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); } }
  • 相关阅读:
    在不同的浏览器下FORM及它的小伙伴们默认样式的CSS属性值是不全然一致
    思考博客园的机器人攻击,想到我们可能也需要开启iptables
    大数据量的Mysql数据库备份策略
    win7或win2008系统中,出现【已停止工作,联机检查解决方案并关闭该程序,关闭程序】解决方法!
    Mysql的碎片查看与处理
    "个性化空间"性能优化方案设计初步
    假期结束后的工作安排
    GZIP压缩占用CPU大吗?
    媒体云平台
    关于二级缓存的设计思路
  • 原文地址:https://www.cnblogs.com/dxt510/p/8279862.html
Copyright © 2011-2022 走看看