사용자 이름 non-refresh verify_jquery를 구현하는 JQuery의 작은 예

1. 정적 페이지에 텍스트 상자, 스타일 및 js 스크립트 참조를 추가합니다.

코드 복사 코드는 다음과 같습니다.

Actipro CodeHighlighter(프리웨어)에서 제작한 코드 강조 표시 http://www.jb51.net/-->








 

                       
 

 




2.css 스타일 시트, 텍스트 상자 텍스트가 비어 있으면 테두리가 빨간색입니다.

코드 복사 코드는 다음과 같습니다.

.txtName

{
테두리:1px 빨간색 단색
}

3.js 스크립트: 텍스트 상자 텍스트가 비어 있으면 테두리가 빨간색입니다. 사용자 이름이 janes이면 "사용자 이름이 이미 존재합니다"라는 메시지가 표시되고, 그렇지 않으면 "사용자 이름을 사용할 수 있습니다"라는 메시지가 표시됩니다. ".

코드 복사 코드는 다음과 같습니다.

Actipro CodeHighlighter(프리웨어)에서 제작한 코드 강조 표시http://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( 응답 ){
$("#result").html(응답);
})

})

})

4..aspx 및 .cs 페이지 코드는 사용자 이름이 결과 반환에 사용 가능한지 여부를 확인하는 데 사용됩니다.

코드 복사 코드는 다음과 같습니다.

Actipro CodeHighlighter(프리웨어)에서 생성된 코드 강조 표시http://www.jb51.net/-->public 부분 클래스 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("이 사용자 이름을 사용할 수 있습니다!");

}
}