浅谈Cookie实现记住密码功能

最新推荐文章于 2024-06-17 10:53:19 发布

遇见，是劫还是缘

最新推荐文章于 2024-06-17 10:53:19 发布

阅读量773

点赞数

本文链接：https://blog.csdn.net/china_dou/article/details/88074215

版权

首先创建一个cookie.js文件夹需要引入这个js

//设置cookie
function setCookie(name, value, day) {
	var date = new Date();
	date.setDate(date.getDate() + day);
	document.cookie = name + '=' + value + ';expires=' + date;
};
//获取cookie
function getCookie(name) {
	var reg = RegExp(name + '=([^;]+)');
	var arr = document.cookie.match(reg);
	if (arr) {
		return arr[1];
	} else {
		return '';
	}
};
//删除cookie
function delCookie(name) {
	setCookie(name, null, -1);
};

这里是html页面结构以及详情:

有点多慢慢看

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>login...</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="/yizhangjin/css/mui.min.css" rel="stylesheet" />
        <!-- rem适配 -->
        <script src="/yizhangjin/project/js/rem.js"></script>
        <!-- 初始化css -->
        <link rel="stylesheet" href="/yizhangjin/project/css/clearDefaultStyle.css">
        <!-- mine.css -->
        <link rel="stylesheet" href="/yizhangjin/project/css/mine.css">
    </head>

    <body>
        <!-- 挂载点 -->
        <div id="guazai">

            <div id="login">
                <img src="/yizhangjin/project/image/mineImg/02.png" alt="一掌金" />
                <div class="login-btn">
                    <a class="bg_active"><button @click="reg">登录</button></a>
                    <a><button @click="log">注册</button></a>
                </div>
            </div>
            <!-- formRegister1 -->
            <div id="formRegister1" v-if="showOne">
                <ul>
                    <li><label>会员账号:</label><input v-model="zhanghao" @blur="shiqu" type="number" placeholder="请输入会员账号" /></li>
                    <li><label>登录密码:</label><input v-model="denglumima" type="password" placeholder="请输入登录密码" /></li>
                    <li>
                        <sapn>
                            <input type="checkbox" @click="remember" v-model="psd"/> &nbsp;记住密码
                        </sapn>
                        <sapn>
                            <a id="wangji">
                                忘记密码?
                            </a>
                        </sapn>
                    </li>
                </ul>
                <button @click="denglu">立 即 登 录</button>
                <p class="hint">
                    ------没有个人账户:
                    <a href="#" @click="log">直接注册</a>------
                </p>
            </div>

            <!-- formRegister2  -->
            <div id="formRegister2" v-if="showTow">
                <ul>
                    <li><label>会员账号:</label><input v-model="huiyuan" type="number" placeholder="请输入真是手机号" /></li>
                    <li><label>验&nbsp;&nbsp;证&nbsp;&nbsp;码:</label><input v-model="yanzhenma" type="text" placeholder="请输入短信验证码" size="13" /><span
                         class="yanzheng" @click="verificationFN">{{verification}}</span></li>
                    <li><label>真是姓名:</label><input v-model="xingming" type="text" placeholder="请输入您的名字" /></li>
                    <li><label>设置密码:</label><input v-model="shezhimima" type="text" placeholder="请输入6-8位数字+字母组合" /></li>
                    <li><label>确认密码:</label><input v-model="querenmima" type="text" placeholder="请确认密码" /></li>
                    <li><label>推&nbsp;&nbsp;荐&nbsp;&nbsp;人</label><input v-model="tuijianren" type="number" placeholder="请输入推荐人手机号" /></li>
                    <li><input type="checkbox" v-model="checked2" /> 我已阅读并且接受<span class="huang" @click="service">《会员服务协议》</span></li>
                </ul>
                <button @click="zhuce">立 即 注 册</button>
                <button class="xiazaiapp"><a href="/yizhangjin/project/mine/downloadApp.html">下 载 APP</a></button>
                <p class="hint">
                    ------若有个人账户:
                    <a href="">直接登录</a>------
                </p>
            </div>

        </div>

        <script src="/yizhangjin/js/mui.js"></script>
        <!-- jq.js -->
        <script src="/yizhangjin/project/js/jquery-3.1.1.min.js"></script>
        <!-- vue.js -->
        <script src="/yizhangjin/project/js/vue.js"></script>
        <!-- Cookie.js -->
        <script src="/yizhangjin/project/js/cookie.js"></script>
        <script type="text/javascript">
            $(function() {
                const vm = new Vue({
                    el: '#guazai',
                    data() {
                        return {
                            showOne: true,
                            showTow: false,
                            // regiter 登录部分
                            zhanghao: '',
                            denglumima: '',
                            psd: false,
                            // zhuce 注册部分
                            huiyuan: '',
                            yanzhenma: '',
                            xingming: '',
                            shezhimima: '',
                            querenmima: '',
                            tuijianren: '',
                            checked: false,
                            // 获取验证码
                            verification: '验证码',
                            // 服务协议
                            checked2: false,
                        }
                    },
                    mounted() {
                        console.log("初始化Cookie")
                        //页面初始化时，如果帐号密码cookie存在则填充
                        if (getCookie('user') && getCookie('pswd')) {
                            this.zhanghao = getCookie('user');
                            this.denglumima = getCookie('pswd');
                            this.psd = true;
                        }
                    },
                    methods: {
                        // 登录，注册 切换
                        reg() {
                            this.showTow = false;
                            this.showOne = true;
                        },
                        log() {
                            this.showOne = false;
                            this.showTow = true;
                        },
                        // remember 记住密码
                        remember() {
                            this.passworld = !this.passworld;
                        },
                        // 会员服务协议
                        service() {
                            this.checked2 = !this.checked2;
                        },
                        verificationFN() {
                            // 获取验证码
                            mui.toast('获取验证码', {
                                duration: 'short',
                                type: 'div'
                            })

                        },
                        // 失去焦点
                        shiqu(){
                            if(getCookie("user") != this.zhanghao){
                                this.psd = false;
                            }
                        },
                        // regiter 登录
                        denglu() {
                            console.log("regiter");
                            //-----------------------------------------------
                            if (this.zhanghao == '') {
                                mui.toast('会员账号未填写', {
                                    duration: 'short',
                                    type: 'div'
                                })
                                return false;
                            } else if (!(/^1[34578]\d{9}$/.test(this.zhanghao))) {
                                mui.toast('会员账号不符合规则', {
                                    duration: 'short',
                                    type: 'div'
                                })
                                return false;
                            } else if (this.denglumima == '') {
                                mui.toast('登录密码未填写', {
                                    duration: 'short',
                                    type: 'div'
                                })
                                return false;
                            } else if (!(/[a-z0-9A-Z]{6,8}$/.test(this.denglumima))) {
                                mui.toast(' 密 码 不 符 合 规 则 （6-8位数字+字母）', {
                                    duration: 'short',
                                    type: 'div'
                                })
                                return false;
                            } else {
                                if(this.psd){
                                    setCookie('user', this.zhanghao, 7); //保存帐号到cookie，有效期7天
                                    setCookie('pswd', this.denglumima, 7); //保存密码到cookie，有效期7天
                                };
                                // TODO--保存Cookie
                                mui.toast('登陆成功', {
                                    duration: 'short',
                                    type: 'div'
                                })
                                // do sth ... 登陆成功事件
                                // 如果登录三次失败,则执行图形验证码
                                
                            }
                        },
                        // zhuce 注册
                        zhuce() {
                            if (!(/^1[34578]\d{9}$/.test(this.huiyuan))) {
                                mui.toast('会员账号不符合规则', {
                                    duration: 'short',
                                    type: 'div'
                                });
                                return false;
                            } else
                                /*if(this.yanzhenma){
                                            TODO--验证码
                                        }else*/
                                if (this.xingming.length > 4) {
                                    mui.toast('名字无效', {
                                        duration: 'short',
                                        type: 'div'
                                    });
                                    return false;
                                } else if (this.shezhimima.length == 0) {
                                mui.toast('请设置密码', {
                                    duration: 'short',
                                    type: 'div'
                                })
                                return false;
                            } else if (!(/[a-z0-9A-Z]{6,8}$/.test(this.shezhimima))) {
                                mui.toast(' 密 码 不 符 合 规 则 （6-8位数字+字母）', {
                                    duration: 'short',
                                    type: 'div'
                                })
                                return false;
                            } else if (this.querenmima != this.shezhimima) {
                                mui.toast('两次输入密码不相同，请再次确认', {
                                    duration: 'short',
                                    type: 'div'
                                })
                                return false;
                            } else if (this.tuijianren.length == 0) {
                                mui.toast('请填写推荐人手机号', {
                                    duration: 'short',
                                    type: 'div'
                                })
                                return false;
                            } else if (!(/^1[34578]\d{9}$/.test(this.tuijianren))) {
                                mui.toast('推荐人手机号无效，请重新填写', {
                                    duration: 'short',
                                    type: 'div'
                                })
                                return false;
                            } else if (!(this.checked)) {
                                mui.toast('请阅读会员服务协议，如若已阅读请勾选“我已阅读”', {
                                    duration: 'short',
                                    type: 'div'
                                })
                                return false;
                            } else {
                                mui.toast('注册成功！', {
                                    duration: 'short',
                                    type: 'div'
                                })
                                // do sth ... 注册成功事件 

                            }
                        },

                    }
                });
                // 切换背景图
                $(".login-btn a").on('click', function() {
                    $(this).addClass('bg_active');
                    $(this).siblings().removeClass('bg_active');
                })


                // 忘记密码
                document.getElementById('wangji').addEventListener('tap', function() {
                    //打开关于页面
                    console.log("忘记密码");
                    mui.plusReady(function() {
                        console.log("当前页面URL：" + plus.webview.currentWebview().getURL());
                    });
                    mui.openWindow({
                        url: '/yizhangjin/project/mine/changePswd.html',
                        id: 'changePswd.html',
                        styles: {
                            top: '.51rem', //新页面顶部位置
                            bottom: '51rem', //新页面底部位置
                            width: '100px', //新页面宽度，默认为100%
                            height: '100px', //新页面高度，默认为100%
                        },
                        extras: {
                            //..... //自定义扩展参数，可以用来处理页面间传值
                        },
                        createNew: false, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
                        show: {
                            autoShow: true, //页面loaded事件发生后自动显示，默认为true
                            aniShow: 'slide-in-right', //页面显示动画，默认为”slide-in-right“；
                            duration: '' //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
                        },
                        waiting: {
                            autoShow: true, //自动显示等待框，默认为true
                            title: '正在加载...', //等待对话框上显示的提示内容
                            options: {
                                width: '100px', //等待框背景区域宽度，默认根据内容自动计算合适宽度
                                height: '100px', //等待框背景区域高度，默认根据内容自动计算合适高度
                            }
                        }
                    });

                });

            })
        </script>
    </body>

</html>