Узнайте, как проверять формы с помощью JavaScript или CGI

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

Есть два способа проверки ваших форм:

  1. Использование JavaScript
  2. Использование CGI-скрипта

Преимущества использования JavaScript для проверки форм

  • Используя JavaScript, вы не используете процессорное время сервера. Вся обработка выполняется на клиентском компьютере.
  • Часто кажется, что он работает быстрее, чем проверка CGI.
  • Поскольку страница формы не изменилась, читателю легко исправить ошибки.

Минусы использования JavaScript для проверки форм

  • JavaScript работает только в тех браузерах, в которых он включен. Если JavaScript отключен, проверка ошибок не выполняется.

Преимущества использования CGI для проверки форм

  • Использование CGI для проверки гарантирует, что при каждой отправке формы проверка будет выполняться.

Минусы использования CGI для проверки форм

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

То, как я справляюсь с этим, заключается в том, чтобы большая часть проверки ошибок выполнялась с помощью JavaScript. Таким образом, это быстро и легко для читателей. Затем я проверяю жизненно важные элементы формы с помощью компьютерной графики.

Как использовать JavaScript для проверки HTML-форм

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

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

JavaScript для проверки формы

В заголовочной части вашего HTML вы должны создать скрипт для проверки формы:

  1. Настройте сценарий и убедитесь, что он скрыт от браузеров, которые не поддерживают JavaScript.
       
  2. Это вызов функции, который запускает проверку. Это хорошая форма, чтобы установить ваши переменные в верхней части вашего скрипта.

    1.   Функция проверки (theForm)  
  3.   {var error = "";  
    1. Если у вас есть раскрывающиеся элементы в ваших формах, вы должны включить первый параметр в качестве пустого поля (например,

       выберите один 

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

       if  (theForm.dd.options [0] .selected == true) { 
    2.   error + = "Пожалуйста, выберите из выпадающего списка. \ n";}  
    1.   Текстовые элементы легче всего проверить. Просто проверьте, является ли значение пустым. Если это так, установите сообщение об ошибке. if (theForm.words.value == "") { 
    2.   error + = "Пожалуйста, заполните текстовый элемент. \ n";}  
  4.   Если вы хотите проверить тип данных в текстовом поле, вам нужно немного поумнеть. Этот фрагмент скрипта просматривает текстовое поле, чтобы увидеть, нет ли в нем нечисловых символов (переменная «цифры» определяет то, что он ищет).  
    1.   var digits = "0123456789";  
    2.   if (theForm.number.value == "")  
    3.   { 
    4.   error + = "Пожалуйста, введите номер. \ n";  
    5.  }  
    6.   для (var i = 0; i  
    7.   { 
    8.   temp = theForm.number.value.substring (i, i + 1)  
    9.   if (digits.indexOf (temp) == -1 && theForm.number.value! = "")  
    10.   { 
    11.   error + = "Числовой текст должен быть числом.\ П ";  
    12.   пролом;  
    13.  }}  

Подтвердите адрес электронной почты с помощью JavaScript

  1. В этой части сценария показано, как проверить адрес электронной почты. Это очень простая проверка, она проверяет только наличие @ -знака и точки. Люди могут по-прежнему вводить поддельные адреса электронной почты, но это помогает немного сократить количество неправильных записей.

    1.   if (theForm.email.value == "")  
  2.   { 
  3.   error + = "Вы должны указать точный адрес электронной почты для ответа. \ n";  
  4.  }  
  5.   if ((theForm.email.value.indexOf ('@', 0) == -1 ||  
  6.   theForm.email.value.indexOf ('.', 0) == -1) && theForm.email.value! = "")  
  7.   { 
  8.   error + = "Пожалуйста, убедитесь, что ваш адрес электронной почты действителен.";  
  9.  }  
  10. Это мясо сценария. Он делает две вещи: во-первых, он проверяет наличие ошибки. Если есть, он отображает его как предупреждение. Затем он отправляет возвращаемое значение false, чтобы информация о форме не отправлялась на сервер. Ваши сообщения об ошибках (задаются в приведенных выше операторах if), все включают в себя «\ n» в конце строки. Это говорит браузеру вставлять возврат каретки (или «ввод» или «новая строка») в конце строки. Затем, если есть несколько сообщений об ошибках, они все будут в отдельных строках. Если сообщения об ошибках не заданы, переменная ошибки будет пустой (откуда мы ее установили в верхней части скрипта), и поэтому информация о форме будет отправлена ​​на сервер для обработки CGI.

    1.   if (error! = "")  
  1.   { 
  2.   предупреждение (ошибка);  
  3.   return (false);  
  4.  } else { 
  5.   return (true);  
  6.  }  
  7. Не забудьте закрыть свой скрипт.

    1.  }  
  8.   // ->  

Затем, чтобы вызвать скрипт, поместите элемент onsubmit в тег формы:

   

CGI для проверки форм

Этот фрагмент CGI-скрипта на Perl делает то же самое, что и JavaScript. Он проверяет наличие обязательных полей и, если нет, сохраняет сообщение об ошибке в переменную для отображения:

 $ error + = "
{
if ($ in {'dd'} eq" ")
$ error =" ";
#!/usr/local/bin/perl

Выберите из раскрывающегося списка.
“;
}
if ($ in {‘words’ } eq “”)
{
$ error + = “
Пожалуйста, включите несколько слов в текстовое поле.
“;
}
# .. . продолжить проверку всех полей
if ($ error)
распечатать “Content-type: text/html \ n \ n”;
напечатать “Error”;
напечатать “ напечатать”

Произошла ошибка

“;
напечатать $ error;
напечатать” Пожалуйста вернитесь и исправьте эти ошибки. “;
напечатать “”;
} else {
# Продолжайте CGI …
}

Разница в том, как CGI записывает сообщение об ошибке, состоит в том, что вместо «\ n» он использует тег абзаца HTML, чтобы поместить новую строку между каждой ошибкой.

И теперь вы подтвердили свою форму

С помощью двух методов, CGI и JavaScript, вы проверили HTML-форму, чтобы большинство отправленных вам частей были точными.

Оцените статью
Solutics.ru
Добавить комментарий