Ajax 사용자 등록 시 폼 검증 실현
아래 캡 처 는 시 나 웨 이 보 의 등록 인터페이스 로 실시 간 사용자 정보 검사,예 를 들 어 핸드폰 번호 와 사용자 이름 등 정 보 를 사용 합 니 다.
그림 1 시 나 웨 이 보 등록 양식
본문
만약 에 지금 우리 에 게 등록 인터페이스 를 실현 하고 실시 간 으로 사용자 정보 가 시스템 의 요구 에 부합 되 는 지 확인 하 라 고 요구한다.
그 중에서 등록 인터페이스 에는 사용자 이름,메 일 주소,비밀번호 와 웨 이 보 주소 등 정보 가 포함 되 어 있다.실시 간 검사:텍스트 상자 가 초점 을 잃 었 을 때 정 보 를 실시 간 으로 검사 합 니 다.예 를 들 어'사용자 이름'텍스트 상자 가 초점 을 잃 었 을 때 페이지 에서 Ajax 요청 을 보 내 데이터베이스 에 사용자 가 사용 할 수 있 는 지 확인 한 다음 검색 결 과 를 전단 페이지 로 되 돌려 줍 니 다.
폼 입력 검사 에 대해 저 희 는 이전 블 로그 의 에서 사용자 정의 폼 정보 검사 플러그 인 을 사용 하여 입력 정 보 를 검사 할 것 입 니 다.
그림 2 등록 검증 과정
등록 폼 디자인
현재,우 리 는 등록 폼 을 정의 합 니 다.그것 은 사용자 이름,메 일 주소,비밀번호 와 웨 이 보 주소 등 정 보 를 포함 합 니 다.시간의 관계 로 인해 우 리 는 이미 등록 폼 인터페이스의 정 의 를 내 렸 습 니 다.구체 적 인 실현 코드 는 다음 과 같 습 니 다.
<body>
<div id="Div1">
<!-- Start Sign Up Form -->
<form action="#signup-form" id="Form1">
<h2>
Sign Up</h2>
<fieldset>
<div class="fieldgroup">
<label for="name">
Name</label>
<input class="form_element" type="text" name="name" validation="required nameAvailable" />
<span class='availability_status'></span>
</div>
<div class="fieldgroup">
<label for="email">
Email</label>
<input class="form_element" type="text" name="email" validation="email" />
<span></span>
</div>
<div class="fieldgroup">
<label for="password">
Password</label>
<input class="form_element" type="password" name="password" validation="password" />
<span></span>
</div>
<div class="fieldgroup">
<label for="weibo">
Weibo</label>
<input class="form_element" type="text" name="weibo" validation="url" />
<span></span>
</div>
<div class="fieldgroup">
<input type="submit" class="submit" value="Sign up">
<span></span>
</div>
</fieldset>
<div class="fieldgroup">
<p>
Already registered? <a href="http://www.cnblogs.com/rush">Sign in</a>.</p>
</div>
</form>
<!-- End Sign Up Form -->
</div>
</body>
그림 3 등록 양식
jQuery Validation 플러그 인
이전 블 로그 에서 정의 한 폼 검사 컨트롤 을 수정 해 야 합 니 다.사용자 이름 검사 와 텍스트 상자 의 초점 잃 은 이벤트(blur event)를 추가 해 야 합 니 다.
우선,저 희 는 Validation 형식 에서 사용자 이름 검사 방법 을 추가 합 니 다.사용자 가 Ajax 요청 을 보 낸 다음 에 데이터베이스 에 이 사용자 이름 이 존재 하 는 지 확인 하여 이 사용자 이름 이 사용 가능 한 지 확인 합 니 다.
nameAvailable: {
check: function(value) {
if (value) {
var dataString = 'username=' + value;
var result;
// Checking availability...
// Loads checking image.
$(".availability_status").html('<img src="loader.gif" align="absmiddle">');
// Sends ajax request to check the name is available or not.
$.ajax({
type: "GET",
url: "UserService.ashx",
data: dataString,
success: function(data) {
// When the checking completed, then loaded corresponding css style.
$('.availability_status').ajaxComplete(function(event, request, settings) {
if (data == false) {
$('.availability_status').html('');
$('.availability_status').removeClass('tick');
$('.availability_status').addClass('error');
return true;
}
else {
$('.availability_status').html('');
$('.availability_status').removeClass('error');
$('.availability_status').addClass('tick');
return false;
}
});
}
});
// Sends a asyn reqeust, return false temporary.
return false;
//// e.preventDefault();
}
else {
$('.availability_status').removeClass('tick');
$('.availability_status').removeClass('error');
return false;
}
},
msg: "",
tip: "Should enter 4-30 characters, support letter, figures and _ or -"
}
다음은 focus 와 blur 이 벤트 를 추가 합 니 다.텍스트 상자 가 초점 을 받 았 을 때 focus 이 벤트 를 촉발 하고 정 보 를 입력 하 라 는 요 구 를 알려 줍 니 다.텍스트 상자 가 초점 을 잃 었 을 때 blur 이 벤트 를 촉발 합 니 다.예 를 들 어 사용자 이름 이 사용 가능 한 지 확인 합 니 다.
이벤트 방법 은 Field 유형 을 공개 하 는 방법 이 어야 하기 때문에 저 희 는 모든 Field 대상 에 게 자신의 이벤트 방법 을 정의 하고 싶 지 않 습 니 다.그래서 저 희 는 원형 체인 방식 으로 이벤트 방법 focus()와 blur()를 공개 하고 구체 적 으로 다음 과 같이 실현 합 니 다.
// The prototype of Field type.
Field.prototype = {
// Public method.
attach: function(event) {
// The object refers to Field object.
var obj = this;
// When field lost focus, then invoked the validate method.
if (event == "blur") {
obj.field.bind("blur", function() {
return obj.validate();
});
}
// When field got focus, then invoked the hint method.
if (event == "focus") {
obj.field.bind("focus", function() {
return obj.hint();
});
}
}
}
데이터 시트 디자인
앞에서 언급 한 등록 폼 의 사용자 이름 가용성 검사 디자인 은 Ajax 요청 을 보 낸 다음 데이터베이스 에 가서 사용자 이름 이 존재 하 는 지 확인 하여 사용자 이름 의 가용성 을 확인 하 는 것 입 니 다.
다음은 데이터베이스 시트 jk 를 추가 합 니 다.user 는 사용자 정 보 를 저장 하 는 데 사용 합 니 다.사용자 이름,비밀번호(주의:프라이버시 정 보 를 고려 하지 않 은 암호 화 저장),디 스 플레이 이름과 등록 날짜 등 을 포함 하고 구체 적 인 디자인 은 다음 과 같 습 니 다.
-- =============================================
CREATE TABLE [dbo].[jk_users](
-- This is the reference to Users table, it is primary key.
[ID] [bigint] IDENTITY(1,1) NOT NULL,
[user_login] [varchar](60) NOT NULL,
[user_pass] [varchar](64) NOT NULL,
[user_nicename] [varchar](50) NOT NULL,
[user_email] [varchar](100) NOT NULL,
[user_url] [varchar](100) NOT NULL,
-- This field get the default from function GETDATE().
[user_registered] [datetime] NOT NULL CONSTRAINT [DF_jk_users_user_registered] DEFAULT (getdate()),
[user_activation_key] [varchar](60) NOT NULL,
[user_status] [int] NOT NULL CONSTRAINT [DF_jk_users_user_status] DEFAULT ((0)),
[display_name] [varchar](250) NOT NULL
)
ajaxform2
그림 4 데이터 시트 디자인
서버 설계
앞에서 저 희 는 사용자 표 의 디자인 을 실 현 했 습 니 다.등록 양식 은 Ajax 를 보 내 서버 에 방문 하여 공개 하 는 방법 을 요청 한 다음 에 이 공개 방법 으로 데이터 베 이 스 를 방문 합 니 다.
다음은 사용자 테이블(jkuser)의 데이터베이스 접근 대상(DAO)은 사용자 이름 이 사용 가능 한 지 확인 하 는 방법 을 포함 하고 있 습 니 다.구체 적 으로 다음 과 같 습 니 다.
/// <summary>
/// The user dao manager.
/// </summary>
public class UserManager
{
private const string Query = "SELECT user_login, user_email, user_url FROM jk_users WHERE (user_login = @user_login)";
/// <summary>
/// Initializes a new instance of the <see cref="UserManager"/> class.
/// </summary>
public UserManager()
{
}
/// <summary>
/// Determines whether the user is available or not, with specified username.
/// </summary>
/// <param name="userName">Name of the user.</param>
/// <returns>
/// <c>true</c> if is available user; otherwise, <c>false</c>.
/// </returns>
public bool IsAvailableUser(string userName)
{
using (var con = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLCONN2"].ToString()))
using (var com = new SqlCommand(Query, con))
{
// Pass user_login parameter to sql statement.
com.Parameters.Add("@user_login", SqlDbType.VarChar).Value = userName;
com.Connection.Open();
return !com.ExecuteReader().HasRows;
}
}
}
그 다음 에 저 희 는 서버 엔 드 류 UserService 를 실현 하여 클 라 이언 트 가 이 를 통 해 UserManager 의 IsAvailableUser()방법 을 호출 하도록 해 야 합 니 다.먼저 일반 처리 프로그램(ASHX 파일)을 만 들 고 ProcessRequest()방법 을 실현 하 며 구체 적 으로 다음 과 같이 실현 해 야 합 니 다.
/// <summary>
/// The user availability check service.
/// </summary>
public class UserService : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
// Response json type.
context.Response.ContentType = "application/json";
context.Response.Charset = "utf-8";
var manager = new UserManager();
string userName = context.Request.QueryString["username"];
// Checks the username empty or not.
if (string.IsNullOrEmpty(userName))
{
throw new Exception("Username can't be empty");
}
// Invokes the IsAvailableUser method.
var result = manager.IsAvailableUser(userName);
// Serializes data to json format.
var json = new DataContractJsonSerializer(result.GetType());
json.WriteObject(context.Response.OutputStream, result);
}
// Whether can resuable by other handler or not.
public bool IsReusable
{
get
{
return true;
}
}
}
전단 실현
등록 폼 은 사용자 이름 을 검사 할 때 입력 상자 오른쪽 에 그림 을 동적 으로 불 러 옵 니 다.여기 서 CSS Sprite 기법 으로 그림 의 동적 불 러 옵 니 다.
페이지 를 불 러 올 때 모든 단독 그림 을 불 러 오 는 것 이 아니 라 전체 조합 그림 을 한 번 에 불 러 옵 니 다.이것 은 개선 할 수 없 는 것 입 니 다.HTTP 요청 을 보 내 조합 그림 을 가 져 오 면 OK 입 니 다.HTTP 요청 횟수 를 크게 줄 이 고 서버 의 압력 을 줄 이 는 동시에 서 스 펜 션 으로 그림 을 불 러 오 는 데 필요 한 시간 지연 을 단축 시 켜 효과 가 원활 하고 멈 추 지 않 습 니 다.
여기 서 우 리 는 온라인 도구 인 Sprite Pad 를 사용 하여 조합 그림 을 디자인 하고 해당 하 는 CSS 코드 를 생 성 할 수 있 습 니 다.
그림 5 조합 사진
위 에서 우 리 는 이미 조합 그림 을 준 비 했 습 니 다.그 다음 에 CSS 코드 를 추가 하여'정확'과'오류'그림 을 동적 으로 불 러 옵 니 다.구체 적 으로 다음 과 같이 실현 합 니 다.
/*CSS Sprite*/
/*Loads tick picture*/
.tick
{
width: 17px;
height: 17px;
margin: 6px 0 0;
float: right;
background: url(../images/tipicon.png);
background-position: 0px -32px;
display: block;
/*text-decoration: none;
vertical-align:middle;*/
}
/*Loads error picture*/
span.error
{
width: 17px;
height: 17px;
margin: 6px 0 0;
float: right;
background: url(../images/tipicon.png);
background-position: 0px -15px;
display: block;
/*text-decoration: none;
vertical-align:middle;*/
}
// Sends ajax request to check the name is available or not.
$.ajax({
type: "GET",
url: "UserService.ashx",
data: dataString,
success: function(data) {
// When the checking completed, then loaded corresponding css style.
$('.availability_status').ajaxComplete(function(event, request, settings) {
if (data == false) {
$('.availability_status').html('');
$('.availability_status').removeClass('tick');
$('.availability_status').addClass('error');
return true;
}
else {
$('.availability_status').html('');
$('.availability_status').removeClass('error');
$('.availability_status').addClass('tick');
return false;
}
});
}
});
<script type="text/javascript">
// Sets display image size.
pic = new Image(16, 16);
pic.src = "loader.gif";
$(function() { // jQuery DOM ready function.
// Get the form object.
var signUpForm = $("#signup-form");
// Invokes the validation method.
signUpForm.validation();
});
</script>
그림 6 사용자 등록 인터페이스
만약 에 여러분 이 깊이 공부 하고 싶다 면 두 개의 멋 진 주 제 를 클릭 할 수 있 습 니 다.jquery 폼 검증 대전JavaScript 폼 검증
본 고 는 주로 Ajax 등록 폼 의 디자인 을 소개 하고 Ajax 요청 을 보 내 는 방식 으로 사용자 이름 의 가용성 을 실시 간 으로 검사 하 며 사용자 정의 폼 검증 플러그 인 을 사용 하여 입력 정보의 정확성 을 검사 합 니 다.
좋은 웹페이지 즐겨찾기
