집 > 기사 > 웹 프론트엔드 > JavaScript_Basic 지식으로 폼 검증에 대한 자세한 설명

JavaScript_Basic 지식으로 폼 검증에 대한 자세한 설명

WBOY원래의: 2016-05-16 15:54:30933검색

클라이언트가 필요한 모든 데이터를 입력한 다음 제출 버튼을 누른 후 서버에서 양식 유효성 검사가 수행되는 데 사용됩니다. 클라이언트가 입력한 데이터 중 일부가 잘못된 형식이거나 단순히 누락된 경우 서버는 모든 데이터를 클라이언트에 다시 보내고 올바른 정보가 포함된 양식을 다시 제출하도록 요청해야 합니다. 이는 서버의 로드를 증가시키는 시간이 오래 걸리는 프로세스입니다.

JavaScript는 양식 데이터를 웹 서버로 보내기 전에 클라이언트 컴퓨터에서 유효성을 검사하는 방법을 제공합니다. 양식 유효성 검사는 일반적으로 두 가지 방법으로 수행됩니다.

기본 유효성 검사 - 먼저 양식을 검사하여 각 양식 필드에 데이터 입력이 필요한지 확인해야 합니다. 이는 테이블의 각 필드를 반복하여 데이터를 확인합니다.
데이터 형식 확인 - 둘째, 입력되는 데이터의 형식과 값이 올바른지 확인해야 합니다. 이를 위해서는 데이터의 정확성을 테스트하기 위해 더 많은 논리를 배치해야 합니다.

인증 과정을 이해하기 위해 예를 들어보겠습니다. 다음은 간단한 형식입니다.

<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
<!--
// Form validation code will come here.
//-->
</script>
</head>
<body>
 <form action="/cgi-bin/test.cgi" name="myForm" 
     onsubmit="return(validate());">
 <table cellspacing="2" cellpadding="2" border="1">
 <tr>
  <td align="right">Name</td>
  <td><input type="text" name="Name" /></td>
 </tr>
 <tr>
  <td align="right">EMail</td>
  <td><input type="text" name="EMail" /></td>
 </tr>
 <tr>
  <td align="right">Zip Code</td>
  <td><input type="text" name="Zip" /></td>
 </tr>
 <tr>
 <td align="right">Country</td>
 <td>
 <select name="Country">
  <option value="-1" selected>[choose yours]</option>
  <option value="1">USA</option>
  <option value="2">UK</option>
  <option value="3">INDIA</option>
 </select>
 </td>
 </tr>
 <tr>
  <td align="right"></td>
  <td><input type="submit" value="Submit" /></td>
 </tr>
 </table>
 </form>
 </body>
 </html>

기본 양식 확인:

먼저 기본 양식 유효성 검사를 수행하는 방법을 보여드리겠습니다. 위 표에서는 onsubmit 이벤트가 발생하기 전에 데이터의 유효성을 검사하기 위해 verify() 함수가 필요합니다. 다음은 verify() 함수의 구현입니다.

<script type="text/javascript">
<!--
// Form validation code will come here.
function validate()
{
 
  if( document.myForm.Name.value == "" )
  {
   alert( "Please provide your name!" );
   document.myForm.Name.focus() ;
   return false;
  }
  if( document.myForm.EMail.value == "" )
  {
   alert( "Please provide your Email!" );
   document.myForm.EMail.focus() ;
   return false;
  }
  if( document.myForm.Zip.value == "" ||
      isNaN( document.myForm.Zip.value ) ||
      document.myForm.Zip.value.length != 5 )
  {
   alert( "Please provide a zip in the format #####." );
   document.myForm.Zip.focus() ;
   return false;
  }
  if( document.myForm.Country.value == "-1" )
  {
   alert( "Please provide your country!" );
   return false;
  }
  return( true );
}
//-->
</script>

데이터 형식 확인:

이제 입력한 양식 데이터를 웹 서버에 제출하기 전에 유효성을 검사하는 방법을 살펴보겠습니다.

이 예는 입력된 이메일 주소를 확인하는 방법을 보여줍니다. 즉, 이메일 주소에는 최소한 @ 기호와 점(.)이 포함되어야 합니다. 또한 @는 이메일 주소의 첫 번째 문자가 아니어야 하며 마지막 점은 @ 기호 다음의 한 문자여야 합니다.

<script type="text/javascript">
<!--
function validateEmail()
{
 
  var emailID = document.myForm.EMail.value;
  atpos = emailID.indexOf("@");
  dotpos = emailID.lastIndexOf(".");
  if (atpos < 1 || ( dotpos - atpos < 2 )) 
  {
    alert("Please enter correct email ID")
    document.myForm.EMail.focus() ;
    return false;
  }
  return( true );
}
//-->
</script>

성명：

이전 기사：JavaScript AOP 프로그래밍 예제_javascript 기술다음 기사：JavaScript AOP 프로그래밍 예제_javascript 기술

JavaScript_Basic 지식으로 폼 검증에 대한 자세한 설명

관련 기사