MVC中Javascript封装代码Demo

  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     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <title>xxx系统登陆</title>
  8     <link href="~/Content/css/framework-font.css" rel="stylesheet" />
  9     <link href="~/Content/css/framework-login.css" rel="stylesheet" />
 10     <script src="~/Content/js/jquery/jquery-2.1.1.min.js"></script>
 11     <script src="~/Content/js/cookie/jquery.cookie.js"></script>
 12     <script src="~/Content/js/md5/jquery.md5.js"></script>
 13     <!--[if lte IE 8]>
 14         <div id="errorie"><div>您还在使用老掉牙的IE,正常使用系统前请升级您的浏览器到 IE8以上版本 <a target="_blank" href="http://windows.microsoft.com/zh-cn/internet-explorer/ie-8-worldwide-languages">点击升级</a>&nbsp;&nbsp;强烈建议您更改换浏览器:<a href="http://down.tech.sina.com.cn/content/40975.html" target="_blank">谷歌 Chrome</a></div></div>
 15     <![endif]-->
 16 </head>
 17 <body>
 18     <div style="position: absolute; z-index: 999; top: 20px; left: 20px; color: #fff; font-size: 13px; line-height: 22px;">
 19         在线体验,基于阿里巴巴云主机,采用独立运行环境,提供持续稳定安全服务,24小时均可以访问<br>
 20         用户名 admin 或 guest,密码 0000,请勿在系统内发表不文明信息
 21     </div>
 22     <div class="wrapper">
 23         <div class="container">
 24             <div class="logo">
 25                 <i class="fa fa-modx"></i>
 26                 <h1><span>XXX系统</span>平台</h1>
 27             </div>
 28             <form class="form">
 29                 <div class="row">
 30                     <input id="txt_account" type="text" placeholder="用户名/手机号/邮箱">
 31                     <i class="fa fa-user"></i>
 32                 </div>
 33                 <div class="row">
 34                     <input id="txt_password" type="password" placeholder="登录密码">
 35                     <i class="fa fa-key"></i>
 36                 </div>
 37                 <div class="row">
 38                     <input id="txt_code" maxlength="4" type="text" placeholder="验证码" style=" 190px; float: left;">
 39                     <div style=" 110px; float: right; padding-top: 14px; padding-left: 14px;">
 40                         看不清?<a id="switchCode" href="javascript:void();" style="text-decoration: none;">换一张</a>
 41                         <img id="imgcode" class="authcode" src="~/Login/GetAuthCode" width="80" height="25" />
 42                     </div>
 43                 </div>
 44                 <div class="row">
 45                     <button id="login_button" type="button"><span>登录</span></button>
 46                 </div>
 47                 <div class="row">
 48                 </div>
 49             </form>
 50             <div class="login_tips"></div>
 51         </div>
 52         <ul class="bg-bubbles">
 53             <li></li>
 54             <li></li>
 55             <li></li>
 56             <li></li>
 57             <li></li>
 58             <li></li>
 59             <li></li>
 60             <li></li>
 61             <li></li>
 62             <li></li>
 63         </ul>
 64     </div>
 65     <div class="copyright">
 66         <a href="http://www.nfine.cn" style="text-decoration:none;color:#fff;">xxx开发团队出品</a>
 67         <br>
 68        适用浏览器:IE8以上、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
 69     </div>
 70     <script type="text/javascript">
 71         (function ($) {
 72             $.login = {
 73                 formMessage: function (msg) {
 74                     $('.login_tips').find('.tips_msg').remove();
 75                     $('.login_tips').append('<div class="tips_msg"><i class="fa fa-question-circle"></i>' + msg + '</div>');
 76                 },
 77                 loginClick: function () {
 78                     var $username = $("#txt_account");
 79                     var $password = $("#txt_password");
 80                     var $code = $("#txt_code");
 81                     if ($username.val() == "") {
 82                         $username.focus();
 83                         $.login.formMessage('请输入用户名/手机号/邮箱。');
 84                         return false;
 85                     } else if ($password.val() == "") {
 86                         $password.focus();
 87                         $.login.formMessage('请输入登录密码。');
 88                         return false;
 89                     } else if ($code.val() == "") {
 90                         $code.focus();
 91                         $.login.formMessage('请输入验证码。');
 92                         return false;
 93                     } else {
 94                         $("#login_button").attr('disabled', 'disabled').find('span').html("loading...");
 95                         $.ajax({
 96                             url: "/Login/CheckLogin",
 97                             data: { username: $.trim($username.val()), password: $.md5($.trim($password.val())), code: $.trim($code.val()) },
 98                             type: "post",
 99                             dataType: "json",
100                             success: function (data) {
101                                 if (data.state == "success") {
102                                     $("#login_button").find('span').html("登录成功,正在跳转...");
103                                     window.setTimeout(function () {
104                                         window.location.href = "/Home/Index";
105                                     }, 500);
106                                 } else {
107                                     $("#login_button").removeAttr('disabled').find('span').html("登录");
108                                     $("#switchCode").trigger("click");
109                                     $code.val('');
110                                     $.login.formMessage(data.message);
111                                 }
112                             }
113                         });
114                     }
115                 },
116                 init: function () {
117                     $('.wrapper').height($(window).height());
118                     $(".container").css("margin-top", ($(window).height() - $(".container").height()) / 2 - 50);
119                     $(window).resize(function (e) {
120                         $('.wrapper').height($(window).height());
121                         $(".container").css("margin-top", ($(window).height() - $(".container").height()) / 2 - 50);
122                     });
123                     $("#switchCode").click(function () {
124                         $("#imgcode").attr("src", "/Login/GetAuthCode?time=" + Math.random());
125                     });
126                     var login_error = top.$.cookie('nfine_login_error');
127                     if (login_error != null) {
128                         switch (login_error) {
129                             case "overdue":
130                                 $.login.formMessage("系统登录已超时,请重新登录");
131                                 break;
132                             case "OnLine":
133                                 $.login.formMessage("您的帐号已在其它地方登录,请重新登录");
134                                 break;
135                             case "-1":
136                                 $.login.formMessage("系统未知错误,请重新登录");
137                                 break;
138                         }
139                         top.$.cookie('nfine_login_error', '', { path: "/", expires: -1 });
140                     }
141                     $("#login_button").click(function () {
142                         $.login.loginClick();
143                     });
144                     document.onkeydown = function (e) {
145                         if (!e) e = window.event;
146                         if ((e.keyCode || e.which) == 13) {
147                             document.getElementById("login_button").focus();
148                             document.getElementById("login_button").click();
149                         }
150                     }
151                 }
152             };
153             $(function () {
154                 $.login.init();
155             });
156         })(jQuery);
157     </script>
158 </body>
159 </html>
原文地址:https://www.cnblogs.com/turnip/p/12092354.html