javascript, проверка данных, безопасность на формах ввода
|
Содержание
- Проверка и защита данных данных
- Устранение проблем
- Первый пример
- Javascript проверка любого input поля на форме
- Javascript проверка на правильный email
- Javascript проверка на правильность ICQ
- Javascript проверка объекта textarea
- Второй способ защиты от плохих данных
- Полный пример проверки формы средствами javascript
- Заключение
Проверка и защита данных данных
Конечно, проверка данных, введенных пользователем в форму и переданных PHP скрипту безусловно должна иметь место непосредственно в самом PHP скрипте, дабы пользователь по ошибке не ввел некорректные данные, либо не сделал этого намеренно для провокации ошибки исполнения скрипта. Но, давайте представим, что у нас сайт с очень высокой посещаемостью, допустим, 10000 визитов в сутки и каждый пользователь вводит данные в форму и отправляет ее на сервер. Допустим, 50 процентов пользователей не заполняют часть полей или заполняют их некорректно. Данные передаются скрипту, проверяются, и форма возвращается пользователю для исправления ошибок. В нашем случае, при большом количестве пользователей это создаст лишнюю нагрузку на сервер и лишний трафик как для сервера, так и для пользователей.
Устранение проблем
Чтобы избежать указанных выше проблем - целесообразнее использовать javascript для проверки корректности заполнения полей формы. По статистике более 95 процентов пользователей для серфинга по Интернет пользуются браузерами, поддерживающими javascript. Пользователей, обладающих старыми версиями браузеров, либо браузерами не поддерживающими javascript, либо сознательно отключивших javascript по статистике менее 5 процентов.
Первый пример
Итак, возьмем для примера следующую форму (обязательными для заполнения мы определим имя пользователя (sender) и текст сообщения (msg), так как E-mail либо ICQ у пользователя может попросту не быть):
<form name="myform" method="post" action="test.php"> <input type="text" name="sender" maxlength="20" /> <input type="text" name="email" /> <input type="text" name="icq" maxlength="9" /> <textarea name="msg"></textarea> <input type="submit" value="Послать" /> </form>
Теперь будем определять правила, по которым будут проверяться отдельные поля.
Javascript проверка любого input поля на форме
Имя отправителя (sender) - не пустое, не короче, допустим, 3-х символов, не длиннее 20.
p_sender=document.myform.sender.value.toString();
if (p_sender!='')
{ if (p_sender.length<3 || p_sender.length>20)
{ alert('Укажите ваше имя (3-20 символов)!');
document.myform.sender.focus();
return false;
}
}
else
{ alert('Необходимо ввести имя!');
document.myform.sender.focus();
return false;
}
Javascript проверка на правильный email
Электронная почта (e-mail) - если указано, то проверяем корректность
p_email=document.myform.email.value.toString();
if (p_email!='')
{ t=p_email.indexOf('@');
if ((p_email.indexOf('.')==-1)||(t==-1)||(t < 1)||
(t > p_email.length - 5) || (p_email.charAt(t - 1)=='.') || (p_email.charAt(t + 1)=='.'))
{ alert('Некорректно указан E-mail!');
document.myform.email.focus();
return false;
}
}
Javascript проверка на правильность ICQ
Номер аськи (icq) - если указан, то состоит только из цифр, не короче 5 и не длиннее 9 знаков.
Разместим часть ява-скрипта прямо в теге поля для ввода номера ICQ - такое ограничение позволит пользователю вводить в это поле только цифры
<input type="text" name="icq" maxlength="9" onkeypress="if ((event.keyCode < 48) || (event.keyCode > 57)) event.returnValue=false;" />
* в FireFox 2.1 и ниже данный скрипт не работает.
Далее необходимо проверить длину введенного номера
p_icq=document.myform.icq.value.toString();
if (p_icq!='')
{ if (p_icq.length<5||p_icq.length>9)
{ alert ('Длина номера ICQ 5-9 символов!');
document.myform.icq.focus();
return false;
}
}
Javascript проверка объекта textarea
Текст сообщения (msg) - не пустое и, допустим, не менее 10 символов
p_msg=document.myform.msg.value.toString();
if (p_msg.length < 10)
{ alert('Необходимо ввести текст сообщения (не менее 10 символов)!');
document.myform.msg.focus();
return false;
}
Второй способ защиты от плохих данных
Еще один способ «защиты» форм - это «отключение» кнопки submit и включение ее только тогда, когда будут заполнены необходимые поля (работает не во всех браузерах, только поддерживающих javascript 1.2). «Отключается» кнопка просто. Для этого достаточно указать:
<input type="submit" value="Послать" disabled="disabled" />
Теперь к полям обязательным для заполнения добавляем:
onkeypress="checkreq()" onkeyup="checkreq()" onblur="checkreq()"
и получаем:
<input type="text" name="sender" maxlength="20" onkeypress="checkreq()" onkeyup="checkreq()" onblur="checkreq()" /> <textarea name="msg" onkeypress="checkreq()" onkeyup="checkreq()" onblur="checkreq()"></textarea>
Теперь определим функцию checkreq()
function checkreq()
{
path=document.myform;
tmp=(path.sender.value=='');
if (!tmp && (path.sender.value.length < 3)) tmp=true;
path.Submit.disabled=tmp;
if (tmp) { return; }
tmp=(path.msg.value=='');
if (!tmp && (path.msg.value.length < 10)) tmp=true;
path.Submit.disabled=tmp;
}
Полный пример проверки формы средствами javascript
Теперь «соберем» отдельные блоки, предназначенные для проверки конкретных полей в одну функцию, а к форме добавим процедуру, которая будет вызывать эту функцию перед отправкой формы PHP скрипту.
<script>
// Проверка введенного имени и сообщения и [хвключение] кнопки submit
function checkreq()
{
path=document.myform;
tmp=(path.sender.value=='');
if (!tmp && (path.sender.value.length < 3)) { tmp=true; }
path.Submit.disabled=tmp;
if (tmp) { return; }
tmp=(path.msg.value=='');
if (!tmp && (path.msg.value.length < 10)) { tmp=true;}
path.Submit.disabled=tmp;
}
// Проверка корректности заполнения полей формы
function check()
{
p_sender=document.myform.sender.value.toString();
if (p_sender!='')
{ if (p_sender.length<3 || p_sender.length>20)
{ alert ('Укажите ваше имя (3-20 символов)!');
document.myform.sender.focus();
}
}
else
{ alert('Необходимо ввести имя!');
document.myform.sender.focus();
}
p_email=document.myform.sender.value.toString();
if (p_email!='')
{ t=p_email.indexOf('@');
if ((p_email.indexOf('.')==-1) || (t==-1) || (t < 1) ||
(t > p_email.length - 5) || (p_email.charAt(t - 1)=='.') || (p_email.charAt(t + 1)=='.'))
{ alert('Некорректно указан E-mail!');
document.myform.email.focus();
return false;
}
}
p_icq=document.myform.icq.value.toString();
if (p_icq.length<5 || p_icq.length>9)
{ alert ('Длина номера ICQ 5-9 символов!');
document.myform.icq.focus();
}
p_msg=document.myform.msg.value.toString();
if (p_msg.length < 10)
{ alert('Необходимо ввести текст сообщения (не менее 10 символов)!');
document.myform.msg.focus();
return false;
}
}
</script>
<form method="post" name="myform" action="test.php" onsubmit="return check();"> <input type="text" name="sender" onkeypress="checkreq()" onkeyup="checkreq()" onblur="checkreq()' /> <input type="text" name="email" /> <input type="text" name="icq" onkeypress="if ((event.keyCode < 48) || (event.keyCode > 57)) event.returnValue=false;" /> <textarea name="msg" onkeypress="checkreq()" onkeyup="checkreq()" onblur="checkreq()"></textarea> <input type="submit" value="Послать"> </form>
Теперь при попытке пользователя отправить форму PHP скрипту, управление передается сначала ява-скрипту, который возвращает FALSE если будет найдена хоть одна ошибка пользователя, курсор будет помещен в поле, содержащее ошибку (первое по счету), и форма просто не будет отправлена.
Заключение
Как было сказано выше, проверка формы javascript, позволяет избежать отправки неверно заполненных форм на сервер и тем самым снизить нагрузку на сервер и трафик, но это не освобождает вас от необходимости жесткой проверки всех данных, переданных пользователем, так как пользователь может намеренно отключить javascript у себя в браузере, чтобы передать модифицированные данные.
При составлении пример, для составления для себя более четкой картины, настоятельно рекомендую ознакомиться со стаьей о разнице ковычек в программировании PHP и javascript, дабы оградить себя от повторения элементарных ошибок при программировании
Данный пример, конечно, не охватывает всех возможных вариантов проверки полей формы (например, url или сравнение идентичности пароля и его подтверждения), так как может возникнуть необходимость проверять различные данные, вводимые пользователем. Здесь показаны наиболее часто встречающиеся поля и примеры их обработки. Остальное вы можете написать сами, конечно, если довольно не плохо знаете javascript.
Также не забудьте прочитать статью о защите форм данных средствами php от ввода плохих символо.