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

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

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


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

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

Вторая форма немного сложнее. Попытайтесь ввести простую строку – ваше имя например. Это не сработает (если вы не имеете символа @ в вашем имени...). Критерием для принятия ввода как правильного адреса электронной почты является @. Даже один @ примется – но это конечно не очень значимо. Каждый Internet адрес электронной почты содержит @, так что кажется естественным проверить здесь наличие @.

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

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

function test1(form) {
  if (form.text1.value == "")
    alert("Please enter a string!")
  else { 
   alert("Hi "+form.text1.value+"! Form input ok!");
  }
}

function test2(form) {
  if (form.text2.value == "" || 
      form.text2.value.indexOf(\'@\', 0) == -1) 
        alert("No valid e-mail address!");
  else alert("OK!");
}
// -->
</script>
</head>

<body>
<form name="first">
Enter your name:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Test Input" onClick="test1(this.form)">
<P>
Enter your e-mail address:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="Test Input" onClick="test2(this.form)">
</body>
</html>


Сначала взгляните на HTML-код в body-разделе. Мы просто создаем два текстовых поля и две кнопки. Кнопки вызывают функции test1(...) или test2(...), в зависимости от того, какая кнопка нажата. Мы передаем this.form в функции, чтобы позже быть способными адресовать нужные элементы в функциях.

Функция test1(form) проверяет, пуста ли строка. Это выполняется через if (form.text1.value == ""). "form" – переменная, которая получает значение this.form при обращении к функции. Мы можем получить значение элемента ввода через использование value в комбинации с form.text1. Чтобы посмотреть, является ли строка пустой, мы сравниваем её с . Если входная строка равняется , значит ничего не было введено. Пользователь получит сообщение об ошибке. Если что-то введено, то пользователь получит ok.

Проблема здесь состоит в том, что пользователь мог ввести только пробелы. Это примется как правильный ввод! Если вы хотите, то вы конечно можете проверять эти возможности и исключать их. Я думаю, что это совершенно просто с информацией, полученной здесь.

Теперь взгляните на функцию test2(form). Эта функция снова сравнивает введённую строку с пустой строкой " " чтобы удостовериться, что что-то было введено. Но мы кое-что добавили к команде if. Это || называется оператором ИЛИ. Вы знаете относительно этого из части 6 этого введения.

Команда If проверяет, является ли первое или второе условие истиной. Если по крайней мере одно из них истина, то вся команда if становится истинной, и следующая команда будет выполнена. Это означает, что вы получите сообщение об ошибке если ваша строка пуста или если не имеется @ в вашей строке. Вторая операция в команде if проверяет, содержит ли введенная строка символ @.