快捷導(dǎo)航

JQuery實(shí)現(xiàn)用戶名無(wú)刷新驗(yàn)證的小例子

更新時(shí)間：2013年03月22日 14:43:55 作者：

本人也是JQuery初學(xué)者，寫了個(gè)用戶名無(wú)刷新驗(yàn)證的簡(jiǎn)單例子，拿來(lái)分享，共同學(xué)習(xí)一下吧。

1.在靜態(tài)頁(yè)面里添加文本框及樣式和js腳本的引用：

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.dbjr.com.cn/-->
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>無(wú)標(biāo)題頁(yè)</title>
    <script  language ="javascript" 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>
    <form id="form1" runat="server">
    <div>
        用戶名：<input id="txtName" type="text" class ="txtName" />
        <div  id ="result"></div>
    </div>
    </form>
</body>
</html>

2.css樣式表，當(dāng)文本框文字為空時(shí)邊框紅色：

復(fù)制代碼代碼如下:

.txtName
{
border:1px red solid;
}

3.js腳本：當(dāng)文本框文字為空時(shí)邊框紅色；如果用戶名為janes,則提示“用戶名已經(jīng)存在”，否則提示“用戶名可以使用”。

復(fù)制代碼代碼如下:

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.dbjr.com.cn/-->$(function(){
var txtname=$("#txtName");
//輸入文字時(shí)文本框樣式
txtname.keyup(function(){
var name=$(this).val();
if(name=="")
$(this).addClass("txtName");
else $(this).removeClass("txtName");
})
//失去焦點(diǎn)時(shí)驗(yàn)證用戶名是否可用
$("#txtName").blur(function()
{
var name=$(this).val();
$.get("validator1.aspx?name="+name,null,function(response){
$("#result").html(response);
})

})
})

4..aspx及.cs頁(yè)面代碼，用來(lái)驗(yàn)證用戶名是否可用，以返回結(jié)果。

復(fù)制代碼代碼如下:

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.dbjr.com.cn/-->public partial class Validator_validator1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
            string name = Request.QueryString["name"].ToString();
            if (name == "janes")
                Response.Write("該用戶名已經(jīng)存在！");
            else
                Response.Write("該用戶名可以使用！");

    }
}

您可能感興趣的文章: