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

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

Добавить комментарий:

Комментарии  

Latrice
Convictions for any Class D or Class E crime usually are not employment restrictions and so are
not included about the Registry if the conviction is no less
than 10 years old along with the victim had not been a patient, client, or resident of an health care setting red cross
cna classes cna classes in mn: cnaclasses.us.com/ cna classes in ga click here to determine nursing aide along with other
entry to nursing and medical programs in indiana. The program combines classroom instruction and hands-on clinical practice to gives students a
better understanding with the profession cna classes san diego [url="https://c naclasses.us.co m/"]cna classes in md cna classes
cost the testing fees are paid online upon completion of the
cna course.
Chanda
You will take steps to reduce the chance within your ads being ghosted.
Craigslist is definitely an online free ad service that delivers free posting services through the globe.
search all of craigslist: allofcraig.org/ To start Craigslist, you'll be able to either post
a free ad or search the posted listings.
During an interview, briefly explain whatever you have available, then ask the individual what he wants within a roommate to determine
if you're works with each other.
Angelia
Hundreds of cash-strapped Kiwis are struggling to repay "payday" loans, with a few
facing bills up to 6 times the amount of the original loan, says the Federation of Family Budgeting Services.

I'm going to try my best to avoid them, but when I do need the
money I realize it's there. Citizens do not know how to calculate their risks,
make financial plans. payday loan places near me: paydayloansnear.me/
There are more payday loans in Nevada than you will find Mc - Donald's,” said AJ
Buhay, the area director for Progressive Leadership Alliance of Nevada (PLAN), 2330
Paseo Del Prado. November 2018 need not be a
tsunami against Republicans when they learn the
proper lessons from their loss within the Pennsylvania special election. Warren defended the best way Neff handled the contracts and
said he "fully adhered on the Delaware Canons of Ethics in the Delaware Bar by standard legal counsel to his client.
Janis
For people who have low incomes, the expenses associated having a mistake-bounced
check fees, by way of example-might be devastating. When people need a few hundred bucks to tide them over until their next check, payday cash advances might seem just
like a good idea, such as the be fooled — it can be a trap.
The victim advised deputies he believed certainly one of his employees, Brandon C.
payday loans
online: paydayloansonline.us.com/ Facebook suspends Cambridge Analytica, a data-analysis
firm that worked to the Trump campaign over suspected. In a
series of tweets defending her complaint, Dueker's language could not are actually more clear:.
Several years back a typical payday advance was due in a couple weeks, and a lot customers took out a second loan.
Ashton
She'll also be leaving the bank sooner than was once announced.
Wells fargo sign in www wells fargo
login: loginto.us.com/ wells fargo credit card login A
quantity of hedge funds along with other institutional investors have recently combined with or reduced their stakes
inside stock. Ann Penn, a Wells Fargo spokeswoman, said the
lending company is cooperating fully with authorities and referred the paper to the police.

Wells fargo online account login [url="https://l oginto.us.com/" ]wells
fargo dealer services login wells fargo online account login Unfortunately,
we don't need Hollywood to believe up this scenario.

Добавить комментарий

Защитный код
Обновить

 
Яндекс.Метрика