데이터 유효성 검사는 업로드되는 데이터가 개발자가 부과한 특정 요구 사항에 맞는지 확인하는 데 도움이 되므로 모든 웹 응용 프로그램의 필수적인 부분입니다. 데이터는 서버 측과 클라이언트 측 모두에서 검증될 수 있지만 클라이언트 측 검증은 종종 사용자의 시간을 절약하고 더 훌륭하고 부드러운 사용자 경험을 입증합니다. 클라이언트 측 데이터 유효성 검사는 쉽게 수행할 수 있으며 훨씬 적은 시간을 소비합니다.
이 방법 가이드에서는 업로드되는 파일의 크기를 확인하는 HTML, JavaScript/jQuery를 사용하여 양식을 만드는 과정을 살펴봅니다. 이 유효성 검사의 이점은 사용자가 특정 크기의 파일만 업로드하도록 제한하고 요구 사항을 엄격하게 준수하는지 확인할 수 있다는 것입니다. 파일의 크기가 잘못된 경우 서버에 파일을 업로드하지 않고도 사용자에게 메시지를 표시할 수 있으므로 귀중한 시간을 절약할 수 있습니다.
웹페이지 만들기
먼저 간단한 HTML 웹 페이지를 만듭니다.
DOCTYPE HTML >
< HTML >
< 머리 >
< 제목 >
검증 파일 크기 동안 JavaScript를 사용하여 업로드 / 제이쿼리
제목 >
머리 >
< 신체 스타일 = '패딩 상단: 10px; 텍스트 정렬: 센터;' >
< 피 > 업로드 파일 피 >
< 입력 ID = '파일' 유형 = '파일' 스타일 = '왼쪽 여백: 95px;' />
< 브 >< 브 >
< 단추 클릭 = '크기 유효성 검사()' > 업로드 단추 >
신체 >
HTML >
강령 이해하기:
웹 페이지 본문에서 우리는 단순히 , <입력> ,
그리고 <버튼> 꼬리표. 그만큼 <입력> 태그를 사용하여 사용자가 파일을 선택한 다음 <버튼> 꼬리표.
그만큼 <버튼> 태그 호출 크기 검증() 함수는 클릭 이벤트에 따라 파일의 크기를 결정하고 파일의 크기에 따라 적절한 경고를 인쇄합니다.
JavaScript sizeValidation() 함수 정의
이제 다음을 정의하는 JavaScript 코드를 작성해 보겠습니다. 크기 검증() 기능.
< 스크립트 >
기능 크기 검증 ( ) {
var 입력 = document.getElementById ( '파일' ) ;
~였다 파일 = 입력.파일;
만약에 ( 파일 길이== 0 ) {
알리다 ( '선택된 파일이 없습니다' ) ;
반품 거짓 ;
}
var 파일 크기 = Math.round ( ( 파일 [ 0 ] .크기 / 1024 ) ) ;
만약에 ( 파일 크기 < = 5 * 1024 ) {
알리다 ( '업로드' ) ;
} 또 다른 {
알리다 (
'오류! 파일이 너무 큽니다' ) ;
}
}
스크립트 >
강령 이해하기:
본체 내부에는 크기 검증() 함수는 먼저 태그를 얻은 다음 사용합니다. var 파일 = inputElement.files; 업로드 중인 파일에 액세스할 수 있도록 줄입니다. 그런 다음 파일이 업로드되었는지 확인하고, 그렇지 않으면 오류 메시지를 표시하고 false를 반환하여 함수를 종료합니다.
그런 다음 일부 수학을 사용하여 파일 크기를 결정합니다. 파일 크기가 5MB(이 경우)이면 업로드됩니다.
그렇지 않으면 오류 메시지가 포함된 팝업이 표시됩니다.
결론
클라이언트측 유효성 검사가 훨씬 더 효율적이지만 여전히 서버측 유효성 검사를 대체할 수 없으며 대부분의 경우 우회할 수 있습니다. 애플리케이션의 효율성과 정확성을 모두 보장할 수 있도록 서버 측과 클라이언트 측 검증을 모두 구현하는 것이 항상 모범 사례입니다.