БЕСПЛАТНЫЕ УРОКИ. Создание сайтов

Советы Web-дизайнеру. Как проверить данные "на лету"

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

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

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

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

demo       skachat

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

  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. Если хотите разобраться в маске, ждите следующих уроков.

Добавить комментарий
  • Комментарии не найдены