您的位置：首页 > Web前端 > JQuery

使用jQuery实现无刷新效果验证用户名

2012-10-12 14:46 519 查看

操作：页面(CheckName.aspx)输入用户名---->点击Check按钮---->经由后台验证(Check.aspx.cs)---->返回验证信息

CheckName.aspx页面代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CheckName.aspx.cs" Inherits="JSTest.CheckName" %>

<!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 runat="server">
<title>Untitled Page</title>
<script type="text/javascript" language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var userNameVal = $("#txtUserName");
$("#btnCheckUserName").click(function(){
var userName = userNameVal.val();
if(userName==""){
alert("用户名不允许为空！");
}else{
$("#img").show();
$.get("Check.aspx?userName="+userName,null,function(response){
$("#msg").html(response);
$("#img").hide();
});
}
});
userNameVal.keyup(function(){
var value = userNameVal.val();
$("#msg").html(" ");
if(value==""){
userNameVal.addClass("userText");
}else{
$(this).removeClass("userText");
}
});
});
</script>
<style type="text/css">
.userText{
border:1px solid red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table border="1">
<tr>
<th>标题</th>
<th>内容</th>
<th>按钮</th>
</tr>
<tr>
<td><label for="txtUserName">用户名</label></td>
<td><input id="txtUserName" type="text" class="userText" /></td>
<td><input id="btnCheckUserName" type="button" value="Check" /></td>
</tr>
</table>
<div id="msg"></div>
<div id="img" style="display:none"><img title="" alt="" src="img/ggg.gif" /></div>
</form>
</body>
</html>

Check.aspx.cs代码

protected void Page_Load(object sender, EventArgs e)
{
string userName = Request.QueryString["userName"].ToString();
if (userName == "绿树临风之丘")
{
Thread.Sleep(3000);//延迟一下
Response.Write("用户名已存在！");
}
else
{
Thread.Sleep(3000);
Response.Write("此用户名还未被注册！");
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航