В этом уроке я расскажу как организовать проверку вводимых данных в формы еще до передачи их на сервер. Т.е. непосредственно во время ввода данных в поле.

 В этом нам поможет язык программирования JavaScript.

Принцип работы в том, что при вводе любых данных в поля формы возникает событие oninput, которое будет вызывать процедуру проверки вводимых данных - для электронного адреса это функция function check_email() . Она принимает строку из формы и сравнивает ее с маской. Если адрес введен правильно, то рядом с полем выводится графическое изображение "галочка", если адрес с ошибкой или не дописан - соответствующее сообщение. Для вывода этих сообщений применяется метод innerHTML и блочный фрагмент DIV. 

В результате должна получиться примерно такая страница как в примере, нажмите на кнопку "ДЕМО".

Теперь разберем все это более подробно:

1. В код страницы вставьте следующий фрагмент:
   
   

   
   <form method="post" action="mail.php" name="f1">
    <table border="0" width="660">
    <tr>
      <td width="153">Фамилия, имя :</td>
      <td width="357">
          <input name="name" size="30" type="text" />&nbsp;&nbsp;&nbsp;<span id="result22"><font color="#FF0000"><b>*</b></font></span>
      </td>
    </tr>
    <tr>
      <td>Телефон для связи:</td>
      <td><input name="phone" size="30" type="text" /></td>
    </tr>
    <tr>
      <td>Е-mail:</td>
      <td>
         <input name="e_mail" size="30" type="text" /> &nbsp;&nbsp; <span id="result11"><font color="#FF0000"><b>*</b></font></span>
      </td>
    </tr>
    </table>
   
    <p style="color: rgb(0, 0, 0); font-family: Arial; font-size: 14px; ">Текст сообщения:<br />
    <textarea name="text" cols="90" rows="8" style="font-family: Arial; "></textarea></p>
    <p style="text-align: justify; ">
   <input name="Кнопка" type="button" value=" отправить " />
   </p>
   </form>
   
   <p style="font-size: 13px; text-align: justify; ">
    &nbsp;&nbsp;<font color="#FF0000" style="font-size: 14px; "><b>*</b></font>&nbsp;- поля, обязательные для заполнения</p>

   В строках с номером 6 и 16, где вводятся фамилия имя и E-mail, соответственно, есть тег SPAN, который имеет идентификатор id="result11"  и id="result22", это важно. Именно в элементы с этими id скриптом будет выводить сообщения.
   
   
2. Ниже форм ввода (это тоже важно, иначе не будет работать) нежно вставить JavaScript проверки о вывода сообщений:
   
   

   
   <script>
   // проверка электронного адреса
   function check_email(email) 
   {
    var template = /^[A-Za-z0-9](([_\.\-]?[a-zA-Z0-9]+)*)@([A-Za-z0-9]+)(([\.\-]?[a-zA-Z0-9]+)*)\.([A-Za-z]{2,4})+$/;
    email = document.f1.e_mail.value;
    if (template.test(email)) {
    return true;
    }
    return false; 
   }
   // проверка фамилии и имени
   function name_control(name) 
   {
    var template = /^([A-Za-zА-Яа-я\ \-]{2,50}) ([A-Za-zА-Яа-я\-\ ]{2,50})+$/;
    email = document.f1.name.value;
    if (template.test(email)) {
    return true;
    }
    return false; 
   }
   var input = document.f1.e_mail;
   
   input.oninput = function() 
   {
    if (check_email(input.value))
    {
    result11.innerHTML = "<img src=images/label.png />"; // если E-mail введен верно
    }
    else
    {
    result11.innerHTML = "<font color=\"#444\" style=\"font-size: 10px; \"><b><img src=images/etenshen.png /> - введите правильно E-mail</b></font>";
    }
   }
   var input2 = document.f1.name;
   input2.oninput = function() 
   {
   if (name_control(input2.value))
   {
   result22.innerHTML = "<img src=images/label.png />"; // если фамилия и имя введены верно
   }
   else
   {
   result22.innerHTML = "<font color=\"#444444\" style=\"font-size: 10px; \"><b><img src=images/etenshen.png /> - не до конца ввели фамилию и имя </b></font>";
   }
   }
   </script>

   
   
   Обратите внимание на строки 6 и 8. В 6 строке вводится маска для проверки E-mail-а, в 8 строке функция test проверяет на соответствие введенных данных поля и маски. В случае соответствия данных и маски функция function check_email(email) дает значение true, иначе false.
   
   В строках 16 и 18 - аналогичная проверка поля name, где вводится фамилия и имя.

3. Сохраните страницу и проверьте результат.

P.S. Если хотите разобраться в маске, ждите следующих уроков.