HTML 양식을 작성하고 실행 한 후에는 중요한 필드가 모두 입력되어 있는지 확인해야합니다. 예를 들어 전자 메일 확인 편지를 보내려는 경우 전자 메일 주소를 양식 필드에 포함해야합니다 , 작동하는 이메일 주소 여야합니다.
양식의 유효성을 검사하는 방법에는 두 가지가 있습니다.
- JavaScript 사용
- CGI 스크립트 사용하기
양식 검증을위한 JavaScript 사용의 장점
- 자바 스크립트를 사용하면 서버 프로세서 시간을 사용하지 않아도됩니다. 모든 처리는 클라이언트 컴퓨터에서 수행됩니다.
- 종종 CGI 유효성 검사보다 빠르게 작동하는 것으로 보입니다.
- 양식 페이지가 변경되지 않았기 때문에 독자가 오류를 쉽게 수정할 수 있습니다.
양식 확인을위한 JavaScript 사용의 단점
- JavaScript는 활성화 된 브라우저에서만 작동합니다. JavaScript가 비활성화되어 있으면 오류 검사가 수행되지 않습니다.
CGI를 사용하여 양식 검증하기
- 유효성 확인을 위해 CGI를 사용하면 양식이 제출 될 때마다 유효성 확인이 실행됩니다.
CGI를 사용하여 양식 검증시 단점
- CGI는 웹 서버에 더 많은로드를 가하며 CGI에 포함 된 모든 기능은 서버에 대한 또 하나의 작업입니다.
- CGI는 느리게 실행될 수 있습니다.
- 오류가있는 경우 고객은 양식의 첫 번째 페이지로 돌아가거나 양식 페이지를 다시 작성하기 위해 다른 기능이 필요합니다.
이 문제를 해결하는 방법은 대부분 JavaScript로 오류 검사를 수행하는 것입니다. 그렇게하면 독자가 빠르고 쉽게 읽을 수 있습니다. 그런 다음 CGI를 사용하여 양식의 핵심 요소를 다시 확인합니다.
JavaScript를 사용하여 HTML 양식을 검증하는 방법
양식 유효성 검증을 작성하는 기본 전제는 필요한 양식 요소의 이름을 찾은 다음 비어있는 경우 오류 메시지를 표시하는 것입니다.
대부분의 오류 검사 프로그램은 한 번에 하나씩 각 필드를 검사하고 한 번에 하나의 오류 만 표시합니다. 이것은 지루한 양식을 채울 수 있으며 사람들은 중간에 멈출 수 있습니다. 다음 스크립트 및 Perl 소스를 사용하는 경우 독자는 한 번에 전체 양식의 유효성을 검사하여 일련의 오류 메시지를 표시하여 독자가 다시 돌아가 수정할 수 있음을 알게됩니다.
양식 유효성 확인을위한 JavaScript
HTML의 머리 부분에서 폼 유효성 검사를 수행하는 스크립트를 만들어야합니다.
- 스크립트를 설정하고 자바 스크립트를 처리 할 수없는 브라우저에서는 스크립트가 숨겨져 있는지 확인하십시오.
그런 다음 스크립트를 호출하려면 onsubmit 요소를 form 태그에 넣습니다.
양식 검증을위한 CGI
이 Perl 스크립트 CGI 스 니펫은 JavaScript와 동일한 기능을 수행합니다. 필요한 필드가 있는지 확인하고 그렇지 않은 경우 표시 할 변수에 오류 메시지를 저장합니다.
#! / usr / local / bin / perl$ error = "";if ($ in { 'dd'} eq ""){ $ error + = "
드롭 다운 상자에서 선택하십시오.';}if ($ in { 'words'} eq ""){ $ error + = "텍스트 상자에 단어를 입력하십시오.';}# … 모든 필드의 유효성 검사를 계속합니다.if ($ error) print "Content-type : text / html n n"; 인쇄 "
오류가 발생했습니다
'; print $ error; print "뒤로 가서이 오류를 수정하십시오."; 인쇄 "';} else { # CGI로 계속 …}
CGI가 오류 메시지를 쓰는 방법과의 차이점은 " n"대신 HTML 단락 태그를 사용하여 각 오류 사이에 새로운 줄을 추가하는 것입니다.
이제 귀하의 양식을 확인했습니다.
CGI와 JavaScript의 두 가지 방법을 사용하면 HTML 양식의 유효성을 검사하여 더 많은 부분이 전달되도록 할 수 있습니다.