logo
[ПСП] / lab22

Реализация проверки введенных пользователем данных

Давайте теперь займемся более сложной ситуацией и реализуем проверку ввода пользователя на нашей странице default.htm. Задача проста: при нажатии на кноп­ку Submit должен вызываться метод JavaScript, который будет проверять, не остав­лено ли какое-либо из текстовых полей пустым. Если так оно и есть, пользователю будет выдаваться сообщение Internet Explorer с информацией о допущенной им ошибке. Прежде всего, нам потребуется определить для кнопки Submit событие onclick. При возникновении этого события должен вызываться метод JavaScript ValidateData (). Этот метод будет проводить проверку на отсутствие данных в тек­стовых полях:

<script language = javascript>

<!- Необходимо использовать полные имена текстовых полей в формате имя_формы.имя_поля!

function ValidateData()

{

// Если что-то забыто, выводим окно сообщения

if((MainForm.txtUserName.value == "") || (MainForm.txtPassword.value == ""))

{

Alert(“You must supply a user name and password!");

return false;

}

return true;

}

->

<input id = btnSubmit onclick = "return ValidateData()" type=submit value = Submit name = btnSubmit>

С проверкой данных в нашей форме все. Однако в этом примере были проде­монстрированы лишь самые примитивные возможности JavaScript. Чтобы дать хотя бы небольшое представления о других возможностях этого языка и браузерных скриптов в целом, давайте создадим еще одну функцию, которая будет вызы­ваться при загрузке страницы и выводить информацию о дате и времени входа пользователя. Для этой функции (она будет называться GetTheDate()) нам потре­буется еще один тег <script>. Обратите внимание на применение метода write() объекта Document, представляющего текущий документ, загруженный в Internet Explorer.

<HTML>

<HEAD>

<TITLE>HTML is unavoidable</TITLE>

<script language = javascript>

<!- Методы JavaScript для этой формы

function ValidateData()

{

if((MainForm.txtUserName.value == "") || (MainForm.txtPassword.value == "")) {

alert(“You must supply a user name and password!")

return false;

}

return true;

}

function GetTheDate() { return Date() }

->

</script>

</HEAD>

<BODY bgColor=#66ccff>

<!- Приглашение пользователю для ввода ->

<center>

<hl>The Cars Login Page</hl>

<h2>Today is: </h2>

<script language=javascript>

// Метод document.write - часть объектной модели IE

Document.write(GetTheDate());

</script>

<br> </h3>Please enter your <i>user name</i> and <i>password</i>.</h3>

<!- Создаем форму для приема ввода данных пользователем ->

<form name=MainForm>

<p>User Name: &nbsp: <input type=text name=txtUserName></p> <p>Password:    <input type=password name=txtPassword> </p>

<input id=btnSubmit onclck=ValidateData() type=submit value=Submit name=btnSubmit>   <input type=reset value=Reset name=btnReset>

</form>

</center>

</BODY>

</HTML>