JQuery实现用户名无刷新验证的小例子

  1.在静态页面里添加文本框及样式和js脚本的引用:

  

复制代码 代码如下:

  Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.glzy8.com/-->

  <html xmlns="http://www.w3.org/1999/xhtml" >

  <head id="Head1" runat="server">

  <title>无标题页</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样式表,当文本框文字为空时边框红色:

  

复制代码 代码如下:

  .txtName

  {

  border:1px red solid;

  }

  3.js脚本:当文本框文字为空时边框红色;如果用户名为janes,则提示“用户名已经存在”,否则提示“用户名可以使用”。

  

复制代码 代码如下:

  Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.glzy8.com/-->$(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页面代码,用来验证用户名是否可用,以返回结果。

  

复制代码 代码如下:

  Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.glzy8.com/-->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("该用户名已经存在!");

  else

  Response.Write("该用户名可以使用!");

  }

  }