JavaScript记录表单用户名和密码

  用javascript记录用户输入的用户名和密码功能示例代码,这样用户下次访问页面时,不需要输入用户名和密码,可以直接提交表单验证用户登录信息。

  javascript记录用户输入的用户名和密码的实现原理,就是用cookie记录住用户名和密码即可。示例代码如下

<title>JavaScript记录表单用户名和密码</title>
<form method="get" onsubmit="return check(this)" name="lgForm">
用户名:<input type="text" name="name"/><br />
密 码:<input type="password" name="pwd"/><br />
<input type="checkbox" name="keep" />记住用户名和密码 <input type="submit" value="登录"/></form>
<script>
    function getData() {//从cookie中加载用户名,密码等信息
        var s = document.cookie, d = {};
        d.keep = /(^|;| )keep=1;?/.test(s);
        if (d.keep) {
            var m = /(^|;| )name=([^;]+)/.exec(s);
            if (m) d.name = unescape(m[2]);
            m = /(^|;| )pwd=([^;]+)/.exec(s);
            if (m) d.pwd = unescape(m[2]);
        }
        return d;
    }
    function setData(keep, name, pwd) {//设置cookie记录用户名,密码,是否保留密码等信息
        var d = new Date();
        d.setYear(d.getFullYear() + (keep ? 1 : -1));
        document.cookie = 'keep=' + (keep ? 1 : 0) +';expires=' + d.toGMTString();
        document.cookie = 'name=' + escape(name) + ';expires=' + d.toGMTString();
        document.cookie = 'pwd=' + escape(pwd) + ';expires=' + d.toGMTString();
    }
    function check(f) {
        if (f.name.value == '') { alert('请输入用户名!'); f.name.focus(); return false }
        if (f.pwd.value == '') { alert('请输入密码!'); f.pwd.focus(); return false }
        setData(f.keep.checked, f.name.value, f.pwd.value);//设置cookie或者移除cookie
    }
    window.onload = function () {//内容加载完毕后读取cookie获取信息,如果记录过就初始化表单的控件值
        var d = getData();
        if (d.keep) {
            var f = document.lgForm;
            f.keep.checked = true;
            f.name.value = d.name;
            f.pwd.value = d.pwd;
        }
    }
</script>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:JavaScript记录表单用户名和密码

评论(0)Web开发网
阅读(369)喜欢(0)JavaScript/Ajax开发技巧