 |
На главную
Проверка информации, введенной в форму
Формы широко используются на Интернет. Информация, введенная в форму, часто
посылается обратно на сервер или отправляется по электронной почте на некоторый
адрес. Проблема состоит в том, чтобы убедиться, что введеная пользователем в
форму информация корректна. Легко проверить ее перед пересылкой в Интернет можно
с помощью языка JavaScript. Сначала я бы хотел продемонстрировать, как можно
выполнить проверку формы. А затем мы рассмотрим, какие есть возможности для
пересылки информации по Интернет.
Сперва нам необходимо создать простой скрипт. Допустим, HTML-страница
содержит два элемента для ввода текста. В первый из них пользователь должен
вписать свое имя, во второй элемент - адрес для электронной почты. Вы можете
ввести туда какую-нибудь информацию и нажать клавишу. Попробуйте также нажать
клавишу, не введя в форму никакой информации.
Исходный код этого скрипта:
<html>
<head>
<script language="JavaScript">
<!-- hide
// ******************************************************
// Script from Stefan Koch - Voodoo's Intro to JavaScript
// http://rummelplatz.uni-mannheim.de/~skoch/js/
// JS-book: http://www.dpunkt.de/javascript
// You can use this code if you leave this message
// ******************************************************
function check(input) {
var ok = true;
for (var i = 0; i < input.length; i++) {
var chr = input.charAt(i);
var found = false;
for (var j = 1; j < check.length; j++) {
if (chr == check[j]) found = true;
}
if (!found) ok = false;
}
return ok;
}
function test(input) {
if (!check(input, "1", "2", "3", "4",
"5", "6", "7", "8", "9", "0", "/", "-", " ")) {
alert("Input not ok.");
}
else {
alert("Input ok!");
}
}
// -->
</script>
</head>
<body>
<form>
Telephone:
<input type="text" name="telephone" value="">
<input type="button" value="Check"
onClick="test(this.form.telephone.value)">
</form>
</body>
</html>
Функция test() определяет, какие из введенных символов признаются корректными.
Предоставление информации, введенной в форму
Какие существуют возможности для передачи информации, внесенной в форму?
Самый простой способ состоит в передаче данных формы по электронной почте (этот
метод мы рассмотрим поподробнее).
Если Вы хотите, чтобы за вносимыми в форму данными следил сервер, то Вы должны
использовать интерфейс CGI (Common Gateway Interface). Последнее позволяет Вам
автоматически обрабатывать данные. Например, сервер мог бы создавать базу данных
со сведениями, доступную для некоторых из клиентов. Другой пример - поисковые
страницы, такие как Yahoo. Обычно в них представлена форма, позволяющая
создавать запрос для поиска в собственной базе данных. В результате пользователь
получает ответ вскоре после того, как нажимает на соответствующую кнопку. Ему не
приходится ждать, пока люди, отвечающие за поддержание данного сервера, прочтут
указанные им данные и отыщут требуемую информацию. Все это автоматически
выполняет сам сервер. JavaScript не позволяет делать таких вещей.
С помощью JavaScript Вы не сможете создать книгу читательских отзывов, поскольку
JavaScript лишен возможности записывать данные в какой-либо файл на сервере.
Делать это Вы можете только через интерфейс CGI. Конечно, Вы можете создать
книгу отзывов, для которой пользователи присылали сведения по электронной почте.
Однако в этом случае Вы должны заносить отзывы вручную. Так можно делать, если
Вы не предполагаете получать ежедневно по 1000 отзывов.
Соответствующий скрипт будет простым текстом HTML. И никакого программирования
на JavaScript здесь вовсе не нужно! Конечно за исключением того случая, если Вам
понадобится перед пересылкой проверить данные, занесенные в форму - и здесь уже
Вам действительно понадобится JavaScript. Я должен лишь добавить, что команда
mailto работает не повсюду - например, поддержка для ее отсутствует в Microsoft
Internet Explorer 3.0.
<form method=post action="mailto:your.address@goes.here" enctype="text/plain">
Нравится ли Вам эта страница?
<input name="choice" type="radio" value="1">Вовсе нет.<br>
<input name="choice" type="radio" value="2" CHECKED>Напрасная трата времени.<br>
<input name="choice" type="radio" value="3">Самый плохой сайт в Сети.<br>
<input name="submit" type="submit" value="Send">
</form>
Параметр enctype="text/plain" используется для того, чтобы пересылать
именно простой текст без каких-либо кодируемых частей. Это значительно упрощает
чтение такой почты.
Если Вы хотите проверить форму прежде, чем она будет передана в сеть, то для
этого можете воспользоваться программой обработки событий onSubmit. Вы должны
поместить вызов этой программы в тэг <form>. Например:
function validate() {
// check if input ok
// ...
if (inputOK) return true
else return false;
}
...
<form ... onSubmit="return validate()">
...
Форма, составленная таким образом, не будет послана в Интернет, если в нее
внесены некорректные данные.
Выделение определенного элемента формы
С помощью метода focus() Вы можете сделать вашу форму более дружественной.
Так, Вы можете выбрать, который элемент будет выделен в первую очередь. Либо Вы
можете приказать браузеру выделить ту форму, куда были введены неверные данные.
То есть, что браузер сам установит курсор на указанный Вами элемент формы, так
что пользователю не придется щелкать по форме, прежде чем что-либо занести туда.
Сделать это Вы можете с помощью следующего фрагмента скрипта:
function setfocus() {
document.first.text1.focus();
}
Эта запись могла бы выделить первый элемент для ввода текста в скрипте,
который я уже показывал. Вы должны указать имя для всей формы - в данном случае
она называется first - и имя одного элемента формы - text1. Если
Вы хотите, чтобы при загрузке страницы данный элемент выделялся, то для этого Вы
можете дополнить Ваш тэг <body> атрибутом onLoad. Это будет выглядеть как:
<body onLoad="setfocus()">
Остается еще дополнить пример следующим образом:
function setfocus() {
document.first.text1.focus();
document.first.text1.select();
}
Попробуйте следующий код:
При этом не только будет выделен элемент, но и находящийся в нем текст. |
 |
