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


Posted in Javascript onMarch 22, 2017

话不多说,请看代码:

<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; " />
           
          <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>

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

Javascript 相关文章推荐
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
Bootstrap 布局组件(全)
Jul 18 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
JavaScript下拉菜单功能实例代码
Mar 01 Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
vue 插槽简介及使用示例
Nov 19 Vue.js
jquery实现图片平滑滚动详解
Mar 22 #jQuery
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 #Javascript
jQuery轻松实现无缝轮播效果
Mar 22 #jQuery
JavaScript登录记住密码操作(超简单代码)
Mar 22 #Javascript
原生JS京东轮播图代码
Mar 22 #Javascript
10道典型的JavaScript面试题
Mar 22 #Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 #jQuery
You might like
PHP编码转换
2012/11/05 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
PDO::query讲解
2019/01/29 PHP
php源码的安装方法和实例
2019/09/26 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
jQuery ready函数滥用分析
2011/02/16 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
2015/02/02 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
原生JS实现天气预报
2020/06/16 Javascript
Python实现的ini文件操作类分享
2014/11/20 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
python实现简单俄罗斯方块
2020/03/13 Python
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
财务总监岗位职责
2015/02/03 职场文书
初中信息技术教学反思
2016/02/16 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
详解CSS故障艺术
2021/05/25 HTML / CSS
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS