Проверка данных, введённых в форму

Оглавление документа

Важным является использование JavaScript для проверки введённых в форму данных, предназначенных для последующей обработки серверными программами, такими как приложения серверного JavaScript или CGI-программы. Эта проверка делается по следующими причинам:

Уменьшается нагрузка на сервер. «Плохие» данные фильтруются уже перед отправкой данных на сервер.
Уменьшается задержка в случае ошибки пользователя. Иначе проверка выполняется на сервере, и данные обязаны путешествовать с клиента на сервер, для обработки, и обратно клиенту – для повторения ввода.
Упрощаются серверные программы.

В общем, Вам понадобится проверять ввод как минимум в двух случаях:

После ввода данных пользователем – обработчиком onChange в каждом элементе формы, который Вам нужно проверить.
Если пользователь отправляет форму – обработчиком onClick submits-кнопки, отправляющей форму.

1. Пример проверяющих функций

Вот примеры простых проверяющих функций:

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function isaPosNum(s) {
   return (parseInt(s) > 0)
}
function qty_check(item, min, max) {
   var returnVal = false
   if (!isaPosNum(item.value)) 
      alert("Please enter a positive number")
   else if (parseInt(item.value) < min) 
      alert("Please enter a " + item.name + " greater than " + min)
   else if (parseInt(item.value) > max) 
      alert("Please enter a " + item.name + " less than " + max)
   else 
      returnVal = true
   return returnVal
}
function validateAndSubmit(theform) {
   if (qty_check(theform.quantity, 0, 999)) {
      alert("Order has been Submitted")
      return true
   }
   else {
      alert("Sorry, Order Cannot Be Submitted!")
      return false
   }
}
</SCRIPT>
</HEAD>

isaPosNum это простая функция, которая возвращает true, если её аргумент – положительное число, и false – в ином случае.

qty_check принимает три аргумента: объект, соответствующий проверяемому элементу формы (item), и минимальное и максимальное допустимые значения для item (min и max). Она проверяет, является ли item числом в диапазоне от min до max, и выводит диалог alert, если это не так.

validateAndSubmit принимает в качестве аргумента Form-объект; она использует qty_check для проверки значения элемента формы и отправляет форму, если ввод верен. В ином случае она выводит окно alert и не отправляет форму.

2. Использование проверяющих функций

В следующем примере тэг BODY документа использует qty_check как обработчик onChange для текстового поля и validateAndSubmit – как обработчик onClick для кнопки.

<BODY>
<FORM NAME="widget_order" ACTION="lwapp.html" METHOD="post">
How many widgets today? 
<INPUT TYPE="text" NAME="quantity" onChange="qty_check(this, 0, 999)">
<BR> 
<INPUT TYPE="button" VALUE="Enter Order" onClick="validateAndSubmit(this.form)">
</FORM>
</BODY>

Эта форма отправляет значения на страницу lwapp.html приложения серверного JavaScript. Можно также отправить форму CGI-программе. Форма показана на рисунке.

Рисунок 10.2 Форма JavaScript

Обработчик onChange включается, если Вы измените значение в текстовом поле и переместите фокус с этого поля, нажав клавишу Tab клавиатуры компьютера или щёлкнув мышью вне этого текстового поля. Обратите внимание, что оба обработчика используют ключевое слово this для представления текущего объекта: в текстовом поле оно используется для передачи объекта JavaScript, соответствующего текстовому полю, функции qty_check, а в кнопке – для передачи JavaScript-объекта Form функции validateAndSubmit.

Для отправки формы серверной программе в этом примере используется кнопка, которая вызывает validateAndSubmit, проверяющую форму, с использование метода submit, если данные верны. Вы можете также использовать submit-кнопку (определённую тэгом <INPUT TYPE="submit">) и поместить на форму обработчик onSubmit, который возвращает false, если введены неправильные данные. Например,

<FORM NAME="widget_order" ACTION="lwapp.html" METHOD="post" 
   onSubmit="return qty_check(theform.quantity, 0, 999)">
...
<INPUT TYPE="submit">
...
</FORM>

Если qty_check возвращает false (если данные неверны), обработчик onSubmit запретит отправку формы.

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

Проверка данных, введённых в форму

1. Пример проверяющих функций

2. Использование проверяющих функций