zoukankan      html  css  js  c++  java
  • vue记住密码功能

    话不多说,直接上代码。

    html部分:

    JS部分:

    data() {
    return {
    logining: false,
    ruleForm2: {
    account: '',
    checkPass: ''
    },
    rules2: {
    account: [
    {required: true, message: '请输入账号', trigger: 'blur'},
    ],
    checkPass: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    ]
    },
    checked: true,
    msg:''
    };
    },
    methods: {
    handleSubmit2(formName) {
    let self = this;
    //判断复选框是否被勾选 勾选则调用配置cookie方法
    if (self.checked == true) {
    //传入账号名,密码,和保存天数3个参数
    self.setCookie(self.ruleForm2.account, self.ruleForm2.checkPass, 7);
    }else {
    //清空Cookie
    self.clearCookie();
    }

            //设置cookie
            setCookie(c_name, c_pwd, exdays) {
                var exdate = new Date(); //获取时间
                exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
                //字符串拼接cookie
                window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
                window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
            },
            //读取cookie
            getCookie: function() {
                if (document.cookie.length > 0) {
                    var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
                    for (var i = 0; i < arr.length; i++) {
                        var arr2 = arr[i].split('='); //再次切割
                        //判断查找相对应的值
                        if (arr2[0] == 'userName') {
                            this.ruleForm2.account = arr2[1]; //保存到保存数据的地方
                        } else if (arr2[0] == 'userPwd') {
                            this.ruleForm2.checkPass = arr2[1];
                        }
                    }
                }
            },
            //清除cookie
            clearCookie: function() {
                this.setCookie("", "", -1); //修改2值都为空,天数为负1天就好了
            }
    
        },
        mounted(){
            this.getCookie();
        }
    }
  • 相关阅读:
    查漏补缺:QT入门
    添砖加瓦:设计模式(工厂方法模式)
    Luogu 4784 [BalticOI 2016 Day2]城市
    Luogu 1606 [USACO07FEB]白银莲花池Lilypad Pond
    Luogu 3698 [CQOI2017]小Q的棋盘
    CF547D Mike and Fish
    Luogu 3066 [USACO12DEC]逃跑的BarnRunning Away From…
    Luogu 2403 [SDOI2010]所驼门王的宝藏
    NEERC17 J Journey from Petersburg to Moscow
    Luogu 3350 [ZJOI2016]旅行者
  • 原文地址:https://www.cnblogs.com/JaniceDong/p/10183123.html
Copyright © 2011-2022 走看看