Javascript实现登录记住用户名和密码功能

 更新时间:2017年03月22日 17:24:56   作者:Resources  
本文主要介绍了Javascript实现登录记住用户名和密码功能的代码。具有很好的参考价值。下面跟着小编一起来看下吧

话不多说,请看代码:

  <script type="text/javascript">
  $(document).ready(function () {
   $("#UserAccount").focus();
   //记住用户名和密码
   $('#remebers').click(function () {
    if ($("#UserAccount").val() == "") {
     alert("用户名不能为空!");
    }
    if($("#UserPassword").val() == "")
    {
     alert("密码不能为空!");
    }
    else {
     if ($('#remebers').attr("checked")) {
      setCookie("uname", $("#UserAccount").val(), 60);
      setCookie("upwd", $("#UserPassword").val(), 60);
     }
     else {
      delCookie("uname");
      delCookie("upwd");
     }
    }
   });
   if (getCookie("uname") != null)
   {
    $('#remebers').attr("checked", "checked");
    $('#UserAccount').val(getCookie("uname"));
    $('#UserPassword').val(getCookie("upwd"));
   }
  })
  //写cookies
  function setCookie(name, value) {
   var Days = 30;
   var exp = new Date();
   exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
   document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
  }
  //读取cookies 
  function getCookie(name) {
   var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
   if (arr = document.cookie.match(reg)) return unescape(arr[2]);
   else return null;
  }
  //删除cookies 
  function delCookie(name) {
   var exp = new Date();
   exp.setTime(exp.getTime() - 1);
   var cval = getCookie(name);
   if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
  }
 </script>
  <div class="main">
     <section id="login_form">
      @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post))
      {
       @Html.AntiForgeryToken()
       @Html.ValidationSummary(true)
       <table>
        <tr>
         <td align="right">账 号:</td>
         <td align="left"><input type="text" id="UserAccount" name="UserAccount" /> @Html.ValidationMessageFor(m => m.UserAccount)</td>
        </tr>
        <tr>
         <td align="right">密 码:</td>
         <td align="left">
          <input type="password" id="UserPassword" name="UserPassword" />
@Html.ValidationMessageFor(m => m.UserPassword)
         </td>
        </tr>
        <tr>
         <td></td>
         <td align="left">
          <input name="remebers" id="remebers" type="checkbox" />
          <span style="color:#4a4949">记住用户名和密码</span>
         </td>
        </tr>
        <tr>
         <td></td>
         <td align="left">
          <input type="submit" name="submit" id="submit" value="" style=" background: url(../../Images/Login/login_submit.jpg) no-repeat; height: 25px; width: 59px; " />
          &nbsp;
          <input type="reset" name="reset" id="reset" value="" style="background: url(../../Images/Login/login_reset.jpg) no-repeat; height: 25px; width: 59px; " />
         </td>
        </tr>
       </table>
      }
     </section>
     <div class="note">
      * 不要在公共场合保存登录信息;<br />
      * 为了保证您的帐号安全,退出系统时请注销登录
      <span id="msg_tip"></span>
     </div>
    </div>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

相关文章

  • Js模块打包exports require import的用法和区别

    Js模块打包exports require import的用法和区别

    这篇文章主要介绍了Js模块打包exports require import的用法和区别,对模块打包感兴趣的同学,可以参考下
    2021-05-05
  • javascript制作的cookie封装及使用指南

    javascript制作的cookie封装及使用指南

    这篇文章主要介绍了javascript制作的cookie封装及使用指南,需要的朋友可以参考下
    2015-01-01
  • jquery SweetAlert插件实现响应式提示框

    jquery SweetAlert插件实现响应式提示框

    为了满足用户体验度,使用SweetAlert插件实现响应式提示框效果非常好,下面通过这篇文章给大家介绍jquery SweetAlert插件实现响应式提示框,需要的朋友可以参考下
    2015-08-08
  • 妙用缓存调用链实现JS方法的重载

    妙用缓存调用链实现JS方法的重载

    方法重载是指在一个类中定义多个同名的方法,但要求每个方法具有不同的参数的类型或参数的个数。简而言之就是:方法重载就是方法名称重复,加载参数不同
    2018-04-04
  • 微信小程序自定义多选事件的实现代码

    微信小程序自定义多选事件的实现代码

    本篇文章主要介绍了微信小程序自定义多选事件的实现代码,小程序和vue一样是没法操作dom的,所以要利用数组的下标和自定义属性来进行三元判断,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • JavaScript学习小结(一)——JavaScript入门基础

    JavaScript学习小结(一)——JavaScript入门基础

    本教程比较适合javascript初学者,对javascript基本知识的小结包括变量,基本类型等知识点,需要的朋友一起来学习吧
    2015-09-09
  • layui table 列宽百分比显示的实现方法

    layui table 列宽百分比显示的实现方法

    今天小编就为大家分享一篇layui table 列宽百分比显示的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript取得WEB安全颜色列表的方法

    JavaScript取得WEB安全颜色列表的方法

    这篇文章主要介绍了JavaScript取得WEB安全颜色列表的方法,分析了web安全颜色的定义及javascript获取web安全颜色的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • Javascript 原型和继承(Prototypes and Inheritance)

    Javascript 原型和继承(Prototypes and Inheritance)

    前面我们看到了如何使用 constructor 来初始化对象。如果这样做,那么每一个创建的新对象都会对那些相同的属性,方法建立一个独立的副本。而实际上有更加有效的方法来指定方法,常量,以及其他一些可被所有该类的对象共享的属性。
    2009-04-04
  • javascript类型系统 Array对象学习笔记

    javascript类型系统 Array对象学习笔记

    这篇文章主要介绍了javascript类型系统之Array对象,整理关于Array对象的学习笔记,感兴趣的小伙伴们可以参考一下
    2016-01-01

最新评论