cookie封装

最新推荐文章于 2023-07-07 00:54:26 发布

l-Isabel

最新推荐文章于 2023-07-07 00:54:26 发布

阅读量141

点赞数

分类专栏：案例文章标签： javascript

本文链接：https://blog.csdn.net/Isabeldeng/article/details/109824752

版权

案例专栏收录该内容

12 篇文章 0 订阅

订阅专栏

function  createCookie(name, value, days) {
    var now = new Date()
    now.setDate(now.getDate() + days)
    document.cookie = `${name }= ${value}; expires = ${ now } `;
}
// creatCookie('book','雷司令',10)
function getCookie(key){
    var arr1=document.cookie.split('; ')
    for (let i = 0; i < arr1.length; i++) {
      var arr2=arr1[i].split('=')
      if (arr2[0]=key) {
          return arr2[1]
      }
    }
    return null;
}
 
function deleteCookie(key){
    document.cookie=`${key}=" "; expires=${new Date(0)}`
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>登录</h2>
    <form action="./success.html">
        <p><input type="text" placeholder='用户名' id="user">
            <span id="userTips"></span></p>
        <p><input type="password" placeholder='密码' id="pass">
            <span id="passTips"></span>
        </p>
        <button id="btn" type="button">登录</button>
    </form>
    <script src="./cookie.js">
    </script>
    <script src="/js/jquery.js"></script>
    <script>
        $('#btn').click(function (e) { 
            e.preventDefault();
            if ($('#pass').val() === getCookie($('#user').val())) {
                alert('登录成功');
            } else {
                console.log('登录失败');
            }
            
        });
     
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .right {
            color: green;
        }
    </style>
</head>

<body>
    <h2>注册</h2>
    <form action="./success.html">
        <p><input type="text" placeholder='用户名' id="user">
            <span id="userTips"></span></p>
        <p><input type="password" placeholder='密码' id="pass">
            <span id="passTips"></span>
        </p>
        <p><input type="password" placeholder='确认密码' id="repass">
            <span id="repassTips"></span></p>
        <button id="btn" type="button">注册</button>
    </form>
    <script src="./cookie.js"></script>
    <script src="/js/jquery.js"></script>
    <script>
        var user = $('#user').blur(function (e) {
            e.preventDefault();
            var reg = /^[a-zA-Z_]\w{4,11}$/
            if (reg.test($('#user').val())) {
                console.log($('#user').val());
                console.log(reg.test($('#user').val()));
                $('#userTips').html('ok')
                $('#userTips').addClass('right');
                return true;
            } else {
                $('#userTips').html('no')
                $('#userTips').attr('style', 'color:red')
                return false;
            }
        });
        var pass = $('#pass').blur(function (e) {
            e.preventDefault();

            var reg = /^\S{5,12}$/
            if (reg.test($('#pass').val())) {
                $('#passTips').html('ok')
                $('#passTips').addClass('right');
                return true;
            } else {
                $('#passTips').html('5-12位非空字符')
                // $('#passTips').attr('style', 'color:red')
                $('#passTips').css('color', 'red');
                return false;
            }
        });
        var re = $('#repass').blur(function (e) {
            e.preventDefault();

            if ($('#repass').val() !== "" && $('#repass').val() == $('#pass').val()) {
                $('#repassTips').html('ok');
                $('#repassTips').css('color', 'green')
                return true;
            } else {
                $('#repassTips').html('两次密码不一致');
                $('#repassTips').css('color', 'red')
                return false
            }
        });

        $('#btn').click(function (e) {
            e.preventDefault();
         if (re&&pass&&user) {
             createCookie($('#user').val(),$('#pass').val(), 10)
             $('form').submit();
         }
        });

    </script>
</body>

</html>

success.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>恭喜!登陆成功</h1>
</body>
</html>

l-Isabel

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
cookie封装

function createCookie(name, value, days) { var now = new Date() now.setDate(now.getDate() + days) document.cookie = `${name }= ${value}; expires = ${ now } `;}// creatCookie('book','雷司令',10)function getCookie(key){ var arr1=document.coo
复制链接

扫一扫

专栏目录