JQuery實現(xiàn)用戶名無刷新驗證的小例子
1.在靜態(tài)頁面里添加文本框及樣式和js腳本的引用：
Code highlighting produced by Actipro CodeHighlighter (freeware)http://m.fzitv.net/-->
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>無標(biāo)題頁</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)文本框文字為空時邊框紅色：
.txtName
{
border:1px red solid;
}
3.js腳本：當(dāng)文本框文字為空時邊框紅色；如果用戶名為janes,則提示“用戶名已經(jīng)存在”，否則提示“用戶名可以使用”。
Code highlighting produced by Actipro CodeHighlighter (freeware)http://m.fzitv.net/-->$(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("validator1.aspx?name="+name,null,function(response){
$("#result").html(response);
})
})
})
4..aspx及.cs頁面代碼，用來驗證用戶名是否可用，以返回結(jié)果。
Code highlighting produced by Actipro CodeHighlighter (freeware)http://m.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)文章
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)樹形員工信息表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
下面小編就為大家?guī)硪黄猨query二級目錄選中當(dāng)前頁的css樣式。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
jQuery動態(tài)加載css文件實現(xiàn)方法
使用jQuery來加載一個外部的 css 文件，首先創(chuàng)建一個 link 元素，并將它添加到 標(biāo)記中即可。那么基于jquery代碼如何實現(xiàn)呢？下面小編給大家介紹jQuery動態(tài)加載css文件實現(xiàn)方法，需要的朋友參考下吧2016-06-06
Tooltip（提示框）是一種常見的效果，它通常用在需要進(jìn)一步解釋、說明或提示的某個詞上。這種小效果實現(xiàn)起來雖然不難，但如果你想不勞而獲，可以試試 Tips。2015-07-07
為jQuery-easyui的tab組件添加右鍵菜單功能的簡單實例
下面小編就為大家?guī)硪黄獮閖Query-easyui的tab組件添加右鍵菜單功能的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要為大家詳細(xì)介紹了基于jQuery封裝的分頁組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
jQuery動態(tài)添加 input type=file的實現(xiàn)代碼
有時候需要在頁面上允許用戶上傳多個文件，個數(shù)由用戶自己決定，個數(shù)多了也可以刪除，使用jQuery可以很簡單的實現(xiàn)這個功能2012-06-06
jQuery-serialize()輸出序列化form表單值的方法
jQuery-serialize()輸出序列化表單值在工作中很常見也很實用，于是本人搜集整理了一些，需要了解的朋友可以詳細(xì)參考下2012-12-12
jQuery正在成為Web開發(fā)人員首選的JavaScript庫,作為Web開發(fā)者,除了要了解語言和框架的應(yīng)用技巧外如何提升語言的性能,本文提供即刻提升你的腳本性能的十個步驟 簡單的幾步讓你的JQuery跑得更快 需要的朋友可以參考下2012-12-12
jquery之a(chǎn)jaxfileupload異步上傳插件(附工程代碼)
在處理文件上傳時需要使用到文件的異步上傳，這里使用Jquery Ajax File Uploader這個組件,服務(wù)器端采用struts2來處理文件上傳2013-04-04