- Бочарникова Н. И.
- Уроки по jQuery
- Просмотров: 60076
Советы Web-дизайнеру. Как проверить данные "на лету"
В этом уроке я расскажу как организовать проверку вводимых данных в формы еще до передачи их на сервер. Т.е. непосредственно во время ввода данных в поле.
В этом нам поможет язык программирования JavaScript.
Принцип работы в том, что при вводе любых данных в поля формы возникает событие oninput, которое будет вызывать процедуру проверки вводимых данных - для электронного адреса это функция function check_email() . Она принимает строку из формы и сравнивает ее с маской. Если адрес введен правильно, то рядом с полем выводится графическое изображение "галочка", если адрес с ошибкой или не дописан - соответствующее сообщение. Для вывода этих сообщений применяется метод innerHTML и блочный фрагмент DIV.
В результате должна получиться примерно такая страница как в примере, нажмите на кнопку "ДЕМО".
Теперь разберем все это более подробно:
- В код страницы вставьте следующий фрагмент:
В строках с номером 6 и 16, где вводятся фамилия имя и E-mail, соответственно, есть тег SPAN, который имеет идентификатор id="result11" и id="result22", это важно. Именно в элементы с этими id скриптом будет выводить сообщения.
<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" /> <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" /> <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; ">
<font color="#FF0000" style="font-size: 14px; "><b>*</b></font> - поля, обязательные для заполнения</p> - Ниже форм ввода (это тоже важно, иначе не будет работать) нежно вставить 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, где вводится фамилия и имя. - Сохраните страницу и проверьте результат.
P.S. Если хотите разобраться в маске, ждите следующих уроков.