JavaScript는 비동기식 확인 양식을 동기식 form_javascript 기술로 다시 작성합니다.

동기식 양식 유효성 검사의 단점

오류 메시지에 응답할 때 전체 페이지를 다시 로드해야 합니다. (캐싱이 있더라도 클라이언트는 파일을 최신 상태로 유지하기 위해 각 파일이 http 프로토콜을 통해 업데이트되었는지 여부를 계속 비교해야 합니다.)
서버가 오류로 응답하면 사용자가 이전에 입력한 모든 정보가 손실되므로 사용자는 처음부터 정보를 입력해야 합니다(일부 브라우저에서는 이 데이터를 캐시합니다).

비동기 인증폼의 원래 의도

사용자 경험 개선
네트워크 요청을 최소화하고 서버 부담을 줄입니다
일반적인 비동기식 폼 확인을 살펴보겠습니다(백그라운드에 사원번호가 존재하는지 확인하고, 존재한다면 유효한 사원번호인지 확인)

사원번호 확인

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

var BASE_PATH = '${rc.contextPath}';
var $workerIdInput = $('#workerIdInput');
var $workerIdError = $('#workerIdError');
//사용자가 입력한 작업번호가 맞는지 확인
var isWorkerIdCordirect = false;
var ERROR_WORKER_ID_IS_NULL = "직원 ID는 비워둘 수 없습니다.";
var ERROR_WORKER_ID_IS_NOT_CORRECT = "유효한 직원 ID를 입력하세요.";
//오류 메시지 표시
함수 showWorkerIdError(errorMessage) {
$workerIdError.html(errorMessage);
$workerIdError.show();
}
//오류 메시지 숨기기
$workerIdInput.on('keydown', function() {
$workerIdError.hide();
});
//마지막으로 입력한 작업번호 저장
$workerIdInput.on('focus', function() {
var WorkerId = $.trim($(this).val());
$(this).data('이전', 작업자 ID);
});
//흐릿하게 할 때 확인
$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 (!isWorkerIdCorrent) {
showWorkerIdError(ERROR_WORKER_ID_IS_NOT_CORRECT);
}
거짓을 반환합니다.
}
//백엔드 인터페이스를 호출하여 직원 ID가 올바른지 확인
checkWorkerIdExists(workerId, function(data) {
isWorkerIdCordirect = data.isWorkerIdExists;
If (!isWorkerIdCorrent) {
showWorkerIdError(ERROR_WORKER_ID_IS_NOT_CORRECT);
}
});
});
함수 checkWorkerIdExists(workerId, 콜백) {
$.ajax({
URL: BASE_PATH '/forgotPwd/checkWorkerIdExists.htm',
데이터: {
작업자 ID: 작업자 ID
},
성공: 콜백
});
}
$workerIdForm.on('제출', function() {
//서버가 true를 반환하는 경우에만 양식을 제출할 수 있습니다
if (!isWorkerIdCorrent) {
$workerIdInput.focus();
거짓을 반환합니다.
}
});

위 코드를 작성하면 기본적으로 입력창 검증이 완료됩니다.

아직 사용자 경험에 영향을 미치는 부분이 있는 것 같아요
캐리지 리턴 작업은 아직 지원되지 않습니다. 맙소사, 캐리지 리턴도 양식을 제출할 수 있어야 합니다
사용자의 인터넷 속도가 느린 경우 isWorkerIdCorlect가 false이므로 제출 버튼을 눌렀을 때 응답이 없으며, 서버 확인이 성공한 경우에만 true입니다

수정된 코드는 다음과 같습니다.

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

var BASE_PATH = '${rc.contextPath}';
var $workerIdInput = $('#workerIdInput');
var $workerIdError = $('#workerIdError');
//사용자가 입력한 작업번호가 맞는지 확인
var isWorkerIdCordirect = false;
//사원ID 백그라운드 인증 완료 여부 확인 (true: 인증 진행 중, false: 인증이 시작되지 않았거나 종료된 상태)
var isWorkerIdLoading = false;
//사용자가 양식을 제출했는지 확인
var isSubmit = false;
var ERROR_WORKER_ID_IS_NULL = "직원 ID는 비워둘 수 없습니다.";
var ERROR_WORKER_ID_IS_NOT_CORRECT = "유효한 직원 ID를 입력하세요.";
//오류 메시지 표시
함수 showWorkerIdError(errorMessage) {
$workerIdError.html(errorMessage);
$workerIdError.show();
}
//오류 메시지 숨기기
$workerIdInput.on('keydown', function() {
$workerIdError.hide();
});
//마지막으로 입력한 작업번호 저장
$workerIdInput.on('focus', function() {
var WorkerId = $.trim($(this).val());
$(this).data('이전', 작업자 ID);
});
//흐릿하게 할 때 확인
$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 (!isWorkerIdCorrent) {
showWorkerIdError(ERROR_WORKER_ID_IS_NOT_CORRECT);
}
거짓을 반환합니다.
}
//백엔드 인터페이스를 호출하여 직원 ID가 존재하는지 확인
checkWorkerIdExists(workerId, function(data) {
isWorkerIdCordirect = data.isWorkerIdExists;
If (!isWorkerIdCorrent) {
showWorkerIdError(ERROR_WORKER_ID_IS_NOT_CORRECT);
}
});
});
함수 checkWorkerIdExists(workerId, 콜백) {
$.ajax({
URL: BASE_PATH '/forgotPwd/checkWorkerIdExists.htm',
데이터: {
작업자 ID: 작업자 ID
},
beforeSend: 함수() {
//요청을 보내기 전에 ID를 확인합니다
​​​isWorkerIdLoading = true;
},
성공: 콜백,
완료: function() {
//완료 후 로고를 닫습니다
​​​isWorkerIdLoading = false;
//백그라운드 데이터 확인 과정에서 사용자가 양식을 제출하면 여기에 자동으로 제출됩니다.
If (isSubmit) {
          $workerIdForm.submit();
}
}
});
}
//양식을 제출하려면 Enter를 누르세요
$workerIdInput.on('keypress', function(e) {
if (e.which === 13) {
$(this).blur();
$workerIdForm.submit();
}
});
$workerIdForm.on('제출', function() {
//사원번호가 백그라운드에서 확인되면 사용자가 양식을 제출했음을 나타냅니다.
if (isWorkerIdLoading) {
isSubmit = true;
거짓을 반환합니다.
}
if (!isWorkerIdCorrent) {
$workerIdInput.focus();
거짓을 반환합니다.
}
});

최종 효과, 사진의 두 입력 상자는 모두 비동기식으로 확인되지만 효과는 동기식과 동일하게 보입니다.
그림은 GPRS 네트워크를 사용하여 느린 네트워크 속도 상황을 시뮬레이션합니다

렌더링