Практикум по программированию на JavaScript

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

Показывать лекцию целиком

Концепция

Наш последний сценарий JavaScript не из легких, можете в этом не сомневаться.

Снова придется вернуться к формам. В сегодняшнем примере JavaScript применяется для проверки данных, которые ввел пользователь. Нужно будет ввести в форму свое имя и номер телефона из 7 или 9 знаков (ххххххх или ххх-хх-хх). Необходимо также проверить, что первые 3 символа являются цифрами. Это немного сложнее, чем все остальное, но с этим необходимо разобраться. Проверка данных часто является важной задачей для программистов.

Этот пример возвращает нас к свойству length (длина) и показывает в действии два новых метода: indexOf(), charAt(). Сам сценарий будет длиннее, чем обычно.

Сценарий

<HTML>
<HEAD>
<SCRIPT type="text/javascript">
function validfn(fnm)
{
fnlen=fnm.length
if (fnlen == 0)
{alert("Вы должны ввести свое имя")
document.dataentry.fn.focus()}
}
function validphone(phone)
{
len=phone.length
digits="0123456789"
if(len != 7  len != 9)
{alert("Неверное количество знаков в номере")
document.dataentry.phone.focus()}

for(i=0; i<3; i++)
{if (digits.indexOf(phone.charAt(i))<0)
{alert("Это должны быть цифры")
document.dataentry.phone.focus()
break}
}

}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="dataentry">
<h2>Подтверждение данных</h2>

Введите свое имя:<br>
  <INPUT TYPE="text" NAME="fn" 
    onBlur="validfn(fn.value)">

<SCRIPT LANGUAGE="JavaScript">
  document.dataentry.fn.focus()
</SCRIPT>

Введите номер телефона (ххх-хх-хх):<br>
    <INPUT TYPE="text" NAME="phone" SIZE=10 >

<INPUT TYPE="button"  VALUE="Отправить" 
     onClick="validphone(phone.value)">

</BODY>
</HTML>

Результат работы сценария

На странице выводятся два поля ввода с просьбой ввести свое имя и номер телефона. В случае недопустимого ввода выдается сообщение об ошибке.

Разбор сценария

Сценарий достаточно простой. Имеется две функции, validfn() и validphone(). Одна проверяет, введено ли имя, другая проверяет телефонный номер. Займемся первой:

function validfn(fnm)
{
  fnlen=fnm.length
  if (fnlen == 0)
  {alert("Вы должны ввести свое имя")
  document.dataentry.fn.focus()}
  }
<body>
<INPUT TYPE="text" NAME="fn" 
   onBlur="validfn(fn.value)">

Функция validfn(fnm) вызывается обработчиком события onBlur. onBlur запускается, когда курсор переходит на следующий элемент, в данном случае, когда мы выходим из текстового поля fn. Этот обработчик рассматривался в пятом уроке.

Заметьте, что параметр fn.value передается из формы в функцию, где получает новое имя fnm. fn.value можно было бы обозначить как document.dataentry.fn.value, но раз мы находимся в документе и внутри формы, это не обязательно.

Помните, содержимое поля формы передает команда имя_формы.value. Одного имени мало.

Переменной с именем fnlen присвоено значение длины имени пользователя. Таким образом, если пользователь введет имя "Коля", значение fnlen будет равно 4.

Если пользователь не вписал свое имя, значит, длина равна 0. Тогда программа выводит окно с сообщением об ошибке и ставит курсор или фокус в поле для ввода имени. Форма не столько проверяет, правильно ли вписано имя, сколько было ли что-нибудь вписано вообще.

Теперь посмотрим, как программа проверяет телефонный номер:

function validphone(phone)
{
len=phone.length
digits="0123456789"
if(len != 7  len != 9)
{alert("Неверное количество знаков в номере")
document.dataentry.phone.focus()}

for(i=0; i<3; i++)
{if (digits.indexOf(phone.charAt(i))<0)
{alert("Это должны быть цифры")
document.dataentry.phone.focus()
break}
}

Эта функция более длинная. Давайте разберем ее шаг за шагом. Во-первых, длина телефонного номера присваивается переменной len. Переменная digits содержит все десятичные цифры.

Потом оператор If проверяет, равна ли длина номера 7 или 9 знакам, хотя и звучит это несколько неуклюже. Двойной знак в Javascript означает "проверить оба свойства".

Если условие не выполнено, программа говорит пользователю о том, что он ввел неверное количество цифр, и снова устанавливает курсор или фокус в поле для ввода номера.

for(i=0; i<3; i++) проверяет первые 3 цифры номера одну за другой.

Выражение if (digits.indexOf(phone.charAt(i))<0) знакомит нас с двумя новыми методами: indexOf() и charAt(). Посмотрим на phone.charAt(i). Предположим, телефонный номер 123, и i = 2. Знак на второй позиции — цифра 3. Это не опечатка! Помните, порядковые номера начинаем считать с нуля. Таким образом, phone.charAt(0) = 1, phone.charAt(1) = 2, a phone.charAt(2) = 3!

indexOf — это метод, дающий порядковый номер для заданного значения. С помощью if (digits.indexOf(phone.charAt(i))<0), JavaScript ищет значение phone.charAt(i) в переменной digits.

Если телефонный номер 1234567 и i = 1, то программа ищет вторую цифру в переменной digits и находит ее, возвращая значение 1, так как digits = "0123456789".

Если номер телефона 12д и i = 2, программа ищет "д" в переменной digits. Не найдя ее, она возвращает -1. Если значение = -1 ( <0 ), тогда появляется окно с сообщением об ошибке и курсор или фокус устанавливается на прежнее место. Для телефонного номера ххххххх так можно проверить все 7 цифр.

И последнее — код HTML для формы:

Введите свое имя:<br>
  <INPUT TYPE="text" NAME="fn" 
    onBlur="validfn(fn.value)">

<SCRIPT LANGUAGE="JavaScript">
  document.dataentry.fn.focus()
</SCRIPT>

Введите номер телефона (ххх-хх-хх):<br>
    <INPUT TYPE="text" NAME="phone" SIZE=10>

<INPUT TYPE="button"  VALUE="Отправить" 
     onClick="validphone(phone.value)">

При использовании JavaScript с формами давайте каждому элементу уникальное имя, которое будет связывать его с разделом JavaScript, который его обрабатывает. Такое связывание мы уже использовали ранее. Просмотрите элементы формы и затем код JavaScript и определите, где одно связано с другим.

Задание

Во-первых, изучите сегодняшнюю программу и заставьте ее работать. Потом внесите несколько изменений. Попросите ввести телефонный номер в формате ххх-хххх. Пусть функция validphone(phone) проверит, стоит ли дефис на позиции 3. Команда != в JavaScript означает "не равно". Это может понадобиться.

Возможное решение

<html>
<head>

<SCRIPT type="text/javascript">
function validfn(fnm)
{
fnlen=fnm.length
if (fnlen == 0)
{alert("Необходимо ввести имя")
document.dataentry.fn.focus()}
}
function validphone(phone)
{
len=phone.length
digits="0123456789"
if(len != 8)
{alert("Неверное количество цифр в номере")
document.dataentry.phone.focus()}

if(len>3  phone.charAt(3) != "-")
{alert("Четвертый знак должен быть '-'")
document.dataentry.phone.focus()}

for(i=0; i<3; i++)
{if (digits.indexOf(phone.charAt(i))<0)
{alert("Это должны быть цифры")
document.dataentry.phone.focus()
break}
}
}
</script>

</head>
<body>

<form name="dataentry">
<h3>Подтверждение ввода данных через JavaScript</h3>
<p>Введите имя:<br>
<input type="text" name="fn" onBlur="validfn(fn.value)" size="20"> <script
language="JavaScript">
document.dataentry.fn.focus()
</script></p>
<p>Введите номер телефона (ххх-хххх):<br>
<input type="text" name="phone" size="10"></p>
<p><input type="button" value="Отправить"
onClick="validphone(phone.value)"></p>
</form>

</body>
</html>
Предыдущее занятие Следующее занятие
Вернуться к учебному плану
^