Пример проверки заполнения обязательных текстовых полей
<html>
<head>
<title>проверка text</title>
<script>
function prov()
{
if (document.forms[0].fio.value==""|
document.forms[0].tel.value==""|
document.forms[0].mail.value==""|
document.forms[0].adress.value=="")
{alert ("пожалуйста, заполните обязательные для заполнения поля")}
}
</script>
</head>
<body>
<form>
<table border=1>
<tr>
<td>фио*</td><td><input name=””fio” type=”text”></td>
</tr>
<tr>
<td>телефон*</td><td><input name=”tel” type=”text”></td>
</tr>
<tr>
<td>e-mail*</td><td><input name=”mail” type=”text”></td>
</tr>
<tr>
<td>адрес*</td><td><input name=”address” type=”text”></td>
</tr>
</table>
<br>
<input type=button value="проверка" onclick="prov()">
</form>
</body>
</html>
В данном примере реализован фрагмент формы, содержащей сведения о клиенте. Все поля являются обязательными для заполнения. Проверка заполнения каждого из полей реализуется с помощью функции prov(). Эта функция проверяет свойство VALUE объекта TEXT. На рис. 22 представлен вид формы в броузере.
Давайте разберем подробно работу функции prov() и синтаксис используемых операторов.
Проверка данных реализована с помощью оператора принятия решений if. Этот оператор оценивает условие и принимает решение о выполнении блока операторов в зависимости от результата. В нашей форме, если не заполнено хотя бы одно из обязательных полей, с помощью метода ALERT будет выдано сообщение "пожалуйста, заполните обязательные для заполнения поля". Оператор if применяется следующим образом:
if (условие)
{[операторы]
}
В качестве условия может указываться любое логическое выражение. Если результат условия равен TRUE, выполняются операторы, и работа программы продолжается. Если условие возвращает FOLSE, операторы игнорируются и работа продолжается. Обычно набор операторов заключается в фигурные скобки. Это придает сценарию логический вид и оказывается особенно полезным в случае вложенных операторов if.
Теперь разберем строку кода document.forms[0].fio.value. С помощью данного оператора осуществляется доступ к свойству value объекта text с именем fio. Доступ осуществляется в соответствии с точечной нотацией. Точечная нотация обеспечивает иерархический способ доступа к свойствам объектов.
Примечание: если объект является свойством другого, большего объекта, его имя упоминается вслед за именем большего объекта. Имена свойств, методов и обработчиков событий объекта указываются после имени самого объекта.
Следовательно, строка кода document.forms[0].fio.value содержит следующие компоненты:
Объект document (здесь первый в иерархии) создается при загрузке страницы и содержит информацию о текущем документе (заголовок, фон, цвет, формы). Объект document содержит массивы anchors, forms и links. С помощью этих массивов можно обратиться к каждому из объектов типа anchor, form и link, содержащихся в документе;
Объект form является свойством объекта document и представляет собой массив, содержащий все формы, определенные в документе. К нему можно обратиться либо по имени, определенному его атрибутом NAME, либо как к элементу массива: document.forms[N], где N – номер формы в документе, считая от нуля. (У нас форма в документе одна, поэтому ее номер ‑ 0);
Объект text является свойством объекта form. Обращение к объекту – по имени, определенному его атрибутом NAME. Для проверки заполнения поля мы используем свойство этого объекта value. Значением этого свойства является содержимое поля text.
Рис. 22. Форма с текстовыми полями
И, наконец, чтобы связать кнопку «Проверка» с обработчиком события OnClick этой кнопки, мы добавляем атрибут события к объекту button и устанавливаем его значение равным результату функции prov(): <input type=”button” value="проверка" onclick="prov()">.
Пригласите преподавателя и продемонстрируйте работающую Web-страницу.
Задание 3
Реализовать проверку введенных сведений о возрасте клиента. Ввод этих сведений Вы организовали в предыдущей лабораторной работе с помощью элементов RADIO. Проверку введенных данных реализовать с помощью функции prov(). Эта функция должна проверять свойство CHECKED объекта RADIO. Свойство CHECKED имеет значение TRUE или FALSE, показывающее, выбран ли данный элемент. К объекту RADIO необходимо обращаться по имени, определенному значением его атрибута NAME с добавлением его номера в массиве элементов с именем VOZ. На рис. 23 представлен вид формы в броузере.