JavaScript для новичков - Формы

Written on . Posted in HTML, CSS, JavaScript

ОГЛАВЛЕНИЕ

Страница 8 из 12
 

Формы

Допустим, у вас есть следующая форма:

<form name="aa">
<input type="text" size="10" value="" name="bb"><br>
<input type="button"
value="Click Here"onclick="alert(document.aa.bb.value)">
</form>

Заметьте то, что мы дали названия форме и элементам. Итак, JavaScript может получить к ним доступ.

onBlur

Если вы хотите получить больше информации от пользователей и хотите проверить каждый элемент (а именно: имя пользователя, пароль, электронную почту) в отдельности и предупредить пользователя о том, что он должен исправить неправильно введенные данные перед тем, как он может продолжить далее, вы можете использовать onBlur. Давайте изучим работу onblur:

<html><head><script>
function emailchk()
{
var x=document.feedback.email.value
if (x.indexOf("@")==-1)
{
    alert("Похоже, вы ввели неверный адрес электронной почты.")
    document.feedback.email.focus()
}
}
</script></head><body>

<form
name="feedback">
Email:<input type="text" size="20" name="email"
onblur="emailchk()"><br>
Comment: <textarea name="comment" rows="2" cols="20"></textarea><br>
<input type="submit" value="Submit">
</form>
</body></html>

Если вы введете адрес электронной почты без знака @, то вы увидите предупреждение, которое попросит вас повторно внести данные. Что такое : x.indexOf(@)==-1? Это метод, который может просмотреть каждый символ в строке и найти тот, который нам нужен. Если он его найдет, то он вернет номер позиции данного символа в строке. Если же символ не будет найден, то вы получите -1. Тем самым, x.indexOf("@")==-1 на самом деле означает "если строка не включает в себя @, то:

alert("Похоже, вы ввели неверный адрес электронной почты.")
document.feedback.email.focus()

Что такое focus()? Это метод текстового поля, который фактически заставляет курсор перейти на указанный текстовый блок. onsubmit в отличие от onblur обладает обработчиком, который вставляется в пределы тега <form>, а не в пределы одного элемента. Давайте выполним один пример:

<script>
<!--
function validate()
{
if(document.login.userName.value=="")
{
    alert ("Пожалуйста, введите имя пользователя")
    return false
}
if(document.login.password.value=="")
{
    alert ("Пожалуйста, введите пароль")
    return false
}
}
//-->

</script>

<form name="login" onsubmit="return validate()">
<input type="text" size="20" name="userName">
<input type="text" size="20" name="password">
<input type="submit" name="submit" value="Submit">
</form>

На заметку :
if(document.login.userName.value==""). Это означает, что "если область, названная userName формы login не содержит ничего, то..." возвращается false. Это используется для защиты от отсылки пустой формы. По умолчанию форма возвращает true если ее отослать. return validate() - означает, что "если отсылается форма, то необходимо вызвать функцию validate()".

Защита файла при помощи Login

Давайте попробуем следующий пример

<html><head>
<SCRIPT Language="JavaScript">
function checkLogin(x)
{
if ((x.id.value != "Sam")||(x.pass.value !="Sam123"))
{
    alert("Неверное имя пользователя");
    return false;
}
else
    location="main.htm"
}
</script>

</head><body>
<form>
<p>UserID:<input type="text" name="id"></p>
<p>Password:<input type="password" name="pass"></p>
<p><input type="button" value="Login" onClick="checkLogin(this.form)"></p>
</form>
</body></html>

|| означает "или", и ,!= означает "не равно". Поэтому мы может расписать код как "если id не равно 'Sam', или же пароль не равен 'Sam123', то выводится сообщение ('Неверная авторизация') и отсылка форма прекращается. В противном случае будет открыта страница 'main.html".

html форум