输入js验证&将存储的用户数据存储在cookie中

时间:2016-12-05 01:30:15

标签: javascript html cookies

如果输入了姓名,newsletter课程将会消失,newsletter1课程会显示Thankyou for joining, [Nameofuser]

我有一个输入姓名和电子邮件的表单。当以正确的格式输入电子邮件时,弹出窗口显示Successful,我正在尝试将该名称保存在cookie中。因此,当我刷新页面时,它将显示Thankyou for joining, [Nameofuser]

这是我到目前为止所做的:我无法在cookie中保存输入名称

http://www.w3schools.com/code/tryit.asp?filename=FAEWXAJJ7VKX

https://jsfiddle.net/sachitmaskey/kav5y1ba/

CSS

<head>
    <style>
        .newsletter {
            margin - bottom: 33 px;
        }

        .newsletter1 {
            z - index: 99999;
            margin - top: -250 px;
            color: red;
        }
    </style>
</head>

HTML

<body onload = "checkCookie()">
    <div class="newsletter" style="float: left;">
        <h3>NEWSLETTER</h3>

        Name :<input type="text" name="name"><br>

        <form name="myForm" onsubmit="return validateForm();" method="post">
            Email: <input type="text" name="email">
            <br><br><input type="submit" value="Submit">
            <p id="demo"></p>
        </form>
    </div>


    <div class="newsletter1" style="float: left;">
        <p id="thankyou">  
        </p><br>
    </div>
</body>

</html>



**JAVASCRIPT**
<script>
    function validateForm() {
        var x = document.forms["myForm"]["email"].value;
        var name = document.forms["myForm"]["name"].value;
        var atpos = x.indexOf("@");
        var dotpos = x.lastIndexOf(".");
        if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
            alert("Not a valid e-mail address");
            return false;
        } else {

            alert("Successful");
            // If name is entered,newsletter class will disapper and newsletter1 class will appear displaying "Thankyou"


            if (y > 0) {

                $('.newsletter1').css('display', 'block');
                $('.newsletter').css('display', 'none');


                // setting cookie, getting cookie and checking cookie if it exist or not
                function setCookie(cname, cvalue, exdays) {
                    var d = new Date();
                    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
                    var expires = "expires=" + d.toGMTString();
                    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
                }

                function getCookie(cname) {
                    var name = cname + "=";
                    var ca = document.cookie.split(';');
                    for (var i = 0; i < ca.length; i++) {
                        var c = ca[i];
                        while (c.charAt(0) == ' ') {
                            c = c.substring(1);
                        }
                        if (c.indexOf(name) == 0) {
                            return c.substring(name.length, c.length);
                        }
                    }
                    return "";
                }

                function checkCookie() {
                    var user = getCookie("name");
                    if (user != "") {
                        setCookie("name", user, 30);
                        document.getElementById("thankyou").innerHTML = "Thankyou for joining...."
                    }
                }
            }
        }
    }
</script>

1 个答案:

答案 0 :(得分:0)

最好使用缓存而不是cookie,因为服务器可能会使会话过期,这意味着每次用户访问页面都会被新会话处理并且旧会话被破坏。我建议你改用浏览器缓存。