사용자가 제출한 양식에는 부적절한 값이 있을 수 있으므로 유효성을 검사하는 것이 중요합니다. 따라서 사용자를 인증하려면 유효성 검사가 필요합니다.
JavaScript는 클라이언트 측에서 양식을 검증하는 기능을 제공하므로 데이터 처리가 서버 측 검증보다 빠릅니다. 대부분의 웹 개발자는 JavaScript 양식 유효성 검사를 선호합니다.
JavaScript를 통해 이름, 비밀번호, 이메일, 날짜, 휴대폰 번호 및 기타 필드를 확인할 수 있습니다.
JavaScript 양식 유효성 검사 예
이 예에서는 이름과 비밀번호의 유효성을 검사하겠습니다. 이름은 비워둘 수 없으며 비밀번호는 6자 미만일 수 없습니다.
여기서는 양식 제출 시 양식의 유효성을 검사합니다. 주어진 값이 정확할 때까지 사용자는 다음 페이지로 전달되지 않습니다.
function validateform(){ var name=document.myform.name.value; var password=document.myform.password.value; if (name==null || name==''){ alert('Name can't be blank'); return false; }else if(password.length<6){ 6 alert('password must be at least characters long.'); return false; } name: <br> Password: <br> </6){> 지금 테스트해보세요 JavaScript 비밀번호 확인 재입력
function matchpass(){ var firstpassword=document.f1.password.value; var secondpassword=document.f1.password2.value; if(firstpassword==secondpassword){ return true; } else{ alert('password must be same!'); return false; } } Password: <br> Re-enter Password: <br> 지금 테스트해보세요 JavaScript 번호 확인
숫자 값에 대해서만 텍스트 필드의 유효성을 검사해 보겠습니다. 여기서는 isNaN() 함수를 사용하고 있습니다.
function validate(){ var num=document.myform.num.value; if (isNaN(num)){ document.getElementById('numloc').innerHTML='Enter Numeric value only'; return false; }else{ return true; } } Number: <span id="numloc"></span> <br> 지금 테스트해보세요 이미지를 사용한 JavaScript 검증
입력이 정확하거나 잘못된 경우 올바른 이미지와 잘못된 이미지를 표시하는 대화형 JavaScript 양식 유효성 검사 예제를 살펴보겠습니다.
function validate(){ var name=document.f1.name.value; var password=document.f1.password.value; var status=false; if(name.length<1){ document.getelementbyid('nameloc').innerhtml=" Please enter your name" ; status="false;" }else{ } if(password.length<6){ document.getelementbyid('passwordloc').innerhtml=" Password must be at least 6 char long" return status; <table class="table"> <tr><td>Enter Name:</td><td> <span id="nameloc"></span></td></tr> <tr><td>Enter Password:</td><td> <span id="passwordloc"></span></td></tr> <tr><td></td></tr> </1){> 지금 테스트해보세요 산출:
| 이름을 입력하시오: | |
| 암호를 입력: | |
자바스크립트 이메일 검증
JavaScript의 도움으로 이메일의 유효성을 검사할 수 있습니다.
이메일 ID를 확인하려면 다음과 같은 여러 가지 기준을 따라야 합니다.
- 이메일 ID에는 @ 및 가 포함되어야 합니다. 성격
- @ 앞뒤에 문자가 하나 이상 있어야 합니다.
- 뒤에는 문자가 두 개 이상 있어야 합니다. (점).
이메일 필드의 유효성을 검사하는 간단한 예를 살펴보겠습니다.
function validateemail() { var x=document.myform.email.value; var atposition=x.indexOf('@'); var dotposition=x.lastIndexOf('.'); if (atposition<1 || dotposition="x.length){" alert('please enter a valid e-mail address
atpostion:'+atposition+'
dotposition:'+dotposition); return false; } email: <br> </1> 지금 테스트해보세요