今天将登录功能彻底完成,加入记住密码自动登录功能,密码在客户端进行第一次加密存储。并修改了一些bug,优化js代码,上一版本太乱了。
需要引入插件jquery.md5.js

可直接在IIS下运行;
用户名:Ethan.zhu
密  码:123456789


首先将按钮单击事件的异步验证提取出来作为一个单独的函数,需要将按钮单击事件里面的变量提取出来定义为全局变量,并且增加一个变量editPass(用来标记是自己输入密码,还是从cookies中读取的密码)
  1. var wrongTypeName, //用户名的错误类型,可以直接作为错误提示信息数组的下标
  2.   wrongTypePwd, //用户密码的错误类型
  3.   wrongNameHtml = new Array("", "请输入用户名", "用户名长度太短", "用户名长度超过12位", "您的用户名或密码错误", "超时,请重新登陆"),
  4.   wrongPwdHtml = new Array("", "请输入密码", "密码长度小于6位", "", "密码中含有非法字符"),
  5.   editPass=false;
复制代码
这里从上一篇的按钮单击事件开始:
  1. $(".btn-submit").click(function () {
  2.             wrongTypeName = 0;
  3.             wrongTypePwd = 0;
  4. var uname = $("#uname").val(), //用户名
  5.             pwd = $("#passwd").val(), //用户密码
  6.             plength = pwd.length,
  7.             nlength = uname.length; //长度
  8. if (nlength == 0)
  9.                 wrongTypeName = 1;
  10. if (nlength > 0 && nlength < 2)
  11.                 wrongTypeName = 2;
  12.     if (nlength > 20)
  13.               wrongTypeName = 3;
  14. if (plength == 0)
  15.                 wrongTypePwd = 1; //这里是对用户名和密码长度的一个判断,并获取错误信息数组的下标。
  16. else {
  17. var patrn = /^(\w){6,20}$/;
  18. if (plength < 6)
  19.                     wrongTypePwd = 2;
  20. if (plength > 50)
  21.                     wrongTypePwd = 3;
  22. if (plength > 6 && plength < 20) {
  23. if (!patrn.exec(pwd))
  24.                         wrongTypePwd = 4; //这里是对用户密码合法性的前端判断,并返回错误数组的下标
  25.                 }
  26.             }
  27.             inputTip(0, wrongNameHtml, wrongTypeName);
  28.             inputTip(1, wrongPwdHtml, wrongTypePwd);

  29. if (wrongTypePwd == 0 && wrongTypeName == 0) {//在用户输入信息完全合法的情况下,即数组下标全部为0 开始执行ajax验证
  30. //alert($.cookie("logout"));
  31. if(editPass){
  32.                     pwd = $.md5(pwd);
  33.                 }
  34.                 $("#passwd").val(pwd);
  35.                 $("#login-form input").attr('disabled', true);
  36.                 $('.remember').unbind('click');
  37. //已经向服务器提交了信息,所以将页面上的所有输入框按钮设置成不可用状态,这样可以有效的避免重复提交
  38. var remb = $('#remember-long').val();
  39.                 ajaxCheck(uname, pwd, remb);
  40.             }
  41.         });
复制代码
cheat on your wife website read cheat on your wife website
married men having affairs developerstalk.com reason women cheat
TOP

变化在33行和41行,
33行用来判断密码是用户在程序内部退出到登录页面的时候是自行输入还是从cookies中读取的。防止二次加密造成服务器验证失败。
41行主要是将ajax处理过程提取出来,同时加入了服务器验证成功之后的记住密码和取消记住密码的操作,方便阅读:
  1. var ajaxCheck =
  2. function (uname, pwd, remb) {
  3.             $(".btn-master").addClass("visibility");
  4.             var $params = "user_name=" + decodeURI(uname) + "&user_pwd=" + decodeURI(pwd) + "&remember=" + decodeURI(remb);
  5.             $.ajax({
  6.                 type: 'POST',
  7.                 url: 'CheckUserLogin.aspx',
  8.                 //async: false,
  9.                 cache: false,
  10.                 dataType: 'json'
  11.                 data: $params,
  12.                 success: function (data, status) {
  13.                     wrongTypeName = data.wrongTypeName;
  14.                     wrongTypePwd = data.wrongTypePwd;
  15.                     var loginSuccess = data.loginSuccess; //获取服务器返回的json数据

  16. if (loginSuccess == 0) {
  17.                         if ($('#remember-long').val() == 1) {//记住密码
  18.                             $.cookie('UserName', uname, { expires: 7, path: '/' });
  19.                             $.cookie('Password', pwd, { expires: 7, path: '/' });
  20.                         }
  21.                         else
  22. if ($('#remember-long').val() == 0) {//取消记住的密码,或者没有记住密码
  23.                             $.cookie('UserName', null,{ expires: 7, path: '/' });
  24.                             $.cookie('Password', null,{ expires: 7, path: '/' });
  25.                         }
  26.                         location.href = "/Members/Members.html"
  27.                     }
  28.                     else {
  29.                         $(".btn-master").removeClass("visibility");
  30.                         $("#login-form input").attr('disabled', false);
  31.                         inputTip(0, wrongNameHtml, wrongTypeName);
  32.                         inputTip(1, wrongPwdHtml, wrongTypePwd);
  33.                     }
  34.                 },
  35.                 error: function () {
  36.                     wrongTypeName = 5;
  37.                     inputTip(0, wrongNameHtml, wrongTypeName);
  38.                     $("#login-form input").attr('disabled', false);
  39.                     $('.remember').bind('click', function () { checkClick(); });
  40.                     $(".btn-master").removeClass("visibility");
  41.                 }
  42.             })
  43.         }
复制代码
want to cheat on my wife click women wanting to cheat
TOP

页面初始化的时候要对记住密码这个过程进行处理:
  1. var rememberPassword = function (logout) {//页面加载完成之后执行自动登录检查
  2. var ckname = $.cookie('UserName');
  3.             var ckpwd = $.cookie("Password");
  4.             if (ckname != "" && ckpwd != "" && ckname != null && ckpwd != null) {
  5.                 $('#remember-long').val("1")
  6.                 $('#remember-long').attr('checked', true);
  7.                 $("#uname").val(ckname); //用户名
  8.                 $('.reg-item').addClass('focus');
  9.                 if (logout=="safe"){
  10.                     $.cookie("logout","",{ expires: 1, path: '/' })
  11.                 }
  12.                 else{
  13.                     $("#passwd").val(ckpwd); //用户密码
  14.                     $(".btn-submit").trigger('click'); //自动登录
  15.                 }
  16.             }
  17.             else {
  18.                 $('#remember-long').val("0")
  19.                 $('#remember-long').attr('checked', false);
  20.             }
  21.         }
  22.        
  23.         var logout = $.cookie("logout");

  24.     //判断用户是否是从内部退出还是直接打开
  25. //如果是从内部退出,那么就不能再次自动登录进去,除非用户刷新了页面
  26.         rememberPassword(logout);
复制代码
TOP

下面是完整的全新的前端脚本:

  1. $(function () {
  2.         var wrongTypeName, //用户名的错误类型,可以直接作为错误提示信息数组的下标
  3.         wrongTypePwd, //用户密码的错误类型
  4.         wrongNameHtml = new Array("", "请输入用户名", "用户名长度太短", "用户名长度超过12位", "您的用户名或密码错误", "超时,请重新登陆"),
  5.         wrongPwdHtml = new Array("", "请输入密码", "密码长度小于6位", "", "密码中含有非法字符"),
  6.         editPass=false;

  7.         $('body').focus(); //让输入框不再自动获取焦点

  8.         $('.reg-action .reg-input').each(function () {
  9.             var items = $(this).parent('.reg-item');
  10.             if ($(this).val()) {
  11.                 items.addClass("focus");
  12.             }
  13.             $(this).bind('focus blur', function (event) {
  14.                 var type = event.type; //获取事件类型

  15. if($(this).attr("id")=="passwd"){
  16.                     editPass = true;
  17.                 }
  18.                 if (type == 'focus') {
  19.                     if (items.hasClass('error')) {
  20.                         $(this).val("");
  21.                         items.removeClass('error');
  22.                     }
  23.                     items.addClass('focus');
  24.                 } else if (!$(this).val()) {
  25.                     items.removeClass('focus');
  26.                 }
  27.             })
  28.         });

  29.         $(".btn-submit").click(function () {
  30.             wrongTypeName = 0;
  31.             wrongTypePwd = 0;
  32.             var uname = $("#uname").val(), //用户名
  33.             pwd = $("#passwd").val(), //用户密码
  34.             plength = pwd.length,
  35.             nlength = uname.length; //长度

  36. if (nlength == 0)
  37.                 wrongTypeName = 1;
  38.             if (nlength > 0 && nlength < 2)
  39.                 wrongTypeName = 2;
  40.             if (nlength > 20)
  41.                 wrongTypeName = 3;
  42.             if (plength == 0)
  43.                 wrongTypePwd = 1; //这里是对用户名和密码长度的一个判断,并获取错误信息数组的下标。
  44. else {
  45.                 var patrn = /^(\w){6,20}$/;
  46.                 if (plength < 6)
  47.                     wrongTypePwd = 2;
  48.               if (plength > 50)
  49.                     wrongTypePwd = 3;
  50.                 if (plength > 6 && plength < 20) {
  51.                     if (!patrn.exec(pwd))
  52.                         wrongTypePwd = 4; //这里是对用户密码合法性的前端判断,并返回错误数组的下标
  53.                 }
  54.             }

  55.             inputTip(0, wrongNameHtml, wrongTypeName);
  56.             inputTip(1, wrongPwdHtml, wrongTypePwd);

  57.             if (wrongTypePwd == 0 && wrongTypeName == 0) {//在用户输入信息完全合法的情况下,即数组下标全部为0 开始执行ajax验证
  58. //alert($.cookie("logout"));

  59. if(editPass){
  60.                     pwd = $.md5(pwd);
  61.                 }
  62.                 $("#passwd").val(pwd);
  63.                 $("#login-form input").attr('disabled', true);
  64.                 $('.remember').unbind('click');
  65.                 //已经向服务器提交了信息,所以将页面上的所有输入框按钮设置成不可用状态,这样可以有效的避免重复提交

  66. var remb = $('#remember-long').val();
  67.                 ajaxCheck(uname, pwd, remb);
  68.             }
  69.         });

  70.         var inputTip = function (index, tipHtml, tipNum) {
  71.             $(".reg-tip").eq(index).html(tipHtml[tipNum]);
  72.             if (tipNum > 0)
  73.                 $(".reg-item").eq(index).addClass("error");
  74.             else
  75.                 $(".reg-item").eq(index).removeClass("error");
  76.         } //定义错误提示信息页面显示函数。由于页面只有两个输入框所以我这里直接指定了index,如果页面上有很多,可以使用$(this).index()

  77. var ajaxCheck = function (uname, pwd, remb) {
  78.             $(".btn-master").addClass("visibility");
  79.             var $params = "user_name=" + decodeURI(uname) + "&user_pwd=" + decodeURI(pwd) + "&remember=" + decodeURI(remb);
  80.             $.ajax({
  81.                 type: 'POST',
  82.                 url: 'CheckUserLogin.aspx',
  83.                 //async: false,
  84.                 cache: false,
  85.                 dataType: 'json',
  86.                 data: $params,
  87.                 success: function (data, status) {
  88.                     wrongTypeName = data.wrongTypeName;
  89.                     wrongTypePwd = data.wrongTypePwd;
  90.                     var loginSuccess = data.loginSuccess; //获取服务器返回的json数据

  91. if (loginSuccess == 0) {
  92.                         if ($('#remember-long').val() == 1) {//记住密码
  93.                             $.cookie('UserName', uname, { expires: 7, path: '/' });
  94.                             $.cookie('Password', pwd, { expires: 7, path: '/' });
  95.                         }
  96.                         else if ($('#remember-long').val() == 0) {//取消记住的密码,或者没有记住密码
  97.                             $.cookie('UserName', null,{ expires: 7, path: '/' });
  98.                             $.cookie('Password', null,{ expires: 7, path: '/' });
  99.                         }
  100.                         location.href = "/Members/Members.html"
  101.                     }
  102.                     else {
  103.                         $(".btn-master").removeClass("visibility");
  104.                         $("#login-form input").attr('disabled', false);
  105.                         inputTip(0, wrongNameHtml, wrongTypeName);
  106.                         inputTip(1, wrongPwdHtml, wrongTypePwd);
  107.                     }
  108.                 },
  109.                 error: function () {
  110.                     wrongTypeName = 5;
  111.                     inputTip(0, wrongNameHtml, wrongTypeName);
  112.                     $("#login-form input").attr('disabled', false);
  113.                     $('.remember').bind('click', function () { checkClick(); });
  114.                     $(".btn-master").removeClass("visibility");
  115.                 }
  116.             })
  117.         }

  118.         var checkClick = function () {
  119.             if ($('#remember-long').attr('checked')) {
  120.                 $('#remember-long').attr('checked', false);
  121.                 $('#remember-long').val("0")
  122.             }
  123.             else {
  124.                 $('#remember-long').attr('checked', true);
  125.                 $('#remember-long').val("1")
  126.             }
  127.         }
  128.         $('.remember').bind('click', function () { checkClick(); });
  129.         $("#remember-long").click(function () { checkClick(); });
  130.         //记住登录的checkbox和label点击的绑定。

  131. if ($.browser.msie && $.browser.version == "6.0") {
  132.             //帮助微软消灭ie6

  133. if ($.cookie('masterShow') != "hidden")
  134.                 $('body').append('<div class="master"><p>您的浏览器是<strong>IE6.0</strong>,漏洞较多,用户体验较差,微软官方将要放弃支持,为了自身电脑安全和获取最佳用户体验建议你根据自身需求升级至<a href="http://windows.microsoft.com/zh-CN/internet-explorer/downloads/ie-8" target="_blank" class="red"><strong>IE8.0</strong></a>以上版本或者使用<a href="http://firefox.com.cn/" target="_blank" class="red"><strong>火狐</strong></a>浏览器</p></div><div class="m-close m-close-short">关闭</div><div class="m-close m-close-long">不再显示</div>');
  135.             $(".master").delay(1000).slideDown('', function () {
  136.                 $(".m-close").fadeIn();
  137.             });
  138.             $(".m-close-short").click(function () {
  139.                 $(".m-close").fadeOut('', function () {
  140.                     $(".master").slideUp();
  141.                 });
  142.             });
  143.             $(".m-close-long").click(function () {
  144.                 $(".m-close").fadeOut('', function () {
  145.                     $(".master").slideUp();
  146.                     $.cookie('masterShow', 'hidden');
  147.                 });
  148.             });
  149.         }

  150.         var rememberPassword = function (logout) {//页面加载完成之后执行自动登录检查

  151. var ckname = $.cookie('UserName');
  152.             var ckpwd = $.cookie("Password");
  153.             if (ckname != "" && ckpwd != "" && ckname != null && ckpwd != null) {
  154.                 $('#remember-long').val("1")
  155.                 $('#remember-long').attr('checked', true);
  156.                 $("#uname").val(ckname); //用户名
  157.                 $('.reg-item').addClass('focus');
  158.                 if (logout=="safe"){
  159.                     $.cookie("logout","",{ expires: 1, path: '/' })
  160.                 }
  161.                 else{
  162.                     $("#passwd").val(ckpwd); //用户密码
  163.                     $(".btn-submit").trigger('click'); //自动登录
  164.                 }
  165.             }
  166.             else {
  167.                 $('#remember-long').val("0")
  168.                 $('#remember-long').attr('checked', false);
  169.             }
  170.         }
  171.        
  172.         var logout = $.cookie("logout");//判断用户是否是从内部退出
  173.         rememberPassword(logout);

  174.         $(document).bind('keydown', 'return', function () { $(".btn-submit").trigger('click'); });
  175.     })
复制代码
TOP

关于页面中涉及的后台程序,我用了页面级别的aspx,当然你也可以使用ashx来处理。这个后台处理负责验证密码是否正确并在用户正确登录的情况下设置session值,如果需要演示,可以在后台定义常量来做验证判断:
  1.         Hashtable ht = new Hashtable();
  2.             string uname = Request.Params["user_name"];
  3.             string pwd = Request.Params["user_pwd"];
  4.             int wrongTypeName = 0;
  5.             int wrongTypePwd = 0;
  6.             uname = PageValidate.InputText(uname, 30);
  7.            
  8.             if (Validator.StrIsNullOrEmpty(uname))
  9.             {
  10.                 wrongTypeName = 1;
  11.             }
  12.             if (Validator.StrIsNullOrEmpty(pwd))
  13.             {
  14.                 wrongTypePwd = 1;
  15.             }
  16.             if (!string.IsNullOrEmpty(uname) && !string.IsNullOrEmpty(pwd))
  17.             {
  18. //以下使用常量来做演示:
  19. string userName="ethan.zhu";
  20. string password ="";//需要MD5加密之后的字符串

  21. if (uname==userName&&password==pwd )
  22.                     ht.Add("loginSuccess", 0);
  23.                 else
  24.                     wrongTypeName = 4;//返回用户名或密码错误

  25. if (wrongTypeName > 0
  26. || wrongTypePwd > 0)
  27.                 {
  28.                     ht.Add("wrongTypeName", wrongTypeName);
  29.                     ht.Add("wrongTypePwd", wrongTypePwd);
  30. }
  31. Response.Write(CreateJsonParams(ht));
  32. }
  33. Response.End();
  34. }
复制代码
将Hashtable转换成json:
  1. public static string CreateJsonParams(Hashtable items)
  2.         {
  3.             string returnStr = "";
  4.             foreach (DictionaryEntry item in items)
  5.             {
  6.                 returnStr += "\"" + item.Key.ToString() + "\":\"" + item.Value.ToString() + "\",";
  7.             }
  8.             return "{" + returnStr.Substring(0, returnStr.Length - 1) + "}";

  9.         }
复制代码
下载完整文件:
附件: 亲,您没有权限下载或查看附件喔:-) 试试登录注册吧!
TOP

TOP

这个很精彩,楼主强大。
why my husband cheated on me i cheat on my husband my husband cheated on me blog
my husband almost cheated on me meet and cheat why men have affairs
TOP

学习啦
my girl friend cheated on me married woman wants cheat men who have affairs
TOP

很好很强大
TOP

正在研究这块,下来学习学习,楼主辛苦了。
free text spy for android trailblz.com best mobile spyware
cheat on my husband open how do i know if my wife cheated
why does husbands cheat go why husband cheat on their wife
TOP