집 >
기사 > 웹 프론트엔드 > 사용자 이름 non-refresh verify_jquery를 구현하는 JQuery의 작은 예
사용자 이름 non-refresh verify_jquery를 구현하는 JQuery의 작은 예
- WBOY원래의
- 2016-05-16 17:39:39970검색
1. 정적 페이지에 텍스트 상자, 스타일 및 js 스크립트 참조를 추가합니다.
Actipro CodeHighlighter(프리웨어)에서 제작한 코드 강조 표시 http://www.jb51.net/-->
제목 없는 페이지
<링크 유형 = "text/css" rel="stylesheet" href ="validator.css" />
2.css 스타일 시트, 텍스트 상자 텍스트가 비어 있으면 테두리가 빨간색입니다.
.txtName
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("이 사용자 이름을 사용할 수 있습니다!");
}
}