登陆一个系统时，前端js实现的验证，记住密码等功能

记住密码部分：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
  6. <title>记住密码</title>
  7. </head>
  8. <body>
  9. <form id="loginForm">   //表单
  10.   <input id="user"type="text"placeholder="用户名"><br>
  11.   <input id="pswd"type="password"placeholder="密码"><br>
  12.   <label><input id="remember"type="checkbox">记住密码</label><br>
  13.   <input type='submit'value="登录">
  14. </form>
  15. <script>
  16.   window.onload = function(){
  17.     varoForm = document.getElementById('loginForm');
  18.     varoUser = document.getElementById('user');
  19.     varoPswd = document.getElementById('pswd');
  20.     varoRemember = document.getElementById('remember');
  21.     //页面初始化时，如果帐号密码cookie存在则填充
  22.     if(getCookie('user') && getCookie('pswd')){
  23.       oUser.value = getCookie('user');
  24.       oPswd.value = getCookie('pswd');
  25.       oRemember.checked = true;
  26.     }
  27.     //复选框勾选状态发生改变时，如果未勾选则清除cookie
  28.     oRemember.onchange = function(){
  29.       if(!this.checked){
  30.         delCookie('user');
  31.         delCookie('pswd');
  32.       }
  33.     };
  34.     //表单提交事件触发时，如果复选框是勾选状态则保存cookie
  35.     oForm.onsubmit = function(){
  36.       if(remember.checked){
  37.         setCookie('user',oUser.value,7); //保存帐号到cookie，有效期7天
  38.         setCookie('pswd',oPswd.value,7); //保存密码到cookie，有效期7天
  39.       }
  40.     };
  41.   };
  42.   //设置cookie
  43.   functionsetCookie(name,value,day){
  44.     vardate = newDate();
  45.     date.setDate(date.getDate() + day);
  46.     document.cookie = name + '='+ value + ';expires='+ date;
  47.   };
  48.   //获取cookie
  49.   functiongetCookie(name){
  50.     varreg = RegExp(name+'=([^;]+)');
  51.     vararr = document.cookie.match(reg);
  52.     if(arr){
  53.       returnarr[1];
  54.     }else{
  55.       return'';
  56.     }
  57.   };
  58.   //删除cookie
  59.   functiondelCookie(name){
  60.     setCookie(name,null,-1);
  61.   };
  62. </script>
  63. </body>
  64. </html>

验证框中是否有值，没有就提醒

  1. //提交
  2. $("#submit").click(function() {
  3.            document.getElementById("name").innerText = "";
  4.     　　document.getElementById("pswd").innerText = "";
  5.            if($("#username").val()=="" || $("#username").val()==null){
  6.                   document.getElementById("name").innerText = "用户名不能为空";
  7.                   $("#username").focus();
  8.                   return false;
  9.            }else if($("#password").val()=="" || $("#password").val()== null){
  10.                  document.getElementById("pswd").innerText = "密码不能为空";
  11.                  $("#password").focus();
  12.                  return false;
  13.            }
  14. });
posted @ 2018-03-08 10:39  12344321hh  阅读(1300)  评论(0)  编辑  收藏  举报