Как и многие веб-разработчики, я посвящаю много времени тестированию пользовательского интерфейса сайтов, над которыми работаю.
Автоматизированное тестирование, конечно, является хорошей помощью в этом процессе, но «болевые точки » в интерфейсе зачастую невозможно выявить иным способом, кроме как использовать сайт. Ещё и ещё раз. Этот процесс может очень быстро надоедать. Особенно заполнение форм.
Я сам попал в такую ситуацию пару месяцев назад, когда мы добавляли британский фунт к поддерживаемым валютам при расчёте в Wufoo .
Для проверки необходимо было заполнить множество полей с именами, адресами, номерами кредиток и всего прочего, что подразумевается в процессе расчёта. Разумеется, значительная часть этих данных не должна была повторяться:
В конце концов, я сделал букмарклет для быстрого заполнения форм тестовыми данными. (Bookmarklet – программа на JavaScript , выполненная в виде закладки в браузере, гибрид английских слов «bookmark » – закладка и «applet » – маленькое приложение. – Прим. перев.)
Я выбрал форму букмарклета, потому что:
- его легко передать пользователю;
- его легко обновить без участия пользователя;
- он запускается на любой платформе без изменений.
Вы можете легко сделать букмарклет, создав новый «загончик » на CodePen и поместив в HTML что-то вроде:
Пользователю достаточно перетащить получившуюся ссылку в область закладок своего браузера. Клик по закладке запустит код на текущей странице.
В этом проекте я полагался на jQuery для придания коду максимальной удобочитаемости и кроссбраузерности. Если кому-то нужна версия на чистом JavaScript , напишите мне комментарий – я постараюсь что-нибудь сообразить.
Для создания случайных данных я использовал замечательную библиотеку Faker . Её JavaScript -реализацию можно взять здесь .
Основа букмарклетаМы можем поместить весь код прямо в ссылку. Но такой вариант будет неудобно читать и сопровождать. Кроме того, мне хотелось иметь возможность вносить исправления в код, не заставляя пользователей обновлять закладку. Так что лучше оставить в букмарклете ссылку на внешний файл.
Сам букмарклет выглядит так:
Мой букмарклет
В нём мы подгружаем скрипт в тело страницы и добавляем туда же ссылку на внешний файл JavaScript . Необходимо заметить, что, если букмарклет применяется к тестированию страницы, загружаемой по https , то и внешний JS -файл должен отдаваться по https , иначе браузер выдаст ошибку безопасности.
Вполне возможно, что при разработке букмарклета вы захотите воспользоваться локальным сервером. В таком случае не забудьте заменить адрес в ссылке на адрес реального сервера, когда будете распространять ваш скрипт.
Заполнение полейТеперь, когда мы закончили с закладкой, загружающей наш скрипт, можно взяться и за сам скрипт.
Сверхважной задачей для нас будет не сломать ничего в странице, над тестированием которой будет работать наш скрипт.
Поэтому мы обернём его в самозапускающуюся анонимную функцию . Это соответствующим образом ограничит область видимости наших функций и переменных:
Мне очень нравится функция генератора псевдослучайных чисел, приведённая Крисом Койлером в этой статье . Воспользуемся ей по мере необходимости:
var _rand = function(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
Теперь загрузим FakerJS . Поскольку наш скрипт зависит от jQuery , мы можем использовать его механизм отложенной загрузки при помощи функции $.getScript :
Теперь, когда доступ к Faker нам обещан , мы можем использовать его методы для генерации разнообразных правдоподобных имён, мест, адресов и других тестовых данных.
Повторное использование сгенерированных данных обеспечит нам следующий конструктор:
var FormData = function(faker) { this.faker = faker; this.randomWord = faker.Internet.domainWord(); this.username = "fake_" + this.randomWord; this.username += _rand(100,9999); // set this value to your password specifications this.password = "pass1234"; this.name = faker.Name.findName(); this.address1 = faker.Address.streetAddress(); this.city = faker.Address.city(); this.state = faker.random.br_state_abbr(); this.zip = faker.Address.zipCode(); // Chris" actual credit card number this.cc = "4242 4242 4242 4242"; this.exp1 = _rand(1,12); this.exp2 = _rand(14,22); this.cvv = _rand(100,999); };
Неплохо было бы протестировать также чекбоксы и радиокнопки на нашем сайте, выбирая их в случайном порядке. Для этого нам придётся несколько расширить функциональность нашего конструктора:
// Randomly select dropdown FormData.prototype.randomizeSelect = function(el) { var $el = $(el), len = $el.find("option").length - 1; $el.children("option") .prop("selected", false) .eq(_rand(1,len + 1)) .prop("selected", true); }; // Randomly select radio button FormData.prototype.randomizeRadio = function(radios) { radios.not(""); var len = radios.length; radios .prop("checked", false) .eq(_rand(0, len - 1)) .prop("checked", true); }; // Add some lorem text for textareas FormData.prototype.randomizeParagraph = function(el) { $(el).val(this.faker.Lorem.sentence(5)); }; // Randomize all checkbox fields FormData.prototype.randomizeCheckbox = function(el) { var $el = $(el); $el.prop("checked", false); if (_rand(0,1) === 0) { $el.prop("checked", true); } }; FormData.prototype.randomizeEmail = function(el) { // if we want different emails for all email fields, we can modify this $(el).val("chriscoyier+" + this.randomWord + "@gmail.com"); };
И наконец, нам нужно сопоставить генерируемые данные с различными полями тестируемых форм. Мы извлечём из нашей страницы все поля форм и заполним их данными в соответствии с их типом и CS S-классом.
В таком виде наш скрипт прекрасно реализует разделение между механизмом генерации данных и механизмом их использования:
var fillForm = function() { data = new FormData(window.Faker); $("#name").val(data.name); $("#username").val(data.username); $("#cc").val(data.cc); $("#exp-1").val(data.exp1); $("#exp-2").val(data.exp2); $("#cvv").val(data.cvv); $("#address").val(data.address1); $("#city").val(data.city); $("#state").val(data.state); $("#zip").val(data.zip); $("#pw").val(data.password); $("#pw-repeat").val(data.password); data.randomizeRadio($("")); // Randomize all select boxes $("select").each(function() { data.randomizeSelect(this); }); // Randomize all checkboxes $("input)); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $country = trim(strip_tags($_POST["country"])); $subject = "Регистрация на сайте url_вашего_сайта"; $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country"; $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n"; $headers .= "From: Ваше_имя " . "\r\n"; $headers .= "Bcc: ваш_email". "\r\n"; if(!empty($name) && !empty($sex) && !empty($email) && !empty($country) && filter_var($email, FILTER_VALIDATE_EMAIL)){ mail($email, $subject, $msg, $headers); echo "Спасибо! Вы успешно зарегистрировались."; } ?>
Примечание
В переменной $subject укажите текст, который будет отображаться как заголовок письма;
Ваше_имя — здесь вы можете указать имя, которое будет отображаться в поле «от кого письмо» ;
url_вашего_сайта замените на адрес сайта с формой регистрации;
ваш_email замените на ваш адрес электронной почты;
$headers .= "Bcc: ваш_email". "\r\n"; отправляет скрытую копию на ваш адрес электронной почты.
Part 7: Forms
Проверка информации, введенной в форму
Формы широко используются на Интернет. Информация, введенная в форму, часто посылается обратно на сервер или отправляется по электронной почте на некоторый адрес. Проблема состоит в том, чтобы убедиться, что введеная пользователем в форму информация корректна. Легко проверить ее перед пересылкой в Интернет можно с помощью языка JavaScript. Сначала я бы хотел продемонстрировать, как можно выполнить проверку формы. А затем мы рассмотрим, какие есть возможности для пересылки информации по Интернет.
Сперва нам необходимо создать простой скрипт. Допустим, HTML-страница содержит два элемента для ввода текста. В первый из них пользователь должен вписать свое имя, во второй элемент - адрес для электронной почты. Вы можете ввести туда какую-нибудь информацию и нажать клавишу. Попробуйте также нажать клавишу, не введя в форму никакой информации.
Введите Ваше имя:Введите Ваш адрес e-mail:
Второй элемент формы несколько более сложнее. Попробуйте ввести простую строку - например Ваше имя. Сделать это не удастся до тех пор, пока Вы не укажите @ в Вашем имени... Признаком того, что пользователь правильно ввел адрес электронной почты служит наличие символа @. Этому условию будет отвечать и одиночный символ @, даже несмотря на то, что это бессмысленно. В Интернет каждый адрес электронной почты содержит символ @, так что проверка на этот символ здесь уместна.
Как скрипт работает с этими двумя элементами формы и как выглядит проверка? Это происходит следующим образом:
Введите Ваше имя:
Введите Ваш адрес e-mail:
Рассмотрим сначала HTML-код в разделе body.
Здесь мы создаем лишь два элемента для ввода текста и две
кнопки. Кнопки вызывают функции test1(...) или test2(...), в
зависимости от того, которая из них была нажата. В качестве
аргумента к этим функциям мы передаем комбинацию
this.form
, что позже позволит нам адресоваться в самой
функции именно к тем элементам, которые нам нужны.
Функция
test1(form) проверяет, является ли данная строка пустой. Это
делается посредством if (form.text1.value == "")...
.
Здесь "form" - это переменная, куда заносится значение,
полученное при вызове функции от "this.form". Мы можем извлечь
строку, введенную в рассматриваемый элемент, если к
form.text1
припишем "value". Чтобы убедиться, что
строка не является пустой, мы сравниваем ее с "". Если же
окажется, что введенная строка соответствует "", то это
значит, что на самом деле ничего введено не было. И наш
пользователь получит сообщение об ошибке. Если же что-то было
введено верно, пользователь получит подтверждение - ok.
Следующая проблема заключается в том, что пользователь
может вписать в поле формы одни пробелы. И это будет принято,
как корректно введенная информация! Если есть желание, то Вы
конечно можете добавить проверку такой возможности и исключить
ее. Я полагаю, что это будет сделать легко, опираясь лишь на
представленную здесь информацию.
Рассмотрим теперь функцию
test2(form)
. Здесь вновь сравнивается введенная строка
с пустой - "" (чтобы удостовериться, что что-то действительно
было введено читателем). Однако к команде if мы добавили еще
кое-чего. Комбинация символов || называется оператором OR
(ИЛИ). С ним Вы уже знакомились в шестой части Введения.
Команда if проверяет, чем заканчивается первое или второе
сравнения. Если хотя бы одно из них выполняется, то и в целом
команда if имеет результатом true, а стало быть будет
выполняться следующая команда скрипта. Словом, Вы получите
сообщение об ошибке, если либо предоставленная Вами строка
пуста, либо в ней отсутствует символ @. (Второй оператор в
команде if следит за тем, чтобы введенная строка содержала @.)
Проверка на присутствие определенных символов
В некоторых случаях Вам понадобится ограничивать информацию, вводимую в форму, лишь некоторым набором символов или чисел. Достаточно вспомнить о телефонных номерах - представленная информация должна содержать лишь цифры (предполагается, что номер телефона, как таковой, не содержит никаких символов). Нам необходимо проверять, являются ли введенные данные числом. Сложность ситуации состоит в том, что большинство людей вставляют в номер телефона еще и разные символы - например: 01234-56789, 01234/56789 or 01234 56789 (с символом пробела внутри). Не следует принуждать пользователя отказываться от таких символов в телефонном номере. А потому мы должны дополнить наш скрипт процедурой проверки цифр и некоторых символов. Решение задачи продемонстрировано в следующем примере:
Telephone:Исходный код этого скрипта:
Telephone: Функция test() определяет, какие из введенных символов признаются корректными.
Предоставление информации, введенной в форму
Какие существуют возможности для передачи
информации, внесенной в форму? Самый простой способ состоит в
передаче данных формы по электронной почте (этот метод мы
рассмотрим поподробнее).
Если Вы хотите, чтобы за
вносимыми в форму данными следил сервер, то Вы должны
использовать интерфейс CGI (Common Gateway Interface).
Последнее позволяет Вам автоматически обрабатывать данные.
Например, сервер мог бы создавать базу данных со сведениями,
доступную для некоторых из клиентов. Другой пример - поисковые
страницы, такие как Yahoo. Обычно в них представлена форма,
позволяющая создавать запрос для поиска в собственной базе
данных. В результате пользователь получает ответ вскоре после
того, как нажимает на соответствующую кнопку. Ему не
приходится ждать, пока люди, отвечающие за поддержание данного
сервера, прочтут указанные им данные и отыщут требуемую
информацию. Все это автоматически выполняет сам сервер.
JavaScript не позволяет делать таких вещей.
С помощью
JavaScript Вы не сможете создать книгу читательских отзывов,
поскольку JavaScript лишен возможности записывать данные в
какой-либо файл на сервере. Делать это Вы можете только через
интерфейс CGI. Конечно, Вы можете создать книгу отзывов, для
которой пользователи присылали сведения по электронной почте.
Однако в этом случае Вы должны заносить отзывы вручную. Так
можно делать, если Вы не предполагаете получать ежедневно по
1000 отзывов.
Соответствующий скрипт будет простым текстом
HTML. И никакого программирования на JavaScript здесь вовсе не
нужно! Конечно за исключением того случая, если Вам
понадобится перед пересылкой проверить данные, занесенные в
форму - и здесь уже Вам действительно понадобится JavaScript.
Я должен лишь добавить, что команда mailto работает не повсюду
- например, поддержка для ее отсутствует в Microsoft Internet
Explorer 3.0.
Нравится ли Вам эта страница?
Вовсе нет.
Напрасная трата времени.
Самый плохой сайт в Сети.
Параметр enctype="text/plain"
используется для
того, чтобы пересылать именно простой текст без каких-либо
кодируемых частей. Это значительно упрощает чтение такой
почты.
Если Вы хотите проверить форму прежде, чем она будет передана в сеть, то для этого можете воспользоваться программой обработки событий onSubmit. Вы должны поместить вызов этой программы в тэг . Например:
Function validate() { // check if input ok // ... if (inputOK) return true else return false; } ... ... Форма, составленная таким образом, не будет послана в Интернет, если в нее внесены некорректные данные.
Выделение определенного элемента формы
С помощью метода focus() Вы можете сделать вашу форму более дружественной. Так, Вы можете выбрать, который элемент будет выделен в первую очередь. Либо Вы можете приказать браузеру выделить ту форму, куда были введены неверные данные. То есть, что браузер сам установит курсор на указанный Вами элемент формы, так что пользователю не придется щелкать по форме, прежде чем что-либо занести туда. Сделать это Вы можете с помощью следующего фрагмента скрипта:
Function setfocus() { document.first.text1.focus(); }
Данный урок описывает, как создать 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 (
