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 相关文章推荐
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
JavaScript及jquey实现多个数组的合并操作
Sep 06 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
AngularJS 工作原理详解
Aug 18 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 Javascript
vue watch监控对象的简单方法示例
Jan 07 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遍历文件夹与子目录的函数代码
2011/09/26 PHP
Laravel 5 学习笔记
2015/03/06 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
详解如何较好的使用js
2016/12/16 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
Python列表切片操作实例总结
2019/02/19 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
python 如何调用 dubbo 接口
2020/09/24 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
护理实习自我鉴定
2013/12/14 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
贷款收入证明格式
2015/06/24 职场文书
表扬信范文
2019/04/22 职场文书
创业计划书之美容店
2019/09/16 职场文书
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js