동기 형태 검증의 단점
오류 메시지에 응답 할 때 전체 페이지를 다시로드해야합니다 (캐시가 있지만 클라이언트는 파일을 최신 상태로 유지하기 위해 HTTP 프로토콜을 통해 각 파일이 업데이트되는지 여부를 비교해야합니다).
서버가 잘못 응답 한 후 사용자가 입력 한 모든 정보가 손실되었으며 사용자는 처음부터이를 작성해야합니다 (일부 브라우저는이 데이터를 캐시하는 데 도움이되었습니다).
비동기 검증 양식의 원래 의도
사용자 경험을 향상시킵니다
네트워크 요청을 최대화하고 줄이고 서버 압력을 줄입니다
일반적인 비동기 양식 검증을 살펴 보겠습니다 (작업 번호가 백그라운드에 존재하는지 확인하고 유효한 작업 번호로 존재합니다).
작업 번호를 확인하십시오
코드 사본은 다음과 같습니다.
var base_path = '$ {rc.contextpath}';
var $ workeridinput = $ ( '#workeridinput');
var $ workeriderRor = $ ( '#workerIderRor');
// 사용자가 입력 한 작업 번호가 올바른지 확인
var isworkeridCorrect = false;
var error_worker_id_is_null = "직원 작업 번호가 비어있을 수 없습니다";
var error_worker_id_is_not_correct = "유효한 직원 번호를 입력하십시오";
// 오류 메시지를 표시합니다
함수 showworkeriderror (errormessage) {
$ workeriderror.html (errormessage);
$ workeriderror.show ();
}
// 오류 메시지를 숨 깁니다
$ workeridinput.on ( 'keydown', function () {
$ workeriderror.hide ();
});
// 지난번에 입력 한 작업 번호를 저장합니다
$ workeridinput.on ( 'Focus', function () {
var workerid = $ .trim ($ (this) .val ());
$ (this) .data ( '이전', Workerid);
});
// 흐림시 계산
$ workeridinput.on ( 'blur', function () {
var workerid = $ .trim ($ (this) .val ());
// 길이가 0이면 비어있는 작업 번호가있는 오류 메시지가 표시됩니다.
if (! workerid.length) {
showworkeriderror (error_worker_id_is_null);
거짓을 반환합니다.
}
// 사용자가 현재 입력 한 데이터가 지난번에 입력 한 데이터와 동일하면 배경 인터페이스가
// 사용자가 123456으로 들어가서 백그라운드 인터페이스를 호출한다고 가정하면 반환 결과는 잘못된 작업 번호입니다.
// 사용자가 입력 컨텐츠를 변경 한 후에도 여전히 123456이며 검증 프로그램은 네트워크에 액세스하지 않고 오류 메시지를 직접 표시합니다.
if (workerid == $ (this) .data ( '~')) {
if (! isworkeridCorrect) {
showworkeriderror (error_worker_id_is_not_correct);
}
거짓을 반환합니다.
}
//이 직원 ID가 올바른지 확인하기 위해 배경 인터페이스를 호출
checkworkeridexists (Workerid, 함수 (데이터) {
isworkeridCorrect = data.isworkeridexists;
if (! isworkeridCorrect) {
showworkeriderror (error_worker_id_is_not_correct);
}
});
});
함수 checkworkeridexists (Workerid, Callback) {
$ .ajax ({
URL : base_path + '/forgotpwd/checkworkeridexists.htm',
데이터 : {
Workerid : Workerid
},
성공 : 콜백
});
}
$ workeridform.on ( '제출', function () {
// 우리의 양식은 서버가 true를 반환 할 때만 제출할 수 있습니다.
if (! isworkeridCorrect) {
$ workeridinput.focus ();
거짓을 반환합니다.
}
});
위 코드를 작성한 후 입력 상자의 확인이 기본적으로 수행됩니다.
사용자 경험에 영향을 미치는 것들이 있다고 생각합니다.
캐리지 리턴 작업은 아직 지원되지 않습니다. 오 세상에, 입국하면 양식을 제출할 수 있어야합니다.
사용자의 인터넷 속도가 느리면 제출 버튼을 클릭하면 응답이 없을 것입니다. isworkerIdCorrect는 False이므로 서버 확인이 성공한 경우에만 해당됩니다.
수정 된 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
var base_path = '$ {rc.contextpath}';
var $ workeridinput = $ ( '#workeridinput');
var $ workeriderRor = $ ( '#workerIderRor');
// 사용자가 입력 한 작업 번호가 올바른지 확인
var isworkeridCorrect = false;
// 배경 확인 작업 번호가 완료 되었음
var isworkeridloading = false;
// 사용자가 양식을 제출했는지 확인합니다
var issubmit = false;
var error_worker_id_is_null = "직원 작업 번호가 비어있을 수 없습니다";
var error_worker_id_is_not_correct = "유효한 직원 번호를 입력하십시오";
// 오류 메시지를 표시합니다
함수 showworkeriderror (errormessage) {
$ workeriderror.html (errormessage);
$ workeriderror.show ();
}
// 오류 메시지를 숨 깁니다
$ workeridinput.on ( 'keydown', function () {
$ workeriderror.hide ();
});
// 지난번에 입력 한 작업 번호를 저장합니다
$ workeridinput.on ( 'Focus', function () {
var workerid = $ .trim ($ (this) .val ());
$ (this) .data ( '이전', Workerid);
});
// 흐림시 계산
$ workeridinput.on ( 'blur', function () {
var workerid = $ .trim ($ (this) .val ());
// 길이가 0이면 비어있는 작업 번호가있는 오류 메시지가 표시됩니다.
if (! workerid.length) {
showworkeriderror (error_worker_id_is_null);
거짓을 반환합니다.
}
// 사용자가 현재 입력 한 데이터가 지난번에 입력 한 데이터와 동일하면 배경 인터페이스가
// 사용자가 123456으로 들어가서 백그라운드 인터페이스를 호출한다고 가정하면 반환 결과는 잘못된 작업 번호입니다.
// 사용자가 입력 컨텐츠를 변경 한 후에도 여전히 123456이며 검증 프로그램은 네트워크에 액세스하지 않고 오류 메시지를 직접 표시합니다.
if (workerid == $ (this) .data ( '~')) {
if (! isworkeridCorrect) {
showworkeriderror (error_worker_id_is_not_correct);
}
거짓을 반환합니다.
}
//이 직원 ID가 존재하는지 확인하기 위해 배경 인터페이스를 호출
checkworkeridexists (Workerid, 함수 (데이터) {
isworkeridCorrect = data.isworkeridexists;
if (! isworkeridCorrect) {
showworkeriderror (error_worker_id_is_not_correct);
}
});
});
함수 checkworkeridexists (Workerid, Callback) {
$ .ajax ({
URL : base_path + '/forgotpwd/checkworkeridexists.htm',
데이터 : {
Workerid : Workerid
},
beforesend : function () {
// 요청을 보내기 전에 작업 번호가 확인됩니다.
isworkeridloading = true;
},
성공 : 콜백,
완료 : function () {
// 끝 후에 로고를 닫습니다
isworkeridloading = false;
// 배경 확인 과정에서 사용자가 양식을 제출하면 여기에서 자동으로 제출합니다.
if (issubmit) {
$ workeridform.submit ();
}
}
});
}
// 양식을 입력하십시오
$ workeridinput.on ( 'keypress', function (e) {
if (e.which === 13) {
$ (this) .Blur ();
$ workeridform.submit ();
}
});
$ workeridform.on ( '제출', function () {
// 작업 번호가 백그라운드에서 체크인 경우 사용자가 양식을 제출 한 것으로 식별됩니다.
if (isworkerIdloading) {
issubmit = true;
거짓을 반환합니다.
}
if (! isworkeridCorrect) {
$ workeridinput.focus ();
거짓을 반환합니다.
}
});
최종 효과에서, 그림의 두 입력 상자는 비동기 검증이지만 효과는 동기식과 동일하게 보입니다.
GPRRS 네트워크는 그림에서 느린 네트워크 속도를 시뮬레이션하는 데 사용됩니다.
복제 다이어그램