Отправляет email-рассылки с помощью сервиса Sendsay

Web-программирование - это просто!

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 680 RSS
←   Август 2016   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


За последние 60 дней ни разу не выходила


Сайт рассылки: http://www.easyprog.ru
Открыта: 27-06-2009
Адрес автора: comp.soft.prog.easyweb-owner@subscribe.ru

Автор
Александр

Статистика

680 подписчиков
0 за неделю
←   Все выпуски   →

Web-программирование - это просто!


Новое на сайте Программирование - это просто! (www.easyprog.ru):

В платном разделе

В бесплатном разделе

Web-программирование. Java Script(JS): Взаимодействие с пользователем. Проверка данных перед отправкой формы.

Для проверки данных, которые пользователь вводит в различные поля формы, можно применять разные подходы. Иногда достаточно только проверить, заполнены ли все необходимые поля. В более сложных случаях необходимо проверять также и правильность ввода данных в текстовые поля: записаны ли они в нужном формате, не содержат ли недопустимых символов. Проверку  содержимого полей можно проводить непосредственно перед отправкой на сервер, или после ввода каждого символа, например, в том случае, когда необходимо запретить ввод недопустимых символов. Можно делать проверку и на сервере, но все таки лучше на клиенте, чтобы не отправлять лишний раз данные сервер, так как эта операция занимает какое то время. Ниже я приведу пример проверки заполненности полей на клиенте:

 

<html>

    <head>

        <meta charset="UTF-8">

        <title>Урок 116. Java Script (JS): Проверка данных перед оправкой формы</title>

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

            function validate(form) {

                if(!form.Name.value) {

                    alert("Не введено имя!");

                    return false;

                }

                if(!form.SoName.value) {

                    alert("Не введена фамилия!");

                    return false;

                }

                return true;

            }

        </SCRIPT>

    </head>

    <body>

        <form name="myform" method="GET" action="script.html">

            Имя: <input type="text" name="Name"></input><br>

            Фамилия: <input type="text" name="SoName"></input><br>

            <input type="submit" value="OK" name="ok" ONCLICK="return validate(this.form)">

        </form>

    </body>

</html>

 

В данном примере мы видим, что для проверки наполненности текстового поля достаточно проверить свойство value соответствующего DOM-объекта.  Но иногда надо проверять, например, переключатели:

 

Web-программирование. Java Script(JS): Взаимодействие с пользователем. Проверка данных перед отправкой формы.

В этом случае нам надо проверить установку каждого пункта такого переключателя, а именно свойство checked. Сделать это можно в цикле:

                var is_checked=false;

                for(var i=0; i<form.gender.length; i++) {

                    if(form.gender[i].checked) is_checked=true;

                }

 

Ниже приведен полный пример с данными переключателями:

<html>

    <head>

        <meta charset="UTF-8">

        <title>Урок 116. Java Script (JS): Проверка данных перед отправкой формы</title>

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

            function validate(form) {

                if(!form.Name.value) {

                    alert("Не введено имя!");

                    return false;

                }

                if(!form.SoName.value) {

                    alert("Не введена фамилия!");

                    return false;

                }

                var is_checked=false;

                for(var i=0; i<form.gender.length; i++) {

                    if(form.gender[i].checked) is_checked=true;

                }

                if(!is_checked) {

                    alert("Не указан пол!");

                    return false;

                }

                return true;

            }

        </SCRIPT>

    </head>

    <body>

        <form name="myform" method="GET" action="script.html">

            Имя: <input type="text" name="Name"></input><br>

            Фамилия: <input type="text" name="SoName"></input><br>

            Пол:<br>

            <input type="radio" value="male" name="gender">Мужской<br>

            <input type="radio" name="gender" value="female">Женский

            <input type="submit" value="OK" name="ok" ONCLICK="return validate(this.form)">

        </form>

    </body>

</html>

 

Итак, подытожим. Мы научились проверять заполненность текстовых полей ввода и переключателей. В будущих уроках научимся делать также и другие проверки. Но новых встреч.

 

С уважением, Шуравин Александр, e-mail: megabax@rambler.ru, автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.

 

 
В избранное