logo

JavaScript 양식 유효성 검사

  1. JavaScript 양식 유효성 검사
  2. JavaScript 유효성 검사의 예
  3. 자바스크립트 이메일 검증

사용자가 제출한 양식에는 부적절한 값이 있을 수 있으므로 유효성을 검사하는 것이 중요합니다. 따라서 사용자를 인증하려면 유효성 검사가 필요합니다.

JavaScript는 클라이언트 측에서 양식을 검증하는 기능을 제공하므로 데이터 처리가 서버 측 검증보다 빠릅니다. 대부분의 웹 개발자는 JavaScript 양식 유효성 검사를 선호합니다.

JavaScript를 통해 이름, 비밀번호, 이메일, 날짜, 휴대폰 번호 및 기타 필드를 확인할 수 있습니다.


JavaScript 양식 유효성 검사 예

이 예에서는 이름과 비밀번호의 유효성을 검사하겠습니다. 이름은 비워둘 수 없으며 비밀번호는 6자 미만일 수 없습니다.

여기서는 양식 제출 시 양식의 유효성을 검사합니다. 주어진 값이 정확할 때까지 사용자는 다음 페이지로 전달되지 않습니다.

 function validateform(){ var name=document.myform.name.value; var password=document.myform.password.value; if (name==null || name==&apos;&apos;){ alert(&apos;Name can&apos;t be blank&apos;); 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(&apos;password must be same!&apos;); return false; } } Password: <br> Re-enter Password: <br> 
지금 테스트해보세요

JavaScript 번호 확인

숫자 값에 대해서만 텍스트 필드의 유효성을 검사해 보겠습니다. 여기서는 isNaN() 함수를 사용하고 있습니다.

 function validate(){ var num=document.myform.num.value; if (isNaN(num)){ document.getElementById(&apos;numloc&apos;).innerHTML=&apos;Enter Numeric value only&apos;; 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(&apos;@&apos;); var dotposition=x.lastIndexOf(&apos;.&apos;); if (atposition<1 || dotposition="x.length){" alert('please enter a valid e-mail address 
 atpostion:'+atposition+'
 dotposition:'+dotposition); return false; } email: <br> </1>
지금 테스트해보세요