| При разработке HTML страниц, содержащих формы ввода всегда необходимо помнить, что могут присутствовать поля, неверное заполнение которых может привлечь ошибки на сервере или дальнейшие проблемы с выводом информации. Например, при незаполненном поле LOGIN в страницы регистрации, могут возникнуть большие проблемы при авторизации пользователя.
Один из самых простейших способов проверить корректность ввода данных – это JavaScript. Как известно, HTML документ имеет объектно-ориентированную структуру, а значит, с помощью методов и свойств, мы сможем ссылаться и проверять объекты типа «элементы формы». Разберем это на простом примере заполнения форм для написания комментариев в блог.
В нашей форме будут присутствовать 3 поля ввода: Имя, E-mail, и сам комментарий. А также одна кнопка для подтверждения ввода. Код будет следующим:
Для начала рассмотрим функцию, которая проверяет, что бы абсолютно все поля были заполнены:
<script type= "text/javascript"> function checkform (f ) { var err = ""; for (var i= 0; i<f. elements. length; i++ ){ if (f. elements[i ]. value == ""){ err += " " + f. elements[i ]. name + "\n"; } } if(err!= ""){ alert("Вы заполнили не все формы:\n" + err ); return false; }}</script> Syhi-подсветка кода
Функция checkform имеет входящий параметр f, который определяет название формы, с которой мы работаем. В данном случае у нас этот параметр равен this (" onsubmit="return checkform(this)"). Заводим переменную err, в которую мы будем записывать название незаполненных полей. Далее создаем цикл, который будет обходить все поля формы, и в нем уже поочередно проверяем пустое у нас поле или нет. Если поле пустое, то в переменную err добавляем его имя. Если не пустое, то цикл переключается на следующее, переменная остается не тронутой. После прохождение цикла у нас проверяется переменная err. В случае, если она не пустая, у нас выводится предупреждение с текстом и названиями незаполненных полей. Это наипростейшая функция проверки всех полей в одном цикле. По-моему мнению она не сильно информативна для пользователей, но для ознакомления все же подходит.
Для большей информативности можно проверять каждое поле по отдельности и выводить для них особые предупреждения. Например:
function checkform2 (f ) { if (f. elements[0]. value == "") { alert("Вы не ввели имя"); return; } if (f. elements[1]. value == "") { alert("Вы не ввели E-mail"); return; } if (f. elements[2]. value == "") { alert("Вы не ввели текст комментария"); return; } }Syhi-подсветка кода
Тут, как видно, текст «алерта» индивидуален для каждого поля. Да, и еще не забывайте менять названия функции в методе формы onSubmit (return checkform2(this)). Извращаться над подобными проверками можно сколько душе угодно. Рассмотрим парочку интересных вариантов:
Необходимо, что бы длина имени не превышала 5 символов:
if (f. elements[0]. value. length < 5){ alert("Имя должно быть больше 5 символов"); return; }Syhi-подсветка кода
Здесь мы проверяем что бы количество символов (length) было больше 5.
Необходимо, что бы запись «мыла» имела «правильную форму». Например hitechnt@gmail.com:
value = f. elements[1]. value; reg = / [a-z0 -9!#$%& '*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+ /=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/; if (!value. match(reg )) { alert("Пожалуйста, введите свой настоящий e-mail"); return false; }Syhi-подсветка кода
Разберем этот кусок кода. Value – это значение нашего поля e-mail. Reg – регулярное выражение, с помощью которого мы как раз и узнаем, корректный адрес почты у нас указан или нет. Заострять внимание в данной статье на них я не буду, лучше позже уделю им отдельный пост (как будет время =)). Затем у нас идет проверка на корректность с помощью функции match. Соответственно, если поле проверку не проходит, то выдается ошибка.
В общем вариантов существует множество: правильность ввода паролей, подтверждения паролей, ввода названия сайтов и т.д. В этой статье я рассмотрел лишь базу.
|
