Информация к новости
  • Просмотров: 464
  • Автор: sulicompany
  • Дата: 3-08-2013, 22:27
 (голосов: 0)
3-08-2013, 22:27

Валидация html форм с помощью javascript

Категория: Программирование » PHP


Допустим у нас есть сайт с регистрацией пользователей. Вот регистрационная форма:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
<head>
<title>Регистрация</title>
</head>
<body>
<form onsubmit='return Validate(this);' method='POST' action='register.php'>
<table bgcolor='silver' border='0px'>
<tr><th align='center'>Регистрация</th></tr>
<tr>
<td>Имя пользователя</td><td><input type='text' name='username' id='username'/></td>
</tr>
<tr>
<td>Пароль</td><td><input type='password' name='pass' id='pass'/></td>
</tr>
<tr>
<td>Подтвердите пароль</td><td><input type='password' name='passagain' id='passagain'/></td>
</tr>
<tr>
<td>E-mail</td><td><input type='text' name='mail' id='mail'/></td>
</tr>
<tr>
<td>Дата рождения</td><td><input type='date' name='date' id='date'/></td>
</tr>
<tr><td><input type='submit' value='регистрация'/></td></tr>
</form>
</body>
</html>

Теперь необходимо создать проверку данных, введенных пользователем. Если данные введены правильно, то форма будет отправлена, если нет, то отправка будет отменена.

Проверка введенных данных будет осуществляться с помощью javascript.

Для проверки данных создадим скрипт и функцию Validate(obj)

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function Validate(obj) {
var username=obj.username.value;
var pass=obj.pass.value;
var passagain=obj.passagain.value;
var mail=obj.mail.value;
var date=obj.date.value.split('-');
var errors="";
if (username=="" || pass=="" || passagain=="" || mail=="")
{
alert("Все поля должны быть заполнены!!");
return false;
}
if (pass!=passagain)
{
errors+="Пароли не совпадают!!\n";
}
if (pass.length<6)
{
errors+="Слишком короткий пароль!!\n";
}
var reg = /^\[email protected]\w+\.\w{2,4}$/i;
if (!reg.test(mail))
{
errors+="Неправильный e-mail адрес!!\n";
}
if (date[0]<1930)
{
errors+="Указана неверная дата рождения!!\n";
}
 
if(errors=="")
return true;
else
{
alert(errors);
return false;
}
}

А теперь все по порядку. Сначала мы получаем данные формы и сохраняем их в переменные (поле date имеет формат гггг-мм-дд, поэтому используем функцию split()    ,которая разделяет строку на три значения).

Далее мы проводим первую проверку на заполнение полей. Если хотя бы одно поле не заполнено, то функция возвращает значение false и сообщает пользователю о неправильном вводе.

Следующий шаг проверки — проверка пароля, он не должен быть короче 6 символов и должен совпадать с повторно введенным. В случае неудачной проверки в переменную errors записывается текст ошибки.

Затем объявляется регулярное выражение reg, с которым сравнивается электронный адрес, при неудаче опять же записывается сообщение об ошибке.

Последняя проверка — проверка даты рождения. Чтобы пользователь не указал фиктивный год рождения, мы убеждаемся, что год не меньше 1930 (можете поменять на ваш выбор).

Теперь если в переменной errors есть хотя бы какой-то текст ошибки, то функция возвращает false и выводит ошибки. Присваиваем обработчику события отправки формы нашу функцию, в качестве аргумента указываем обрабатываемую форму.