记住密码部分：

  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. });

登陆一个系统时，前端js实现的验证，记住密码等功能的更多相关文章

  1. jquery.cookie.js 操作cookie实现记住密码功能的实现代码

    jquery.cookie.js操作cookie实现记住密码功能,很简单很强大,喜欢的朋友可以参考下.   复制代码代码如下: //初始化页面时验证是否记住了密码 $(document).ready( ...

  2. 通过js来设置cookie和读取cookie，实现登陆时记住密码的功能

    function setCookie(){ //设置cookie var loginCode = $("#login_code").val(); //获取用户名信息 var pwd ...

  3. 一个自己实现的js表单验证框架。

    经常要做一些表单验证的操作,每次都是用现成的框架,比如jquery,bootstrap等的验证插件,虽然也很强大,也很好用,可就是用起来需要引入许多js库,还有里面功能太多,感觉不太符合自己的需求.最 ...

  4. Long类型转json时前端js丢失精度解决方案

    一.问题背景 Java后端开发过程中,尤其是id字段,因数值太大,通过json形式传输到前端后,在js解析时,会丢失精度. 如果对精度丢失没有什么概念,可以看一个知乎的帖子,来感受一下:https:/ ...

  5. yii 前端js动态添加验证规则

    在使用 activeForm 生成表单及验证时,默认是按照 model 里的 rules 生成js验证,model 验证在加载完页面后生效,不可修改,如果需要扩展.动态验证,需要使用js来配合 直接上 ...

  6. jquery.cookie.js操作cookie实现“记住密码”，很简单很强大

    //初始化页面时验证是否记住了密码 $(document).ready(function() { if ($.cookie("rmbUser") == "true&quo ...

  7. JS实现登录页面记住密码和enter键登录

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>按 ...

  8. Vue 浅谈前端js框架vue

    Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...

  9. java项目中登陆时记住密码

    1.在登陆的时候记住密码,不知自动登陆: 2.登陆页面,填写用户名,密码,点击记住密码,下次进入登陆页面的时候,填写同样的用户名,密码自动填充(在不一次会话的情况下也就是说在不关闭浏览器的情况下): ...

随机推荐

  1. spring boot 异常汇总

    spring boot JPA 异常: org.springframework.data.mapping.PropertyReferenceException: No property role fo ...

  2. JS 数组的常用方法详解归纳之改变原数组方法

    shift() 把数组的第一个元素从其中删除,并返回第一个元素的值, 如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined 值.请注意,该方法不创建新数组,而是直接修改 ...

  3. P1067多项式输出

    这道题是2009普及组的题,仍然是一个字符串+模拟.(蒻到先不刷算法) 这道题的题干给了很多的提示,也很全面,但是当我把种种情况都考虑到了后,在写代码的过程中仍然出现了很多的错误,wa了三四次.其实导 ...

  4. Tomcat域名与服务器多对多配置

    参考: https://www.cnblogs.com/yueshutong/p/9381566.html

  5. P2523 [HAOI2011]Problem c

    传送门 先考虑如何判断无解,设 $sum[i]$ 表示确定的人中,编号大于 $i$ 的人的人数 如果 $sum[i]>n-i+1$ 则无解,进一步考虑设 $f[i][j]$ 表示当前确定完编号大 ...

  6. 在Myeclipse下查看Java字节码指令信息

         在实际项目开发中,有时为了了解Java编译器内部的一些工作,需要查看Java文件对应的具体的字节码指令集,这里提供两种方式供参考. 一.使用javap命令      javap是JDK提供的 ...

  7. Paper Reading_Distributed System

    最近(以及预感接下来的一年)会读很多很多的paper......不如开个帖子记录一下读paper心得 Mark一个上海交通大学东岳网络工作室的paper notebook Mark一个大神的笔记 Ed ...

  8. 关于javaweb 项目 ssm框架 启动tomcat服务器同时启动一个socket服务

    1.创建监听类 import javax.servlet.ServletContext; import javax.servlet.ServletContextEvent; import javax. ...

  9. JavaEE高级-Maven学习笔记

    Maven简介 1.Maven是一款服务于Java平台的自动化构建工具. 2.构建: - 概念:以“Java源文件”.“框架配置文件”.“JSP”.“HTML”.“图片”等资源为“原料”,去“生产”一 ...

  10. Java 应用中的日志

    frankiegao123 芋道源码 日志在应用程序中是非常非常重要的,好的日志信息能有助于我们在程序出现 BUG 时能快速进行定位,并能找出其中的原因. 但是,很多介绍 AOP 的地方都采用日志来作 ...