Рассылка закрыта
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Рецепты HTML # 151
| Информационный Канал Subscribe.Ru |
  |
 Помощь по сайту |
   |
|
 |
 |
Добрый день.
Сегодня снова обращаемся к теме JavaScript и применения скриптов. Статья приведена в сокращении, для просмотра результата примеров смотрите статью на сайте.
Адрес статьи — htmlbook.ru/content/245.html
Защита от дурака
«Защитой от дурака» называется комплекс мер по пресечению ввода неправильной информации в поля формы. Например, если в текстовое поле требуется ввести положительное число от 0 до 10, то следует проверить, чтобы пользователь не ввел текст или число, которое не лежит в указанном диапазоне, т.е. число не должно быть меньше нуля и больше десяти.
Следует понимать, что точные и правильные формулировки хотя и снижают вероятность возникновения ошибок, но никак не спасают от них. Только технические средства на стороне сервера позволяют получить требуемый результат и избежать ввода неправильной информации. Тем не менее, скрипты, созданные с помощью языка JavaScript, могут быстро проверить данные, вводимые пользователем, на корректность, без отправки содержимого формы на сервер. Таким образом, экономится время пользователя и снижается нагрузка на сервер. С позиции юзабилити тоже имеются плюсы — пользователь получает сообщение о том, какую информацию он указал неверно, и сразу может исправить свою ошибку.
Далее перечислены некоторые способы, как при помощи JavaScript организовать «защиту от дурака».
Окно с предупреждением
С помощью функции alert можно организовать вывод всплывающего окна, которое прерывает все действия на веб-странице до тех пор, пока пользователь не нажмет кнопку ОК (пример 1).
Пример 1. Использование функции alert<head>
<script language="JavaScript">
function validForm(f) {
d = parseInt(f.num.value); // Преобразуем в целое число
// Выводим предупреждение
if(!d || d < 1 || d > 10) alert("Пожалуйста,
введите правильное число");
else f.submit(); // Отправляем на сервер
}
</script>
</head>
<body>
<form action=/cgi-bin/add.cgi onSubmit="validForm(this); return false">
Введите число от 1 до 10<br>
<input type=text name=num>
<input type=submit value="Отправить">
</form>
</html>
Изменение цвета элементов формы
Одним из способов контроля введенных данных является изменение цвета фона или текста в поле формы. Если информация указана неверно, тогда фон в текстовом поле меняет свой цвет. Но в таком случае обязательно следует оговорить этот момент, иначе пользователь будет гадать, почему изменился цвет фона. В примере 2 показано использование подобного приема при вводе набора цифр.
Пример 2. Изменение цвета фона под текстом<head>
<script language="JavaScript">
function validForm(f) {
color = "white"; // Исходный цвет фона текстового поля
// Цвет фона, если введено не число
if (!isDigit(f.value)) color = "#FBE7C0";
// Цвет фона, если добавлен пробел
if (isEmpty(f.value)) color = "#FBC0C6";
// Цвет фона, если введено больше 10 символов
if (f.value.length > 10) color = "#C8C0FB";
// Меняем цвет фона
document.getElementById("numField").style.background
= color;
}
// Функция по проверке, число введено или нет
function isDigit(data) {
numStr="0123456789";
k = 0;
for (i=0;i<data.length;i++) {
thisChar = data.substring(i, i+1);
if (numStr.indexOf(thisChar) != -1) k++;
}
if (k == data.length) return 1
else return 0
}
// Функция по проверке, не введен ли пробел
function isEmpty(data) {
for (i=0;i<data.length;i++) {
if (data.substring(i, i+1) == " ") return 1;
}
return 0;
}
</script>
</head>
<body>
<form action=/cgi-bin/add.cgi>
<p>Введите не больше десяти цифр без пробелов.</p>
<input id=numField type=text name=num onKeyUp="validForm(this)">
<input type=submit value="Отправить">
<p><span style=""background:" #FBE7C0; width: 30px"> </span>
Введено не число<br>
<span style=""background:" #FBC0C6; width: 30px"> </span>
Добавлен лишний пробел<br>
<span style=""background:" #C8C0FB; width: 30px"> </span>
Введено больше 10 символов
</form>
</body></html>
В данном примере проверка данных происходит через событие onKeyUp, которое наступает при нажатии на клавишу, или иными словами, добавлении символа в поле формы. В этом случае идет обращение к функции validForm и в ней уже проверяется, соответствует ли введенная в поле строка некоторым критериям. В частности, не должно быть никаких символов кроме цифр, в том числе пробелов, и общее количество цифр не должно превышать десяти.
Изменение цвета фона происходит через функцию getElementById, которая в данном случае меняет стиль объекта. Обращение к полю формы осуществляется по идентификатору, заданному параметру id.
Всплывающее сообщение
Удобство изменения цвета фона состоит в том, что работа пользователя не прерывается, как в случае использования функции alert. При этом пользователь получает сигнал, что данные, которые он вводит, не соответствуют запрашиваемой информации. Однако использование цвета подойдет не во всех случаях, иногда удобнее вывести текстовое предупреждающее сообщение. При этом оно, в отличие от alert, не должно прерывать ввод данных.
Лучше всего подойдут для создания всплывающих сообщений слои. Первоначально требуется создать слой с текстом и скрыть его от пользователя, а при наступлении определенного события — отобразить. В примере 3 показан код для создания нужной формы и слоя.
Пример 3. Создание слоя для вывода сообщения<p>Введите любое число.</p>
<input type=text name=num onKeyUp="validForm(this)"><br>
<div id=msg>
<span id=tale><img src=tale.gif width=20 height=20></span><p>
Вы ошиблись. Пожалуйста, введите число.</p>
</div>
</form>
Сам слой состоит из двух частей: текст и «хвостик», который указывает на поле формы с ошибкой (файл tale.gif). На рис. 1 показано изображение, используемое для этой цели.
Рис. 1. Картинка для создания «хвостика»
Стиль для управления видом сообщения приведен в примере 4.
Пример 4. Стиль для слоя с сообщениемposition: absolute; /* Абсолютное позиционирование */
display: none /* Не отображать содержимое слоя */
}
#msg P {
background: #ffffee; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
width: 200px; /* Ширина сообщения */
padding: 5px; /* Поля вокруг текста */
margin: 0px; /* Убираем отступы */
font-size: 90% /* Уменьшаем размер текста */
}
#tale {
position: relative; /* Относительное позиционирование
*/
left: 30px; /* Сдвигаем рисунок с "хвостиком"
вправо */
top: 1px /* Смещаем рисунок вниз */
}
</style>Чтобы окончательно завершить код, следует добавить функцию validForm, которая проверяет вводимые данные и отображает слой с сообщением, если возникает ошибка. Как только ошибка исправляется, слой скрывается. Указанные манипуляции со слоями происходят с помощью упоминавшей ранее функции getElementById (пример 5).
Пример 5. Код для создания всплывающего сообщения<head>
<style type="text/css">
#msg {
position: absolute;
display: none
}
#msg P {
background: #ffffee;
border: 1px solid black;
width: 200px;
padding: 5px;
margin: 0px;
font-size: 90%
}
#tale {
position: relative;
left: 30px;
top: 1px
}
</style>
<script language="JavaScript">
function validForm(f) {
// Если введено число, то скрываем предупреждение
if (isDigit(f.value)) document.getElementById("msg").style.display
= "none";
// В противном случае отображаем предупреждение
else document.getElementById("msg").style.display = "block";
}
// Функция по проверке, число введено или нет
function isDigit(data) {
numStr="0123456789";
k = 0;
for (i=0;i<data.length;i++) {
thisChar = data.substring(i, i+1);
if (numStr.indexOf(thisChar) != -1) k++;
}
if (k == data.length) return 1
else return 0
}
</script>
</head>
<body>
<form action=/cgi-bin/add.cgi>
<p>Введите любое число.</p>
<input type=text name=num onKeyUp="validForm(this)"><br>
<div id=msg>
<span id=tale><img src=tale.gif width=20 height=20></span><p>
Вы ошиблись. Пожалуйста, введите число.</p>
</div>
</form>
</body>
</html>
Copyright © 2002 - 2004 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru
Материалы сайта охраняются законом об авторском праве. Ни одну статью нельзя воспроизводить или использовать в какой бы то ни было форме, для каких бы то ни было целей или какими бы то ни было средствами без письменного разрешения автора.
| http://subscribe.ru/
http://subscribe.ru/feedback/ |
Подписан адрес: Код этой рассылки: inet.webbuild.htmlbook |
Отписаться |
| В избранное | ||
