數據表：
create table users
(
uname varchar(20),
uemail varchar(50),
uinfo varchar(500)
)
AjaxRegister.aspx頁面：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
font: 12px/19px Arial, Helvetica, sans-serif;
color: #666;
}
form div
{
margin: 5px 0;
}
.int label
{
float: left;
width: 100px;
text-align: right;
}
.int input
{
padding: 1px 1px;
border: 1px solid #ccc;
height: 16px;
}
.sub
{
padding-left: 100px;
}
.sub input
{
margin-right: 10px;
}
.formtips
{
width: 200px;
margin: 2px;
padding: 2px;
}
.onError
{
background: #FFE0E9 url(../img/reg3.gif) no-repeat 0 center;
padding-left: 25px;
}
.onSuccess
{
background: #E9FBEB url(../img/reg4.gif) no-repeat 0 center;
padding-left: 25px;
}
.high
{
color: red;
}
</style>
<script src="../JS/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
//文本框失去焦點後
$('form :input').change(function() {
var $parent = $(this).parent();
$parent.find(".formtips").remove();
//驗證用戶名
if ($(this).is('#username')) {
if (this.value == "" || this.value.length < 6) {
var errorMsg = '請輸入至少6位的用戶名.';
$parent.append('<span id="sp1" class="formtips onError">' + errorMsg + '</span>');
} else {
var name = this.value;
var options = {
type: "GET",
url: "CheckName.aspx?name=" + name,
success: function(data) {
if (data == "0") {
$parent.append('<span id="sp1" class="formtips onError">用戶名已存在</span>');
}
else {
$parent.append('<span id="sp1" class="formtips onSuccess">用戶名可用</span>');
}
},
error: function() {
alert("服務器異常！");
}
};
$.ajax(options);
}
}
//驗證郵件
if ($(this).is('#email')) {
if (this.value == "" || (this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))) {
var errorMsg = '請輸入正確的E-Mail地址.';
$parent.append('<span class="formtips onError">' + errorMsg + '</span>');
} else {
var okMsg = '輸入正確.';
$parent.append('<span class="formtips onSuccess">' + okMsg + '</span>');
}
}
}).keyup(function() {
$(this).triggerHandler("blur");
}).focus(function() {
$(this).triggerHandler("blur");
}); //end blur
//重置
$('#res').click(function() {
form1.reset();
$("span").remove();
});
$("#send").click(function() {
var name = $("#username").val();
var email = $("#email").val();
var personinfo = $("#personinfo").val();
if (name.length >= 6 && email.length >= 6 && personinfo.length > 0) {
var options = {
type: "POST",
url: "Regist.aspx",
data: { name: name, email: email, info: personinfo },
success: function(data) {
if (data == "1") {
alert("註冊成功！");
}
else {
alert("註冊失敗！");
}
},
error: function() {
alert("服務器異常！");
}
};
$.ajax(options);
}
else {
return;
}
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="int">
<label for="username">
用戶名:</label>
<input type="text" id="username" class="required" />
</div>
<div class="int">
<label for="email">
郵箱:</label>
<input type="text" id="email" class="required" />
</div>
<div class="int">
<label for="personinfo">
個人資料:</label>
<input type="text" id="personinfo" />
</div>
<div class="sub">
<input type="button" value="提交" id="send" /><input type="reset" id="res" />
</div>
</form>
</body>
</html>
CheckName.aspx頁面：
public partial class CheckName : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string name = Request["name"];
if (Check(name))
{
Response.Write("0");
Response.End();
}
else
{
Response.Write("1");
Response.End();
}
}
SqlConnection conn = new SqlConnection("server=.;database=Example;uid=sa;pwd=****");
public bool Check(string name)
{
string sql = string.Format("select count(*) from users where uname='{0}'", name);
SqlCommand cmd = new SqlCommand(sql, conn);
try
{
conn.Open();
return (int)cmd.ExecuteScalar() > 0;
}
catch (Exception)
{
throw;
}
finally
{
conn.Close();
}
}
}
Login.aspx頁面：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../JS/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#txtname").focus(function() {
if ($(this).val() == this.defaultValue) {
$(this).val("");
}
}).blur(function() {
if ($(this).val() == '') {
$(this).val(this.defaultValue);
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
用戶名：<input type="text" id="txtname" style="color: #808080" value="請輸入用戶名" />
密碼：<input type="text" id="txtpwd" />
<input type="button" id="btn1" value="登錄" />
</div>
</form>
</body>
</html>
Register.aspx頁面：
public partial class Register : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string name = Request["name"];
string email=Request["email"];
string info=Request["info"];
bool r = RegisterUser(name,email,info);
if (r)
{
Response.Write("1");
Response.End();
}
else
{
Response.Write("0");
Response.End();
}
}
}
SqlConnection conn = new SqlConnection("server=.;database=Example;uid=sa;pwd=****");
public bool RegisterUser(string name, string email, string info)
{
string sql = string.Format("insert into users values('{0}','{1}','{2}')", name, email, info);
SqlCommand cmd = new SqlCommand(sql,conn);
try
{
conn.Open();
return cmd.ExecuteNonQuery() > 0;
}
catch (Exception)
{
throw;
}
finally
{
conn.Close();
}
}
}