快捷導(dǎo)航

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

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

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

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

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.fzitv.net/-->
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>無標(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.fzitv.net/-->$(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è)面代碼，用來驗(yàn)證用戶名是否可用，以返回結(jié)果。

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

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.fzitv.net/-->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("該用戶名可以使用！");

    }
}

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)樹形員工信息表
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)樹形員工信息表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
jquery二級(jí)目錄選中當(dāng)前頁(yè)的css樣式
下面小編就為大家?guī)硪黄猨query二級(jí)目錄選中當(dāng)前頁(yè)的css樣式。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-12-12
jQuery動(dòng)態(tài)加載css文件實(shí)現(xiàn)方法
使用jQuery來加載一個(gè)外部的 css 文件，首先創(chuàng)建一個(gè) link 元素，并將它添加到標(biāo)記中即可。那么基于jquery代碼如何實(shí)現(xiàn)呢？下面小編給大家介紹jQuery動(dòng)態(tài)加載css文件實(shí)現(xiàn)方法，需要的朋友參考下吧
2016-06-06
jquery-tips懸浮提示插件分享
Tooltip（提示框）是一種常見的效果，它通常用在需要進(jìn)一步解釋、說明或提示的某個(gè)詞上。這種小效果實(shí)現(xiàn)起來雖然不難，但如果你想不勞而獲，可以試試 Tips。
2015-07-07
為jQuery-easyui的tab組件添加右鍵菜單功能的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄獮閖Query-easyui的tab組件添加右鍵菜單功能的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-10-10
基于jQuery封裝的分頁(yè)組件
這篇文章主要為大家詳細(xì)介紹了基于jQuery封裝的分頁(yè)組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
jQuery動(dòng)態(tài)添加 input type=file的實(shí)現(xiàn)代碼
有時(shí)候需要在頁(yè)面上允許用戶上傳多個(gè)文件，個(gè)數(shù)由用戶自己決定，個(gè)數(shù)多了也可以刪除，使用jQuery可以很簡(jiǎn)單的實(shí)現(xiàn)這個(gè)功能
2012-06-06
jQuery-serialize()輸出序列化form表單值的方法
jQuery-serialize()輸出序列化表單值在工作中很常見也很實(shí)用，于是本人搜集整理了一些，需要了解的朋友可以詳細(xì)參考下
2012-12-12
十個(gè)迅速提升JQuery性能讓你的JQuery跑得更快
jQuery正在成為Web開發(fā)人員首選的JavaScript庫(kù),作為Web開發(fā)者,除了要了解語(yǔ)言和框架的應(yīng)用技巧外如何提升語(yǔ)言的性能,本文提供即刻提升你的腳本性能的十個(gè)步驟簡(jiǎn)單的幾步讓你的JQuery跑得更快需要的朋友可以參考下
2012-12-12
jquery之a(chǎn)jaxfileupload異步上傳插件(附工程代碼)
在處理文件上傳時(shí)需要使用到文件的異步上傳，這里使用Jquery Ajax File Uploader這個(gè)組件,服務(wù)器端采用struts2來處理文件上傳
2013-04-04