Ввод идентификатора и пароля
В качестве практического примера применения сценария JavaScript для обработки информации из полей text и password приведем документ HTML, предназначенный для регистрации пользователей.
В форме регистрации новый пользователь должен ввести свой идентификатор, а также задать пароль (3.15).
Рис. 3.15. Форма для регистрации нового пользователя
В процессе ввода пароля легко допустить ошибку, поэтому обычно в системах регистрации требуется вводить новый пароль два раза. Если оба раза был введен одинаковый пароль, то он становится активным для данного пользователя.
Наш сценарий, обрабатывающий данные из формы, показанной на рис. 3.15, решает две задачи.
Во-первых, он преобразует символы идентификатора пользователя в прописные. Во-вторых, сценарий проверяет идентичность паролей, введенных в полях “Пароль” и “Проверка пароля”.
Если введенные пароли идентичны, то после нажатия на кнопку Complete пользователь увидит на экране диалоговую панель с введенным идентификатором и паролем (рис. 3.16).
Рис. 3.16. Диалоговая панель с идентификатором и паролем нового пользователя
Если пароли не совпадают, сценарий предлагает пользователю повторить ввод паролей (рис. 3.17).
Рис. 3.17. Приглашение для повторного ввода пароля
Исходный текст нашего документа HTML, регистрирующего новых пользователей, показан в листинге 3.6.
Листинг 3.6. Файл chapter3/password/password.html
<HTML>
<HEAD>
<TITLE>Ввод и проверка пароля</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Complete()
{
if(Sel.pwd.value != Sel.pwd1.value)
alert("Ошибка при вводе пароля\nПопробуйте еще раз");
else
{
var szId="";
var szPwd="";
szId = Sel.id.value;
szPwd = Sel.pwd.value;
alert("Регистрация выполнена:\n" + "ID=" +
szId + "\nPassword=" + szPwd);
}
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<H1>Регистрация</H1>
<FORM NAME="Sel">
<TABLE>
<TR><TD><B>Идентификатор:</B></TD><TD><INPUT TYPE="text"
NAME="id" onChange="this.value=this.value.toUpperCase()"
SIZE="20" ></TD></TR>
<TR><TD><B>Пароль:</B></TD><TD><INPUT TYPE="password"
NAME="pwd" SIZE="20"></TD></TR>
<TR><TD><B>Проверка пароля:</B></TD><TD><INPUT TYPE="password"
NAME="pwd1" SIZE="20"></TD></TR>
</TABLE>
<P>
<TABLE>
<TR><TD><INPUT TYPE="button" VALUE="Complete"
onClick="Complete();"></TD>
<TD><INPUT TYPE="reset" VALUE="Reset"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Преобразование символов идентификатора пользователя выполняет обработчик события onChange, определенный для поля id типа text:
<INPUT TYPE="text" NAME="id"
onChange="this.value=this.value.toUpperCase()" SIZE="20">
Это преобразование выполняет функция toUpperCase, которой мы уже пользовались раньше.
Что же касается проверки пароля, то этим занимается функция Complete, определенная в качестве обработчика события onClick для одноименной кнопки, предназначенной для посылки заполненной формы.
Вот исходный текст этой функции:
function Complete()
{
if(Sel.pwd.value != Sel.pwd1.value)
alert("Ошибка при вводе пароля\nПопробуйте еще раз");
else
{
var szId="";
var szPwd="";
szId = Sel.id.value;
szPwd = Sel.pwd.value;
alert("Регистрация выполнена:\n" + "ID=" +
szId + "\nPassword=" + szPwd);
}
}
Если пользователь ввел разные пароли, значения свойств Sel.pwd.value и Sel.pwd1.value не совпадают. В этом случае функция Complete отображает диалоговую панель с сообщением об ошибке.
При совпадении паролей функция Complete извлекает значения идентификатора пользователя Sel.id.value и его пароля Sel.pwd.value, а затем отображает их на экране.
