JQueryがユーザー名のリフレッシュ検証を実現する小例

2189 ワード

1.静的ページにテキストボックスとスタイルとjsスクリプトの参照を追加します.
 
  
Code highlighting produced by Actipro CodeHighlighter (freeware)//www.jb51.net/-->


   
   
   
   


   

   

        :
       

   

   



2.cssスタイルシート、テキストボックスの が の 、 が :
 
  
.txtName
{
 border:1px red solid;   
}

3.jsスクリプト:テキストボックスの が の 、 が い.ユーザー がjanesの 、「ユーザー は に します」というメッセージが されます.そうでない 、「ユーザー は です」というメッセージが されます.
 
   
  

Code highlighting produced by Actipro CodeHighlighter (freeware)//www.jb51.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ページコードは、ユーザー が であることを し、 を すために されます.
 
   
  

Code highlighting produced by Actipro CodeHighlighter (freeware)//www.jb51.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(" !");
            else
                Response.Write(" !");

    }
}