1、登录注册在同一个页面上，不能再一个form表单中提交。（可以尝试些一个form，根据不同的点击条件进行不同的时间，注意空间名字的命名）
2、前端登录界面代码（不含js和css样式）
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="default.aspx.cs" Inherits="about" %>
<%@ Register Src="../ascx/header.ascx" TagName="header" TagPrefix="uc1" %>
<%@ Register Src="../ascx/footer.ascx" TagName="footer" TagPrefix="uc2" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link type="text/css" href="../images/icon.ico" rel="shortcut icon" />
<link type="text/css" href="../css/base.css" rel="stylesheet" />
<link type="text/css" href="../css/page.css" rel="stylesheet" />
<script src="../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="../webjs/loginjs.js"></script>
<script src="../webjs/Register.js" type="text/javascript"></script>
<title>眼部整形</title>
</head>
<body>
<uc1:header ID="header1" runat="server" />
<div class="banner">
<img src="../images/banner1.jpg"></div>
<div class="winWidth wid1100">
<div class="clearfix pR pdb55">
<!--=============================登录=========================-->
<%-- <form id="loginform" runat="server">--%>
<div class="mdeng fl">
<div class="mlu_title">
<p>
会员登录</p>
</div>
<ul class="mhui">
<li class="mjiao1"><span>用户名：</span>
<input class="search1" type="text" id="txt_Name" name="txt_Name" />
<span id="span_name"></span></li>
<li class="mjiao1 mjiao1_1"><span>密 码：</span>
<input class="search1" type="password" id="Txt_PassWord" />
<span id="span_pwd"></span></li>
<li class="mjiao2"><span>验证码：</span>
<input class="search1" type="text" id="Txt_Code1" />
<%-- <a title="看不清" href="javascript:;" onclick="document.getElementById('<%=txt_YanCode.ClientID%>').src='?width=0&height=0&<%=txt_YanCode.UniqueID%>='+Math.random();"
class="refresh">
<My:ValidateCodeImage ID="txt_YanCode" runat="server" CssClass="refresh-img" title="点击换下一张" />--%>
<img id="img2" src="/VerifyCode.aspx" title="看不清？点击更换" alt="验证码" style="cursor: pointer;
margin-right: 20px;" onclick="this.src=this.src+'?';" width="100" height="32" />
<span id="span_code" style="width: 100px;"></span></li>
<li class="mjiao3">
<input type="checkbox" />请保存我这次的登录信息 <a href="/login-register/find.htm" style="cursor: pointer;">
忘记密码？</a> </li>
<li class="mjiao4">
<input id="btn_login" value="登录" class="search" /></li>
</ul>
</div>
<%-- </form>--%>
<!--=============================注册=========================-->
<form id="Form1" name="form1" runat="server" method="post" onsubmit="return chkForm();">
<div class="mdeng fr">
<div class="mlu_title">
<p>
会员注册</p>
</div>
<ul class="mhui">
<li class="mjiao1"><span>用 户 名：</span>
<input class="search1" type="text" id="customerId" runat="server" onblur="regname()"/>
<div id="customerIdMes" style="color: Red;">
</div>
</li>
<li class="mjiao1 mjiao1_1"><span>密 码：</span>
<input class="search1" id="passwordstr" type="password" runat="server">
<div id="passwordMes" style="color: Red;">
</div>
</li>
<li class="mjiao1 mjiao1_1"><span>确认密码：</span>
<input class="search1" id="Repassword" type="password" runat="server">
<div id="RepasswordMes" style="color: Red;">
</div>
</li>
<li class="mjiao1 mjiao1_2"><span>找回密码问题：</span>
<input type="text" class="search1" id="question" runat="server">
<div id="questionMes" style="color: Red;">
</div>
</li>
<li class="mjiao1 mjiao1_2"><span>找回密码答案：</span>
<input type="text" class="search1" id="answer" runat="server">
<div id="answerMes" style="color: Red;">
</div>
</li>
<li class="mjiao2"><span>验 证 码：</span>
<input class="search1" type="text" id="Txt_Code2" runat="server" />
<img id="img3" src="/VerifyCodeNew.aspx" title="看不清？点击更换" alt="验证码" style="cursor: pointer;
margin-right: 20px;" onclick="this.src=this.src+'?';" width="100" height="32" />
<%-- <div id="span_code2" style="color: Red;"></div>--%>
<span id="span_code2" style="width: 100px;"></span>
</li>
<li class="mjiao4 mjiao5">
<input id="btn_register" value="注 册" class="search" /></li>
<%-- <asp:Button ID="Submit" runat="server" Text="注 册" CssClass="search" OnClick="Submit_Click" />--%>
</li>
</ul>
</div>
</form>
</div>
</div>
<!--End .main-->
<uc2:footer ID="footer1" runat="server" />
</body>
</html>
3、登录loginin.js
$(function () {
//--------------------------------用户登录方法开始-----------------------------
//用户登录验证
$("#btn_login").click(function () {
$.post(
"/ashx/UserCheck.ashx", {
typename: "login",
Name: $("#txt_Name").val(),
pwd: $("#Txt_PassWord").val(),
logincode: $("#Txt_Code1").val()
},
function (returndata) {
// alert(returndata);
if (returndata == "1") {
location.href = "/menber/default.aspx";
} else {
alert("登录失败，请输入正确的用户名和密码！");
}
});
});
//用户登录时验证码的验证
$("#Txt_Code1").blur(function () {
if ($("#Txt_Code1").val() == "") {
$("#span_code").html("验证码不能为空.");
$("#span_code").css("color", "red");
} else {
$.post(
"/ashx/UserCheck.ashx", {
typename: "logincodeverify",
logincode: $("#Txt_Code1").val()
},
function (returndata) {
if (returndata == "1") {
$("#span_code").html("验证码正确");
$("#span_code").css("color", "green");
// $("#btn_login").removeAttr("disabled");
}
else {
$("#span_code").html("验证码输入错误！");
$("#span_code").css("color", "red");
// $("#btn_login").attr("disabled", "disabled");
}
});
}
});
//--------------------------------用户登录方法结束-----------------------------
}); //jquery结束
3、注册js代码
//function $ajax(sUrl, json, fun) { $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", dataType: "json", url: sUrl, data: json, success: fun }); };
$(function () {
//用户名是否存在验证
$("#customerId").blur(function () {
var inputVal = $("#customerId").val();
var reg = /[\w\d]{6,}/g;
if (inputVal == "") {
$("#customerIdMes").html("不允许为空");
// $("#btn_register").attr("disabled", "disabled");
} else if (!reg.test(inputVal)) {
$("#customerIdMes").html("* 请输入6位以上的英文字母或数字的组合");
$("#customerIdMes").css("color", "red");
// $("#btn_register").attr("disabled", "disabled");
} else {
//异步验证用户名是否存在
$.post(
"/ashx/UserCheck.ashx", {
typename: "usernameverify",
userName: $("#customerId").val()
},
function (returndata) {
//用户名存在，返回1。否则返回0
if (returndata == "1") {
$("#customerIdMes").html("* 此用户名已被注册").css("color", "red");
// $("#btn_register").attr("disabled", "disabled");
}
else {
$("#customerIdMes").html("恭喜！此用户名可以使用").css("color", "green");
// $("#btn_register").removeAttr("disabled");
}
});
}
});
//注册密码验证
$("#passwordstr").blur(function () {
//密码验证
var inputVal = $("#passwordstr").val();
var reg = /[\w\d]{6,12}/g;
if (!reg.test(inputVal)) {
$("#passwordMes").html("* 请输入6-12位的英文字母或数字的组合").css("color", "red");
// $("#btn_register").attr("disabled", "disabled");
} else {
$("#passwordMes").html("");
// $("#btn_register").removeAttr("disabled");
}
});
//重输密码验证
$("#Repassword").blur(function () {
var inputVal = $("#Repassword").val();
if ($("#Repassword").val() == $("#passwordstr").val()) {
$("#RepasswordMes").html("");
// $("#btn_register").removeAttr("disabled");
} else {
$("#RepasswordMes").html("* 两次密码输入不同，请重新输入").css("color", "red");
// $("#btn_register").attr("disabled", "disabled");
}
});
//找回密码问题
$("#question").blur(function () {
if ($(this).val() == "") {
$("#questionMes").html("找回密码问题不允许为空").css("color", "red");
// $("#btn_register").attr("disabled", "disabled");
} else {
$("#questionMes").html("").css("color", "green");
// $("#btn_register").removeAttr("disabled");
}
});
//找回密码答案
$("#answer").blur(function () {
if ($(this).val() == "") {
$("#answerMes").html("找回密码答案不允许为空").css("color", "red");
// $("#btn_register").attr("disabled", "disabled");
} else {
$("#answerMes").html("").css("color", "green");
// $("#btn_register").removeAttr("disabled");
}
});
//用户注册时验证码的验证
$("#Txt_Code2").blur(function () {
if ($("#Txt_Code2").val() == "") {
$("#span_code2").html("验证码不能为空.");
$("#span_code2").css("color", "red");
} else {
$.post(
"/ashx/UserCheck.ashx", {
typename: "regcodeverify",
registercode: $("#Txt_Code2").val()
},
function (returndata) {
//验证码正确，返回1
if (returndata == "1") {
$("#span_code2").html("验证码正确");
$("#span_code2").css("color", "green");
// $("#btn_register").removeAttr("disabled");
}
else {
$("#span_code2").html("验证码输入错误！");
$("#span_code2").css("color", "red");
// $("#btn_register").attr("disabled", "disabled");
}
});
}
});
//处理用户注册
$("#btn_register").click(function () {
// alert("123");
//异步验证用户名是否存在
$.post(
"/ashx/UserCheck.ashx", {
typename: "register",
userName: $("#customerId").val(),
password: $("#passwordstr").val(),
repassword: $("#Repassword").val(),
question: $("#question").val(),
answer: $("#answer").val(),
registercode: $("#Txt_Code2").val()
},
function (returndata) {
// alert(returndata);
//注册成功
if (returndata == "1") {
alert("注册成功，请登录");
window.location.reload();
}
else {
alert("注册失败！");
}
});
});
//清空表单内容
$("#passwordstr").val("");
$("#Repassword").val("");
$("#customerId").val("");
$("#question").val("");
$("#answer").val("");
$("#Txt_Code2").val("");
$("#Txt_Code1").val("");
// $("#mailStr").blur(function () {
// //邮箱验证
// var id = $(this).attr("id");
// var inputVal = $(this).val();
// var reg = /^[\w\d]?[\w\d]{3,}@[\w\d]+.[\w\d]+/g
// if (!reg.test(inputVal)) {
// $("#emailMes").html("格式错误，建议输入您的常用邮箱");
// $("#emailMes").attr("class", "red");
// } else {
// var Email = $("#mailStr").val();
// $.ajax({
// type: "Post",
// url: "../ashx/Product.ashx?Fn=CheckUserEmail&mail=" + Email,
// success: function (data) {
// if (data == 1) {
// $("#emailMes").html("恭喜！此邮箱可以使用");
// $("#emailMes").attr("class", "green");
// } else {
// $("#emailMes").html("此邮箱已被注册，请更换");
// $("#emailMes").attr("class", "red");
// }
// },
// error: function (err) {
// //alert("网络超时");
// }
// });
// }
// });
});
/////////////////////////////////////////////////////////////////////////////////////
4、后端处理代码。这里需要使用System.Web.SessionState命名空间， 需要继承IRequiresSessionState接口，该接口标记session的状态可以保存在asp程序池中，这样asp运行时，在其他的后端页面也可以处理到。
<%@ WebHandler Language="C#" Class="UserCheck" %>
using System;
using System.Web;
using System.Web.SessionState;
public class UserCheck : IHttpHandler, IRequiresSessionState
{
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
//用户登录验证码验证
if (context.Request["typename"] == "logincodeverify")
{
context.Response.Write(CheckLogincode(context));
}
//用户注册验证码验证
else if (context.Request["typename"] == "regcodeverify")
{
context.Response.Write(CheckRegistercode(context));
}
//注销
else if (context.Request["typename"] == "logout")
{
context.Session.Clear();
context.Response.Write("1");
}
//处理用户登录.这里每次只能进行一个时间
else if (context.Request["typename"] == "login")
{
string result = "0";
//判断验证码,验证通过
if (CheckLogincode(context) == "1")
{
//判断登录
Model.User loggedUser = checklogin(context);
//用户登录成功
if (loggedUser != null)
{
context.Session.Add("currentUserId", loggedUser.ID.ToString());
context.Session.Add("currentUserName", loggedUser.UserName);
result = "1";
}
//用户登录失败
else {
result = "0";
}
}
//验证码验证失败
else {
//失败写出0
result = "0";
}
context.Response.Write(result);
}
//用户注册用户名验证
else if (context.Request["typename"] == "usernameverify")
{
context.Response.Write(CheckUserIsExist(context));
}
//用户注册验证
else if(context.Request["typename"] == "register"){
string result = "0";
//用户名验证,存在返回1
if (CheckUserIsExist(context) == "1")
{
context.Response.Write(result);
}
//验证码验证
else if (CheckRegistercode(context) == "0")
{
context.Response.Write(result);
}
//用户注册失败
else if (RegisterUser(context) == "0")
{
context.Response.Write(result);
}
else {
result = "1";
context.Response.Write(result);
}
}
}
/// <summary>
/// 添加用户，添加成功返回1
/// </summary>
/// <param name="context"></param>
/// <returns></returns>
public string RegisterUser(HttpContext context) {
string result = "1";
BLL.User userbll = new BLL.User();
Model.User user = new Model.User();
user.UserName = context.Request["userName"].ToString().Trim();
user.Password = context.Request["password"].ToString().Trim();
user.Problem = context.Request["question"].ToString().Trim();
user.Answer = context.Request["answer"].ToString().Trim();
user.IsPass = true;
int i = 0;
try
{
userbll.Add(user, out i);
}
catch(Exception e)
{
}
if (i < 1)
{
result = "0";
}
return result;
}
/// <summary>
/// 用于检查登录的验证码正确性
/// </summary>
/// <param name="context"></param>
/// <returns></returns>
public string CheckLogincode(HttpContext context)
{
//验证成功返回1
if (context.Request["logincode"].ToString().ToLower() == context.Request.Cookies["CheckCode"].Value.ToLower())
{
return "1";
}
else
{
return "0";//失败选择0
}
}
/// <summary>
/// 用于检查注册的验证码正确性，为1正确
/// </summary>
/// <param name="context"></param>
/// <returns></returns>
public string CheckRegistercode(HttpContext context)
{
try
{
if (context.Request["registercode"].ToString().ToLower() == context.Request.Cookies["CheckCodeNew"].Value.ToLower())
{
return "1";
}
else
{
return "0";
}
}
catch {
return "0";
}
}
/// <summary>
/// 用于登录验证
/// </summary>
/// <param name="context"></param>
/// <returns></returns>
public Model.User checklogin(HttpContext context)
{
string username = context.Request["Name"].ToString();
string pwd = context.Request["pwd"].ToString();
//Model.User model = new BLL.User().GetModelBystrWhere(" UserName='" + username + "' and Password='" + md5(pwd, 16) + "'");
Model.User model = new BLL.User().GetModelBystrWhere(" UserName='" + username + "' and Password='" + pwd + "'");
//Model.User model = new BLL.User().GetModelBystrWhere(" UserName='" + username + "'");
//验证成功
if (model != null)
{
//string ke = GetAppSetting("SessKey");
//context.Session[ke] = username;
//这里放session会出错
//context.Session["userid"] = model.ID;
return model;
}
else
{
//context.Session.Add("userid",model.ID);
//context.Session.Add("user",model);
//Model.User myuser = (Model.User)context.Session["user"];
return null;
}
}
public static string md5(string str, int code)
{
if (code == 16) //16位MD5加密（取32位加密的9~25字符）
{
return System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(str, "MD5").ToLower().Substring(8, 16);
}
else//32位加密
{
return System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(str, "MD5").ToLower();
}
}
//检测用户名是否存在.存在返回1，不存在返回0
public static string CheckUserIsExist(HttpContext context)
{
string num = "0";
BLL.User cusBLL = new BLL.User();
string username = context.Request["userName"].ToString().Trim();
if (username != null) {
Model.User cus = cusBLL.GetModelBystrWhere(" UserName='" + username + "'");
if (cus != null)
{
num = "1";
}
else
{
num = "0";
}
}
return num;
}
/// <summary>
/// 获取配置文件KEY VALUE
/// </summary>
/// <param name="key">key</param>
/// <returns></returns>
public static string GetAppSetting(string key)
{
return System.Configuration.ConfigurationManager.AppSettings[key] + "";
}
public bool IsReusable {
get {
return false;
}
}
}
5、注意，登录后将用户model放入到session中，需要开启asp的服务，服务名称为：Asp net state service.
6、这里还有验证码的自动获取，将在下篇文章中介绍。