Wiki-учебник по веб-технологиям: JavaScript/Формы ...

Главная | Каталог |

Проверка формы ввода


Формы широко используются в Internet. Формы ввода часто посылается обратно на сервер или через почту на некоторому адрес электронной почты. Но как Вы можете убедиться, что пользователь ввел нужный текст? С помощью Java Script? форма ввода может легко быть проверена перед её передачей в Internet. Сначала я хочу показать, как формы могут быть проверены. Затем мы взглянем на возможности для посылки информации в Internet.

Прежде всего мы хотим создать простой сценарий. HTML-страница должна содержать два текстовых поля. Пользователь должен вписать его имя в первый и адрес электронной почты во второй элемент. Вы можете ввести что-нибудь в элементы формы и затем нажать кнопку. Также попытайтесь ничего не вводить и нажать на кнопку. Относительно первого элемента ввода Вы получите сообщение об ошибке, если ничего не введено. Любой ввод принимается как правильный ввод. Конечно, это не предотвращает пользователя от ввода любого неправильного имени. Брозузер даже принимает числа. Так, если Вы введёте '17', Вы получите ' Hi 17! '. Так что это не может служить хорошей проверкой.
Вторая форма немного сложнее. Попытайтесь ввести простую строку – ваше имя например. Это не сработает (если Вы не имеете символа @ в вашем имени...). Критерием для принятия ввода как правильного адреса электронной почты является @. Даже один @ примется – но это конечно не очень значимо. Каждый Internet адрес электронной почты содержит @, так что кажется естественным проверить здесь наличие @.

Как написать сценарий для тех двух элементов формы, и для проверки? А вот так:



Сначала взгляните на HTML-код в body-разделе. Мы просто создаем два текстовых поля и две кнопки. Кнопки вызывают функции test1(...) или test2(...), в зависимости от того, какая кнопка нажата. Мы передаем this.form в функции, чтобы позже быть способными адресовать нужные элементы в функциях.
Функция test1(form) проверяет, пуста ли строка. Это выполнено через if (form.text1.value == )... . 'form'form' - переменная, которая получает значение this.form при обращении к функции. Мы можем получить значение элемента ввода через использование 'value' в комбинации с form.text1. Чтобы посмотреть, является ли строка пустой, мы сравниваем её с . Если входная строка равняется , значит ничего не было введено. Пользователь получит сообщение об ошибке. Если что-то введено, то пользователь получит ok.
Проблема здесь состоит в том, что пользователь мог ввести только пробелы. Это примется как правильный ввод! Если Вы хотите, то Вы конечно можете проверять эти возможности и исключать их. Я думаю, что это совершенно просто с информацией, полученной здесь.
Теперь взгляните на функцию test2(form). Эта функция снова сравнивает введённую строку с пустой строкой " " чтобы удостовериться, что что-то было введено. Но мы кое-что добавили к команде if. Это || называется оператором ИЛИ. Вы знаете относительно этого из части 6 этого введения.
Команда If проверяет, является ли первое или второе условие истиной. Если по крайней мере одно из них истина, то вся команда if становится истинной, и следующая команда будет выполнена. Это означает, что Вы получите сообщение об ошибке если ваша строка пуста или если не имеется @ в вашей строке. Вторая операция в команде if проверяет, содержит ли введенная строка символ @.

====Проверка на некоторые символы====

Иногда Вы хотите ограничивать форму ввода некоторыми символами или числами. Подумайте о номере телефона - ввод должен содержать только цифры (мы предполагаем, что номер телефона не содержит никакие символы). Мы могли бы проверить, является ли ввод числом. Но большинство людей использует различные символы в их номере телефона - например: 01234-56789, 01234/56789 или 01234 56789 (с пробелом между ними). Пользователь не должен быть вынужденным ввести номер телефона без этих символов. Так что мы должны расширить наш сценарий, чтобы проверить цифры и некоторые символы. Это показывается в следующем примере.

Исходный код выглядит так:

<html>
<head>
<script language="JavaScript">
<!-- hide

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. Они обычно имеют форму для выполнения поиска в их базе данных. Пользователь получает ответ сразу после того, как нажималась кнопка отправить. Он не должен ждать, пока люди, поддерживающие эту станцию прочитают ввод и затем найдут запрошенную информацию. Это выполняется сервером автоматически. Java Script? не может делать вещи типа этого.
Вы не можете создавать гостевые книги с помощью Java Script?, потому что Java Script? не способен писать файлы на сервере. Вы можете делать это только через CGI. Конечно Вы можете создавать гостевую книгу с людьми, отвечающими через электронную почту. Хотя Вы должны ввести обратную связь вручную. Это нормально, если Вы не ожидаете получить 1000 ответов по почте день. .
Этот сценарий ниже – простой HTML. Так что никакой необходимости в Java Script? здесь нет! Только, конечно, если Вы хотите проверять, ввод перед отсылкой формы, Вам будет необходим Java Script?.



Свойство enctype="text/plain" используется, чтобы послать простой текст без закодированных частей. Это делает намного проще читение почты.

Если Вы хотите проверить форму прежде, чем она будет послана через сеть, Вы можете использовать обработчик события onSubmit. Вы должны поместить этот обработчик события в тег <form>. Это выглядит так:

function validate() {
// check if input ok
// ...

if (inputOK) return true
else return false;
}

...

<form ... onSubmit="return validate()">

..

С этим кодом форма не была бы послана через Internet, если ввод формы был неправилен.

Концентрация на некотором элементе формы


С помощью метода focus() Вы можете сделать вашу форму немного более дружественной. Вы можете определять в начале, который элемент находится в центре внимания. Или Вы могли бы сообщать, чтобы броузер сосредоточился на форме, где был неправильный ввод. Это означает, что броузер установит курсор в определенный элемент формы, так что пользователь не должен нажать на форму перед вводом чего-нибудь. Вы можете делать это со следующей частью сценария:

function setfocus() {
document.first.text1.focus();}
тот сценарий концентрирует внимание на первом текстовом элементе в сценарии, который я показал выше. Вы должны определить имя полной формы – которая названа здесь firstи имя одиночного элемента формы – здесь text1. Если Вы хотите сконцентрировать внимание на этом элементе, когда страница загружается, Вы можете добавлять onLoad-свойство в ваш тег <body>. Это выгладит так:

<body onLoad="setfocus()">

Мы можем улучшить ето с помощью следующего кода:


Вы увидите, что текстовый элемент активен, и выделен введенный текст.