«Защитой от дурака» называется комплекс мер по пресечению ввода неправильной информации в форме. Например, если в поле требуется ввести положительное число от 0 до 10, то следует проверить, чтобы пользователь не ввёл текст или число, которое не лежит в указанном диапазоне, т.е. число не должно быть меньше нуля и больше десяти.

Почему происходит ввод неправильной информации? Это в основном совершается по трём причинам.

  • Пользователь ошибся случайно, например, невнимательно прочитал, что ему требуется указать.
  • На веб-странице неоднозначно просят ввести данные, поэтому пользователю приходится гадать и делать предположение, что же в действительности от него хотят. При этом не всегда происходит совпадение мнений разработчика и пользователя.
  • Есть ряд людей, которые воспринимают инструкции как вызов и стараются поступить наоборот. Такие пользователи рассуждают примерно так: «Ага, меня просят ввести число. А что будет, если я укажу буквы?». После чего задают явно неправильную информацию и смотрят, к чему это приведёт.

    • Следует понимать, что точные и правильные формулировки хотя и снижают вероятность возникновения ошибок, но никак не спасают от них. Только технические средства на стороне сервера позволяют получить требуемый результат и избежать ввода неправильной информации. Тем не менее, ревизия или, как её ещё называют, валидация на стороне клиента позволяет быстро проверить данные, вводимые пользователем, на корректность, без отправки формы на сервер. Таким образом экономится время пользователя и снижается нагрузка на сервер. С позиции юзабилити тоже имеются плюсы - пользователь сразу получает сообщение о том, какую информацию он указал неверно и может исправить свою ошибку.

    Обязательное поле

    Некоторые поля формы должны быть обязательно заполнены перед их отправкой на сервер. Это, к примеру, относится к форме регистрации, где требуется ввести логин и пароль. Для указания обязательных полей используется атрибут required , как показано в примере 1.

    Пример 1. Атрибут required

    HTML5 IE 10+ Cr Op Sa Fx

    Обязательное поле

    Логин:

    Пароль:

    Обязательные поля должны быть заполнены перед отправкой формы, иначе форма на сервер не отправится и браузер выдаст об этом предупреждение. Вид сообщения зависит от браузера, например Chrome выводит всплывающую подсказку, как показано на рис. 1.

    Рис. 1. Обязательное поле не заполнено

    Корректность данных

    Исходно имеется два поля, в котором вводимые пользователем данные проверяются автоматически. Это веб-адрес и адрес электронной почты. Браузер Chrome также проверяет на корректность поле с календарными данными, но только потому, что у него не предусмотрен интерфейс выбора календаря щелчком мыши. Для этих элементов характерны следующие правила.

    • Веб-адрес ( ) должен содержать протокол (http://, https://, ftp://).
    • Адрес электронной почты ( ) должен содержать буквы или цифры до символа @, после него, затем точку и домен первого уровня.

    У браузеров несколько различается политика по проверке данных пользователя. К примеру, Opera подставляет протокол http:// перед введённым текстом автоматически, тогда как другие браузеры ждут его от пользователя. Chrome и Opera требуют, чтобы в почтовом адресе была точка, для Firefox она не обязательна.

    В примере 2 показана форма с обязательными полями, в которой два поля проверяется браузером.

    Пример 2. Корректность данных

    HTML5 IE 10+ Cr Op Sa Fx

    Корректность данных

    Заполните форму (все поля обязательны)

    Имя:

    Email:

    Сайт:

    Opera проверяет элемент формы только при наличии атрибута name.

    Что происходит в Opera при вводе неверных данных показано на рис. 2.

    Рис. 2. Предупреждение о неправильных данных

    Шаблон ввода

    Некоторые данные нельзя отнести к одному из видов элементов формы, поэтому для них приходится использовать текстовое поле. При этом их ввод происходит по определённому стандарту. Так, IP-адрес содержит четыре числа разделённых точкой (192.168.0.1), почтовый индекс России ограничен шестью цифрами (124007), телефон содержит код города и конкретное количество цифр часто разделяемых дефисом (391 555-341-42) и др. Браузеру необходимо указать шаблон ввода, чтобы он согласно нему проверял вводимые пользователем данные. Для этого используется атрибут pattern , а его значением выступает регулярное выражение . Некоторые типовые значения перечислены в табл. 1.

    В примере 3 просят ввести шестнадцатеричное значение цвета (#ffcc00) и если оно не лежит в этом диапазоне, браузер выводит сообщение об ошибке.

    Пример 3. Шаблон ввода

    HTML5 IE 10+ Cr Op Sa Fx

    Ввод цвета

    Введите шестнадцатеричное значение цвета (должно начинаться с #)

    На рис. 3 показано предупреждение в браузере Chrome.

    Рис. 3. Введённые данные не соответствуют шаблону

    Отмена валидации

    Валидация не всегда требуется для формы, к примеру, разработчик пожелает использовать универсальное решение на JavaScript и дублирующая проверка браузером ему уже ни к чему. В подобных случаях необходимо отключить встроенную валидацию. Для этого применяется атрибут novalidate тега . В примере 4 показано использование этого атрибута.

    Пример 4. Отмена валидации

    HTML5 IE 10+ Cr Op Sa Fx

    Атрибут novalidate

    Для аналогичной цели применяется и атрибут formnovalidate , который добавляется к кнопке для отправки формы, в данном случае к тегу . В этом случае форма из примера 4 будет иметь следующий вид.

    В нашем примере у нас 5 полей, которые необходимо заполнить:

    - имя
    - сообщение
    - e-mail
    - контактный телефон
    - контрольное число для защиты

    Помимо простой проверки на пустоту поля, мы покажем

    как проверить правильно ли введен e-mail и телефон

    Проверять поля мы будем с помощью JavaScript. В последнее поле необходимо ввести определенное число (для защиты от автоматического заполнения). Если поля будут пустыми, появится alert-окно с уведомлением. К данному скрипту мы сразу прибавили отправку заполненной формы на почту, делать мы это будет с помощью php.

    Итак, создаем файл index.php и пишем туда следующую форму:

    1. Ваше имя:



    2. Сообщение:



    3. E-Mail



    4. Контактный телефон



    3. Введите сумму 10+10





    Создаем файл data.js , пишем в него код проверки:
    function Formdata(data){
    /* если не заполнено поле Ваше имя, длина менее 3-x*/
    if (data.fnm != null && data.fnm.value.length < 3)
    {
    alert("Заполните поле "Ваше имя"");
    return false;}

    /* если не заполнено поле Сообщение */
    if (data.text != null && data.text.value.length < 3)
    {
    alert("Заполните поле "Сообщение"");
    return false;}

    /* e-mail Юзера */
    if(data.email != null && data.email.value.length == 0)
    {
    alert("поле "E-Mail" пустое");
    return false;}

    if(data.email != null && data.email.value.length < 6)
    {
    alert("слишком короткий "E-Mail"");
    return false;}

    if(!(/^w+[-_.]*w+@w+-?w+.{2,4}$/.test(data.email.value)))
    {
    alert("Введите правильный E-Mail адрес");
    return false;}

    /* контактный телефон */
    if(data.phone != null && data.phone.value.length == 0)
    {
    alert("поле "Контактный телефон" пустое");
    return false;}

    if(data.phone != null && data.phone.value.length < 5)
    {
    alert("поле "Контактный телефон" должно содержать минимум пять символов");
    return false;}

    if(!(/^+z/.test(data.phone.value+"z")))
    {
    alert(""Контактный телефон" указан неверно");
    return false;}

    /* делаем чтобы поле сумма было равно определенному числу */
    number = document.getElementById("summa");
    if (number.value !== "20")
    {
    alert(""Сумма" не введена или введена неверно");
    return false;}
    } Подгружаем данный файл в наш документ, помещаем его между тегами head:

    Вот и готова наша проверка. Теперь после того, как все данные введены отправляем нашу форму нам на почту.
    В файл index.php пишем php-код:

    Данный урок описывает, как создать JavaScript форму, которая проверяет правильность заполнения посетителем полей перед отправкой данных на сервер. Сначала мы объясним, почему проверка заполнения формы является полезной методикой, а затем построим простой пример с объяснением, как все происходит.

    Зачем нужна проверка заполнения формы?

    Проверка заполнения формы - процесс, при котором данные формы проверяются перед обработкой. Например, если Ваша форма имеет поле, в которое пользователь должен ввести email адрес, возможно Вы захотите проверить, что поле заполнено, прежде чем начать дальнейшую обработку формы.

    Существует два основных метода для проверки заполнения формы: на стороне сервера (с использованием CGI скриптов, ASP и т.д.) и на стороне клиента (обычно используется JavaScript). Проверка на стороне сервера более безопасная, но в большинстве случаев требует более сложного кода, в то время как проверка на стороне клиента выполняется проще и быстрее (браузер не нуждается в соединении с сервером для проверки заполнения формы, таким образом, пользователь получает немедленный ответ в случае пропущенных полей, которые необходимо заполнить).

    Проверка формы на стороне клиента. Обычно выполняется с помощью встроенного JavaScript скрипта.

    Проверка формы на стороне сервера. Обычно выполняется с помощью CGI или ASP скрипта.

    В данном уроке мы построим простую форму с проверкой на стороне клиента с помощью JavaScript. Вы сможете затем адаптировать ее под свои нужды.

    Простая форма с проверкой.

    Давайте построим простую форму с проверкой заполнения с помощью скрипта. Данная форма имеет одно текстовое поле "Ваше имя" и кнопку для отправки данных. Наш скрипт проверяет, что пользователь ввел свое имя перед тем, как отправить данные на сервер.

    Откройте форму и посмотрите в действии. Попробуйте нажать кнопку "Отправить данные" ничего не вводя в поле "Ваше имя".

    Страница содержит функцию JavaScript, которая называется validate_form(). Она выполняет проверку заполнения формы. давайте посмотрим сначала на форму.

    Форма

    Первая часть формы - тэг form

    Форма имеет имя contact_form. С его помощью мы получим доступ к форме из JavaScript функции проверки.

    Форма использует постметод для отправки данных в htm-файл заглушку, который просто выводит сообщение. В действительности Вы можете пересылать данные Вашему CGI скрипту, ASP странице и т.д. (например для отправки почты).

    Также тэг form содержит onsubmit атрибут для вызова JavaScript функции проверки validate_form (), когда нажимается кнопка "Отправить данные". Функция возвращает логическое значение, для которого true означает "проверка прошла успешно", а false - "данные задержаны". Таким образом мы можем предотвратить отправку данных формы, если пользователь не заполнил ее правильно.

    Остальной код формы добавляет поле ввода contact_name и кнопку "Отправить данные":

    Пожалуйста введите Ваше имя.

    Ваше имя:

    Функция validate_form()

    Функция проверки формы validate_form() встроена в секцию head вначале страницы:

    Первая строчка () указывает браузеру, что далее идет код JavaScript, а коментарий HTML (