Разбор
скрипта
В скрипте две
функции, 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. Помните свойство length?
- Если пользователь не вписал
свое имя, значит, длина равна 0. Тогда программа
вызывает окно с сообщением об ошибке, и ставит
курсор или 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}
}
- Эта функция подлиннее.
Давайте разберем ее шаг за шагом. Во-первых, длине
телефонного номера присваивается переменная len.
Переменная digits содержит все цифры.
- Потом команда If проверяет, равна ли длина номера 7 или 9 знакам,
хотя и звучит это несколько неуклюже. Двойной
знак && в Javascript означает «проверить оба
свойства».
- Если условие не выполнено, программа говорит пользователю о том, что он ввел
неверное количество цифр, и снова устанавливает
курсор или focus в поле для ввода.
- 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), тогда
появляется окно с сообщением об ошибке и курсор
или focus устанавливается на прежнее место. Для
телефонного номера ххххххх так можно проверить
все 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 с формами,
давайте каждому элементу уникальное имя, которое
потом будет обозначено в скрипте. Это вы уже
проходили.
Во-первых, изучите
сегодняшнюю программу и заставьте ее работать.
Потом внесите несколько изменений. Попросите
ввести телефонный номер в формате ххх-хххх. Пусть
функция validphone(phone) проверит, стоит ли дефис на
позиции 3. Команда != в JavaScript означает «не
равно». Это вам понадобится.
Возможный ответ здесь |
|
