在很多時候我們為了提搞使用者體驗得讓使用者感覺好，今天我們提供一款jquery $.ajax 檢測使用者名稱是否存在哦，就是提供驗證使用者要註冊使用者名稱是否可用，這個功能還必須由ajax來實現，下面提供二款jquery ajax 檢測使用者名稱執行個體。
<!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>jquery $.ajax 檢測使用者名稱是否存在</title>
<script language ="網頁特效" src ="jquery-1.3.2.min.js" type ="text/javascript" ></script>
<script language ="javascript" src ="validator.js" type ="text/javascript" ></script>
<link type ="text/css教程" rel="stylesheet" href ="validator.css" />
</head>
<body>
<div>
使用者名稱：<input id="txtname" type="text" class ="txtname" />
<div id ="result"></div>
</div>
</body>
</html>
接下來就是js了，各位可以自己在網上下載jquery-1.3.2.min.js類庫，我在這裡就不提供了。
建立validator.js，代碼如下：
$(function() {
var txtname = $("#txtname");
//輸入文字時文字框樣式
txtname.keyup(function() {
var name = $(this).val();
if (name == "")
$(this).addclass("txtname");
else $(this).removeclass("txtname");
})
//失去焦點時驗證使用者名稱是否可用
$("#txtname").blur(function() {
var name = $(this).val();
$.get("thylx.asp教程x?name=" + name, null, function(response) {
$("#result").html(response);
})})
})
呵呵，就是怎麼幾行代碼，比js好用多了~~
最後是建立thylx.aspx，thylx.aspx.cs代碼如下：（這裡aspx頁面不用編輯，我們只是用來做資料操作而已，）
protected void page_load(object sender, eventargs e)
{
string name = request.querystring["name"].tostring();
if (name == "thylx")
response.write("該使用者名稱已經存在！");
else
response.write("該使用者名稱可以使用！");
}
下面再看一款式jquery.validate和ajax來驗證使用者重複
jquery.validate上，無疑，jquery.validate是一個功能強大的form驗證外掛程式。
但在不熟悉的情況下，很難靈活的使用它。下面我就說說我在使用他的過程中遇到的問題。
我想實現的功能是（簡單的就不說了）：使用jquery.validate來驗證使用者是否已經註冊，如果已經註冊就及時進行提示。如果你看到這裡（前提是你對jquery.validate熟悉）$("#myform").validate({
rules: {
username: {
required: true,
remote: "check_user.php教程"
}
}
});
想在使用jquery.validate進行用戶端驗證的時候，也要顯示這樣的提示資訊。
remote1: function(value, element, param) {
if ( this.optional(element) )
return "dependency-mismatch";
var previous = this.previousvalue(element);
if (!this.settings.messages[element.name] )
this.settings.messages[element.name] = {};
this.settings.messages[element.name].remote1 = typeof previous.message == "function" ? previous.message(value) : previous.message;
param = typeof param == "string" && {url:param} || param;
if ( previous.old !== value ) {
previous.old = value;
var validator = this;
this.startrequest(element);
var data = {};
data[element.name] = value;
$.ajax($.extend(true, {
url: param,
mode: "abort",
port: "validate" + element.name,
datatype: "json",
data: data,
success: function(response) {
// 這裡是主要修改的地方，我以json的方式返回了一組資料
// response.data：資料
// response.msg:返回的資訊
// response.status:返回的狀態
var valid = response.status;
if ( valid ) {
var submitted = validator.formsubmitted;
validator.prepareelement(element);
validator.formsubmitted = submitted;
validator.successlist.push(element);
validator.showerrors();
} else {
var errors = {};
// 把response.msg作為其錯誤資訊
errors[element.name] = previous.message = response.info;
validator.showerrors(errors);
}
previous.valid = valid;
validator.stoprequest(element, valid);
}
}, param));
return "pending";
} else if( this.pending[element.name] ) {
return "pending";
}
return previous.valid;
}
驗證規則的時候是這樣寫的：
rules: {
txt_username: {
remote1:{
url: "/uc_app/index.php",
type: 'post',
data: {
act:'chkuser',
uid: function(){return $("#txt_username").val();}
}
},
required: true,
minlength: 3,
maxlength: 10
}
}
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
