Web 实现登录记住密码功能

Web 实现登录记住密码功能HTML<formid=”nameLoginForm”>账户名:<inputtype=”text”name=”name”id=”name”class=”input-text”autocomplete=”off”placeholder=”用户名/邮箱/手机号”/>密码:<inputtype=”password”name=”p…

大家好,欢迎来到IT知识分享网。Web

HTML

<form id="nameLoginForm">
    账户名:<input type="text" name="name" id="name" class="input-text" autocomplete="off" placeholder="用户名/邮箱/手机号" />
    密码:<input type="password" name="password" id="password" class="input-text" placeholder="请输入密码">
    <input id="normalSubmit" class="btn-settlement" type="button" onclick="login()" value="登录"  >
    <span class="register"><input name="remember" type="checkbox" id="remember" class="rem-check">记住密码</span>
    <span class="forget-pass"> <input name="admin" type="checkbox" id="admin">管理员登录</span>
</form>

JS

<script type="text/javascript">
    //记住用户名,默认不记住
    var checkFlag = false;
    function remeberNameAndPwd(){
        //这里是当页面是从注册页面注册成功过来
        var remFlag = $("#remember").is(':checked');
        if(remFlag==true){
            checkFlag = true;
        }
        //当在login.html页面点击是否记住z
        $("#remember").click(function(){
            var remFlag = $("#remember").is(':checked');
            if(remFlag==true){
                $("#remember").attr("checked",true);
                checkFlag=true;
            }else{
                $("#remember").attr("checked",false);
                checkFlag=false;
            }
        })
    }

    //写入cookie与删除
    function setAndRemoveCookie(){
        //注意 密码写入cookie的时候这里没有写加密 是不安全的
        if(checkFlag){
            var name = $("#name").val();
            var password = $("#password").val();
            $.cookie("remember","true",{expires : 7 })//单位:天
            $.cookie("name",name,{expires: 7 });
            $.cookie("password",password,{expires: 7 })
        }else{
            //删除cookie
            $.cookie("remember","false",{expires:-1 });
            $.cookie("name",null,{expires:-1});
            $.cookie("password",null,{expires:-1});
        }
    }

    //获取cookie
    function getCookie(){
        if($.cookie("remember")=="true"){
            $("#remember").attr("checked",true);
            $("#name").val($.cookie("name"));
            $("#password").val($.cookie("password"));
        }
    }

    $(function(){
        getCookie();//获取cookie
        remeberNameAndPwd();//remember点击事件
    });

    //登录
    function login() {
        var name = $("#name").val()
        var password = $("#password").val();
        //是否管理员登录
        var remId;
        var remAdmin = $("#admin").is(':checked');
        if(remAdmin){
            remId='1';
        }else {
            remId='0';
        }

        if($(".tips ").is(":visible")){
            return;
        }
        if (name == "") {
            showError("请输入用户名");
            return;
        }
        if (password == "") {
            showError("请输入密码");
            return false;
        }
        $.ajax({
            url : 'login',
            type:'post',
            data : {
                name : name,
                password : password,
                remAdmin:remId
            },
            dataType : 'json',
            cache:false,
            success : function(d) {
                if ("0"==d.err) {
                    setAndRemoveCookie();//是否写入cookie
                    window.location.href = d.url;
                }else{
                    showError(d.msg);
                    return false;
                }
            }
        })
    }
</script>

 

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/11928.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信