使用者註冊資訊驗證在web開發中使用的非常多，只要涉及到使用者註冊，就會涉及到註冊資訊的驗證。下面將介紹使用Jquery實現使用者註冊資訊的驗證，在這我就是以驗證使用者名稱是否已經在資料庫中存在為例來介紹使用者註冊資訊驗證。
在IE和Firefox中運行效果：
使用者名稱已經存在：
使用者名稱可以註冊：
1、在使用Jquery之前，確認您是否下載了Jquery架構的庫檔案，如果沒有下載可以到Jquery官方網站http://jquery.com/下載最新的版本。
2、這個DEMO使用的開發環境是vs2008+sql server2005,首先建立一個網站，資料庫名為Ajax,資料庫裡只有一個Users表，
3、建立一個Jquery.aspx頁面,前端代碼如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Jquery.aspx.cs" Inherits="Jquery" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>使用者驗證</title>
<%-- 串連需要使用的js檔案，jquery.min.js檔案為Jquery庫檔案，jqueryCheck.js檔案中寫了checkUsers()函數--%>
<script src="js/jqueryCheck.js" type="text/javascript"></script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<%-- 控制驗證資訊返回結果的樣式--%>
<link href="css/CheckUser.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div class="input"> 使用者名稱：</div> <div class="input"> <input id="txtUserName" type="text" runat="server" /></div>
<div class="input"><input id="btnCheck" type="button" value="檢查使用者名稱是否存在" onclick="checkUsers()"/></div> <div id="checkMsg"></div>
<asp:Button ID="btnReg" runat="server" Text="註冊" onclick="btnReg_Click" />
<asp:Label ID="lblMsg" runat="server" ForeColor="Red"></asp:Label>
</form>
</body>
</html>
Jquery.aspx.cs 頁面代碼如下：
代碼
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
public partial class Jquery : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnReg_Click(object sender, EventArgs e)
{
//在這使用了<input type="text" id="txtUserName" runat="server"/>主要是考慮到可以使
//用 onblur等事件，不一定使用button的onclick事件觸發JavaScript檔案中函數。
string UserName = txtUserName.Value;
//自己到web.config檔案中配置ConnStr
SqlConnection conn = new SqlConnection(ConfigurationManager.AppSettings["ConnStr"].ToString());
conn.Open();
try
{
//由於自己也在學習預存程序，所以在這都使用預存程序O(∩_∩)O~
SqlCommand cmd = new SqlCommand();
cmd.Connection = conn;
cmd.CommandText = "InsertUser";
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Add(new SqlParameter("@UserName", SqlDbType.VarChar, 50));
cmd.Parameters["@UserName"].Value = UserName;
cmd.ExecuteNonQuery();
lblMsg.Text = "註冊成功！";
}
catch (Exception ex)
{
lblMsg.Text = "註冊失敗！";
}
finally
{
conn.Close();
}
}
}
4、下面是jqueryCheck.js檔案的代碼：
function checkUsers()
{
var userName = document.getElementById("txtUserName").value;
$(document).ready(function(){
$.ajax({
type:"GET",
url:"CheckUrl.aspx?userName="+userName,
data:null,
success:function(result){
if(result=="UserError")
{ //從CheckUrl.aspx頁面中返回的資料為UserError時，表示使用者名稱已經存在！
$("#checkMsg").removeClass("checkRight");
$("#checkMsg").addClass("checkError");
$("#checkMsg").text("使用者名稱已經存在！");
//當輸入的使用者名稱已經存在，讓註冊按鈕變灰，不能使用
$("#btnReg").attr("disabled",true);
}
else if (result== "UserRight")
{ //從CheckUrl.aspx頁面中返回的資料為UserRight時，表示該使用者名稱還為註冊！
$("#checkMsg").removeClass("checkError");
$("#checkMsg").addClass("checkRight");
$("#checkMsg").text("使用者名稱未註冊，可用！");
//當輸入的使用者名稱未被註冊，讓註冊按鈕可使用
$("#btnReg").attr("disabled",false);
}
}
});
});
}
5、建立一個驗證資訊處理頁面，即jqueryCheck.js頁面中調用的CheckUrl.aspx頁面，前台頁面只留下如下代碼即可：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckUrl.aspx.cs" Inherits="CheckUrl" %>
後台CheckUrl.aspx.cs頁面代碼如下：
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
public partial class CheckUrl : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string userName = Request["userName"].ToString();
SqlConnection conn = new SqlConnection(ConfigurationManager.AppSettings["ConnStr"].ToString());
conn.Open();
//繼續使用預存程序
SqlCommand cmd = new SqlCommand();
cmd.Connection = conn;
cmd.CommandText = "CheckUser";
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Add(new SqlParameter("@UserName", SqlDbType.VarChar, 50));
cmd.Parameters["@UserName"].Value = userName;
int result = Convert.ToInt32(cmd.ExecuteScalar());
if (result > 0)
{ //上面提到的驗證頁面返回結果
Response.Write("UserError");
}
else
{ //上面提到的驗證頁面返回結果
Response.Write("UserRight");
}
conn.Close();
}
}
}
6、控制頁面的Css頁面代碼如下：
.checkError
{
background-image:url(../images/error.jpg);
padding-left:40px;
font-size:14px;
height:24px;
padding-top:6px;
background-repeat:no-repeat;
float:left;
width:160px;
}
.checkRight
{
background-image:url(../images/right.jpg);
padding-left:40px;
font-size:14px;
height:24px;
padding-top:6px;
background-repeat:no-repeat;
float:left;
width:160px;
}
.input
{
float:left;
}
7、上面兩個檔案中涉及到的儲存過程代碼如下：
CREATE PROCEDURE [dbo].[CheckUser]
@UserName varchar(50)
AS
BEGIN
SELECT count(*) from Users where UserName=@UserName
END
CREATE PROCEDURE [dbo].[InsertUser]
(
@UserName varchar(50)
)
AS
BEGIN
INSERT INTO Users (UserName) values(@UserName)
END
8、這個DEMO的講解結束。
下面為原始碼下載: 原始碼中除了使用Jquery，還有一個頁面是使用javascript寫的。大家也可以參考參考，希望對大家有所協助，有什麼問題大家可以交流交流。
/Files/wanjiabao/Ajax.rar
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
