Проверка формы обычно используется, когда что-то происходит на сервере, после того, как клиент ввел все необходимые данные, а затем нажать кнопку Submit. Если данные, введенные клиентом неверны или просто отсутствует, сервер должен отправить все данные обратно клиенту и попросить ввести данные на форме повторно с правильной информацией. Это действительно длительный процесс, который увеличивает нагрузку на сервер.
JavaScript обеспечивает способ проверки данных из формы на компьютере клиента перед отправкой его на веб-сервер. Форма проверки как правило, выполняет две функции.
Мы рассмотрим пример, чтобы понять процесс проверки. Вот простая форма в формате HTML.
<html> <head> <title>Проверка формы</title> <script type="text/javascript"> <!-- // Код проверки формы писать сюда. //--> </script> </head> <body> <form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return(validate());"> <table cellspacing="2" cellpadding="2" border="1"> <tr> <td align="right">Имя</td> <td><input type="text" name="Name" /></td> </tr> <tr> <td align="right">E-Mail</td> <td><input type="text" name="EMail" /></td> </tr> <tr> <td align="right">Индекс</td> <td><input type="text" name="Zip" /></td> </tr> <tr> <td align="right">Страна</td> <td> <select name="Country"> <option value="-1" selected>[выбрать свою]</option> <option value="1">Россия</option> <option value="2">Украина</option> <option value="3">Белоруссия</option> </select> </td> </tr> <tr> <td align="right"></td> <td><input type="submit" value="Отправить" /></td> </tr> </table> </form> </body> </html>
Сначала давайте посмотрим, как сделать основную форму проверки. В приведенной выше форме, мы вызываем Validate() для проверки данных, когда происходит событие onsubmit. Следующий код показывает реализацию этой функции validate().
<script type="text/javascript"> <!-- // Код проверки формы писать сюда. function validate() { if( document.myForm.Name.value == "" ) { alert( "Пожалуйста, укажите свое имя!" ); document.myForm.Name.focus() ; return false; } if( document.myForm.EMail.value == "" ) { alert( "Пожалуйста, укажите свой адрес электронной почты!" ); document.myForm.EMail.focus() ; return false; } if( document.myForm.Zip.value == "" || isNaN( document.myForm.Zip.value ) || document.myForm.Zip.value.length != 5 ) { alert( "Пожалуйста, предоставьте почтовый индекс в формате #####." ); document.myForm.Zip.focus() ; return false; } if( document.myForm.Country.value == "-1" ) { alert( "Пожалуйста, укажите свою страну!" ); return false; } return( true ); } //--> </script>
Теперь посмотрим, как мы можем подтвердить наши введенные данные в форме перед отправкой его на веб-сервер.
В следующем примере показано, как проверить введенный адрес электронной почты. Адрес электронной почты должен содержать, по крайней мере, знак «@» и точку (.). Кроме того, «@» не должен быть первым символом адреса электронной почты, а последняя точка должна быть по крайней мере один символ после знака «@».
Попробуйте следующий код для проверки электронной почты.
<script type="text/javascript"> <!-- function validateEmail() { var emailID = document.myForm.EMail.value; atpos = emailID.indexOf("@"); dotpos = emailID.lastIndexOf("."); if (atpos < 1 || ( dotpos - atpos < 2 )) { alert("Введите правильный адрес электронной почты") document.myForm.EMail.focus() ; return false; } return( true ); } //--> </script>