Проверка правильности, обычно используемая на сервере, после того, как клиент ввел все необходимые данные, а затем нажал кнопку «Отправить». Если данные, введенные клиентом, были неправильными или просто отсутствовали, сервер должен был отправить все данные обратно клиенту и запросить повторную отправку формы с правильной информацией. Это был действительно длительный процесс, который ставил большую нагрузку на сервер.

JavaScript предоставляет способ проверки данных формы на компьютере клиента перед отправкой на веб-сервер. Проверка формы обычно выполняет две функции.

  • Основная проверка. Прежде всего, необходимо проверить форму, чтобы убедиться, что все обязательные поля заполнены. Для этого требуется всего лишь цикл через каждое поле в форме и проверка данных.
  • Проверка формата данных. Во-вторых, данные, которые были введены, должны быть проверены для правильной формы и значения. Ваш код должен содержать соответствующую логику для проверки правильности данных.
пример

Мы примем пример, чтобы понять процесс проверки. Вот простая форма в формате html.

<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>

Базовая проверка формы

Сначала давайте посмотрим, как выполнить базовую проверку формы. В приведенной выше форме мы вызываем validate() для проверки данных при возникновении события onsubmit . Следующий код показывает реализацию этой функции validate().

<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>



Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok