1.HTML部分：
<form id="form1" runat="server">
<script src="../Script/jquery-v1.10.2.js" type="text/javascript"></script>
<script src="login.js" type="text/javascript"></script>
<div class="" style="height: 160px">
<div>
<label for="userName">
帐号：</label>
<input type="text" name="userName" />
</div>
<div>
<label for="password">
密码：</label>
<input type="password" name="password" />
</div>
<input type="submit" id="btnSumit" value="登录" />
<p class="msg"> </p>
</div>
</form>
2.引入登录插件：login.js
/*!
* 插件名称：登录插件封装，使用方法：
$('#form1').login({
url: "LoginHandler.ashx",//处理登录验证逻辑的Url
userName: $("input[name='userName']"),//用户名输入框
password: $("input[name='password']"),//密码输入框
msg: $(".msg"), //提示信息
button: $("#btnSumit") //提交按钮
});
*/
(function ($) {
$.fn.login = function (option) {
var defaults = {
url: '/account/login/',
msg: $(this).find('.msg'),
userName: $(this).find("input[name='userName']"),
password: $(this).find("input[name='password']"),
button: $(this).find("#button")
};
var options = $.extend(defaults, option);
var errMsg = {
'inputUserName': '请输入用户名',
'inputPassword': '请填写登录密码',
'passwordLength': '密码应在6-32位字符内',
'noreg': '此账号未注册',
'inviladUserName': '帐号不存在',
'accountNotMatch': '账号密码不匹配',
'userLocked': '帐号锁定中，暂时无法登录',
'serverdown': '服务器繁忙，请稍后再试'
};
//提交数据
function submit() {
var userNameInput = $.trim(options.userName.val());
var passwordInput = $.trim(options.password.val());
if (userNameInput == '') {
showMsg('登录名不能为空');
options.userName.focus();
return;
}
if (passwordInput == '') {
showMsg('密码不能为空');
options.password.focus();
return;
}
$.ajax({
type: "POST",
url: options.url,
data: "userName=" + userNameInput + "&password=" + passwordInput,
success: function (msg) {
var result = eval("[" + msg + "]")[0];
if (result.status == "ok") {
//登录成功处理
showMsg("登录成功....");
} else {
showMsg(errMsg[result.status]);
}
}
});
}
//显示错误信息
function showMsg(msg) {
options.msg.html(msg);
}
//绑定按钮事件
options.button.bind('click', function () {
submit();
return false;
});
};
})(jQuery);
3.页面调用插件：
<script type="text/javascript">
$('#form1').login({
url: "AjaxLogin.aspx",
userName: $("input[name='userName']"),
password: $("input[name='password']"),
msg: $(".msg"),
button: $("#btnSumit")
});
</script>
4.后台处理逻辑（请根据实际需求做相应调整）
using System;
using System.Web;
using System.Web.UI;
namespace Whir.SiteFactory.Website.Admin.Account
{
public partial class AjaxLogin : Page
{
protected void Page_Load(object sender, EventArgs e)
{
string status = ProcessLogin();
Response.Clear();
Response.Write(status);
Response.End();
}
private string ProcessLogin()
{
try
{
string userName = HttpContext.Current.Request.Form["userName"];
string password = HttpContext.Current.Request.Form["password"];
if (string.IsNullOrEmpty(userName))
{
return "{status:'inputUserName'}"; //请输入用户名
}
if (string.IsNullOrEmpty(password))
{
return "{status:'inputPassword'}"; //请填写登录密码
}
if (password.Length < 6 || password.Length > 32)
{
return "{status:'passwordLength'}"; //密码应在6-32位字符内
}
//var user = UserService.GetUserByName(userName);
//if (user == null)
//{
// return "{status:'inviladUserName'}"; //帐号不存在
//}
//if (user.IsLocked)
//{
// return "{status:'userLocked'}"; //帐号锁定中，暂时无法登录
//}
//if (user.Password.ToLower() != password.ToMd5().ToLower())
//{
// return "{accountNotMatch:'ok'}"; //账号密码不匹配
//}
//其他操作：
//写入客户端cookie
//登录日志
return "{status:'ok'}"; //登录成功
}
catch (Exception ex)
{
return "{status:'serverdown'}"; //服务器繁忙，请稍后再试
}
}
}
}
完整Demo下载：
