은 jQuery로 입력을 검증하는 가장 좋은 방법입니까? onChange/onKeyUp. 아니면 다른 무엇입니까?

Question

누군가 두 사람 중 누가 가장 좋고 왜 그런지 설명 할 수 있습니까? 또는 더 나은 옵션이있는 경우.

도 거기를 keyDown, 흐림, 변화 ...

"왜"매우 importan입니다 같은 다른 옵션을 제공합니다. 고마워.

Answer 1

onKeyUp을 입력하면 모든 키를 누를 때마다 검증 루틴이 실행됩니다. @ APAD1에 언급 된대로 setTimeout을 사용하면 실행 가능할 수 있지만 시간에 따라 사용자는 유효성 검증 루틴 전에 필드를 떠날 수 있으며 양식이 유효성 검증 루틴 전에 제출되었는지 여부에 따라 달라질 수 있습니다. 이것은 또한 매우 무거울 수 있습니다. 나는 일반적으로 onKeyUp만을 사용하여 개별 키를 확인하고 삼킬 수있다. 유효성을 검사 할 최종 입력을 기다리는 경우 onChange 또는 onBlur을 사용하십시오.

onChange은 $ (": 입력") 선택기 (예 : 라디오, 선택, SLE 등)가 선택하는 모든 입력란에서 작동합니다. 이 옵션은 출근 할 때 유효성을 검사 할 때 유용하지만 필드를 다시 초점 맞추고 잘못된 내용을 지운 경우에만 작동합니다. 그렇지 않으면 오류를 무시하고 계속 진행할 수 있습니다. 내용을 변경하지 않으면 유효성 검사가 실행되지 않습니다.

onBlur은 입력이 완료되고 필드의 초점이 사라지 자마자 유효성을 검사하려는 경우 매우 유용합니다. 사용자에게 오류를 어떻게 알리는 지에 따라이 방법을 사용할 때주의해야합니다. 현장에 초점을 다시 맞추는 것과 같은 경고 나 행동을하는 경우 나쁜 사용자 환경을 만들 수 있습니다.

일반적인 생각 프로세스로서 입력에 대한 즉각적인 유효성 검사를 수행하는 것이 좋지만 차단하지 않는 방식으로 사용자에게 알리는 것이 좋습니다 (예 : 필드 또는 항목 옆에 div 표시). 경우에 따라 사용자가 유효성 검사 메시지를 무시하고 잘못된 정보를 보낼 수 있기 때문에 정보를 보내기 전에 전체 양식의 최종 유효성 검사를 항상 수행합니다.

Answer 2

제 생각에 onKeyUp은 프로젝트에 따라 더 나은 솔루션입니다. 이것은 사용자에게 입력이 유효한지 여부에 대한 세미 - 인스턴트 표시를 제공 할 수 있기 때문입니다 (입력이 끝나면 입력 옆에 녹색 체크 표시 또는 빨간색 "X"표시 추가) 반면, onChange/blur를 사용하면 입력이 유효한지 여부에 대한 반 - 탭에서 입력을 확인할 때까지 유효성 검사가 표시되지 않습니다.

그러나 keyUp에서 성가신 일이 있기 때문에 즉시 유효성을 검사하지 않으므로이 문제를 해결하는 가장 좋은 방법은 keyUp을 타이머와 함께 사용하는 것입니다. 타이핑이 중지 된 후 1 ~ 2 초가 지나야 유효성을 검사합니다.

당신이 좋아하는 작업을 수행 할 수 있습니다

var doneTypingInterval = 1000; //Validation delay time in ms 

$('input').keyup(function(){ 
    clearTimeout(typingTimer); 
    typingTimer = setTimeout(validationFunction, doneTypingInterval); //replace validationFunction with the name of your function 
}); 

Answer 3

요소에만 특정 유형 (예를 들어 대한 <SELECT>)에서 작동 onchange를.

onKeyUp에 그것은 당신이 경기장을 떠나지 때마다 트리거되기 때문에

blur() 아마도 더 나은 "무거운"있는 모든 키를 누를로 평가합니다. 하지만 아직 현장에있을 때 제출 버튼을 클릭하면 어떨까요?

따라서 onsubmit이 가장 적합한 솔루션이거나이 둘을 조합 한 것입니다. 다른 필드에 대해 다른 방법을 평가할 때 아무런 문제가 없으며 제출을 클릭 한 후 다시 확인하십시오.