zoukankan      html  css  js  c++  java

  • 登陆一个系统时，前端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. });
  • 相关阅读:
    phpqrcode生成带logo的二维码图片及带文字的二维码图片
    php 文件压缩zip扩展
    js常用的正则表达操作
    WebViewJavascriptBridge详细使用（转载）
    html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法(转载)
    js面向对象的实现（example 二)
    PHP二维数组（或任意维数组）转换成一维数组的方法汇总
    Yii2实现自定义独立验证器的方法
    yii2.0配置以pathinfo的形式访问
    安装 AdminLTE和 yii2-admin
  • 原文地址：https://www.cnblogs.com/12344321hh/p/8526993.html
Copyright © 2011-2022 走看看