纯JS记住账号密码

帝国CMS默认注册是没有 会员注册协议的。

很多登录功能上都有个“记住密码”的功能,其实无非就是对cookie的读取。

当然,我们在注册页面直接写入注册协议也是很简单的。

引用


参照简书 – 纯JS操作Cookie

  • 澳门新葡亰3522平台游戏,添加Cookie

setCookie ( name, value, expdays )

  • 获取Cookie

getCookie ( name )

  • 删除Cookie

delCookie ( name )

但追求完美的我们,更需要 勾选同意注册协议才能注册。如下图:

代码说明


如图所示,如果不勾选同意注册协议 注册按钮
将无法点击,只有勾选了同意注册协议才能正常注册。

form表单

<!-- 登陆表单 -->
<form method="post" autocomplete="off" onsubmit="return check()">
  <!-- 用户名输入 -->
  <input type="text"  name="username" id="username" required="required" >
  <!-- 密码输入,禁用自动填充 -->
  <input type="password" autocomplete="new-password" name="password" id="password" required="required">
  <!-- 是否记住密码复选框 -->
  <input type="checkbox" id="isRmbPwd" name="isRmbPwd" checked="checked">记住密码
  <!-- 提交按钮 -->
  <input type="submit" value="提交">
</form>

好吧,其实这是用到JS代码来控制的。

提交检查函数

点击submit按钮时,会调用此函数

function check ()
{
    //获取表单输入:用户名,密码,是否保存密码
    var username = document.getElementById("username").value.trim() ;
    var password = document.getElementById("password").value.trim() ;
    var isRmbPwd = document.getElementById("isRmbPwd").checked ;

    //判断用户名,密码是否为空(全空格也算空)
    if ( username.length != 0 && password.length != 0 )
    {
        //若复选框勾选,则添加Cookie,记录密码
        if ( isRmbPwd == true )
        {   
            setCookie ( "This is username", username, 7 ) ;
            setCookie ( username, password, 7 ) ;
        }
        //否则清除Cookie
        else
        {
            delCookie ( "This is username" ) ;
            delCookie ( username ) ;
        }
        return true ;
    }
    //非法输入提示
    else
    {
        alert('请输入必填字段!!!')
        return false ;
    }   
}

完整表单代码:

文档初始化函数

文档加载完毕后,执行此函数

//将function函数赋值给onload对象
window.onload = function ()
{
    //从Cookie获取到用户名
    var username = getCookie("This is username") ;
    //如果用户名为空,则给表单元素赋空值
    if ( username == "" )
    {
        document.getElementById("username").value="" ;
        document.getElementById("password").value="" ;
        document.getElementById("isRmbPwd").checked=false ;
    }
    //获取对应的密码,并把用户名,密码赋值给表单
    else
    {
        var password = getCookie(username) ;

        document.getElementById("username").value = username ;
        document.getElementById("password").value = password ;
        document.getElementById("isRmbPwd").checked = true ;
    }
}
form action=/e/enews/index.php method=post enctype=multipart/form-data name=userinfoform id=userinfoforminput type=hidden name=enews value=register /input name=groupid type=hidden id=groupid value=?=$groupid? class=input_text /input type=hidden name=ecmsfrom value=/e/DoInfo/ChangeClass.php?mid=12div class=menuh3strong基本信息/strong (必填)/h3/divtable width=100% border=0 cellpadding=0 cellspacing=0trtd class=left用户名/tdtdinput name=username type=text class=input_text id=username size=20 maxlength=30 /*/td/trtrtd class=left密码:/tdtdinput name=password type=password class=input_text id=password size=21 maxlength=20 /*/td/trtrtd class=left重复密码:/tdtdinput name=repassword type=password id=repassword size=21 maxlength=20 class=input_text /*/td/trtrtd class=left邮箱:/tdtdinput name=email type=text class=input_text id=email value= size=30 maxlength=50 /*/td/tr/tabletable width=100% border=0 cellpadding=0 cellspacing=0 tr? if($public_r[regkey_ok]) { ?td class=left验证码:/tdtdinput name=key type=text class=input_text size=10 /nbsp;img src=../../ShowKey/?v=reg align=absmiddle //td/tr? } ? tr td class=leftnbsp;/td tdinput id=checked type=checkbox /label for=checked注册/label/td/trtrtd class=leftnbsp;/tdtdinput type=submit id=register name=Submit value=注 册 class=input_sub/nbsp;nbsp;input type=button name=Submit2 value=返 回 class=input_sub onclick=history.go(-1) //td/tr/table/formscript type=text/javascriptvar checked=document.getElementById(checked)var register=document.getElementById(register)register.onclick=function(){ if(checked.checked==true){ alert(可以注册了) } else{ return false } }/script

运行效果