Создание простой контактной формы с помощью Angularjs и php. Как заставить работать атрибут required для input в старых версиях IE? 6 войти с помощью имя required

П ривет, ребята надеются дела идут хорошо, сегодня мы будем объяснять очень полезный учебник вместе с вами. На сегодняшнем уроке мы создадим простую контактную форму, используя angularJS и php.

Контактная форма представляет собой стандартную веб-страницу, которая доступна на каждом сайте. Это позволяет посетителям сайта связаться с владельцами сайтов или поставщиками услуг, которые отвечают за поддержание этого веб-сайта. Так что мы думаем, почему бы не создать простую контактную форму с помощью Angularjs и php, чтобы получать сообщения от веб-сайтов, читателей и/или пользователей.

Мы используем Angularjs для переднего плана и php на стороне сервера. Мы будем писать код на php, который принимает данные из Angular формы и отправляет по электронной почте администратору сайта. Создайте папку с именем “contact-form” в вашем веб-каталоге приложений и создайте образец оформления страницы HTML – index.html. Теперь скопируйте и вставьте, код ниже в файл index.html.

Демо - Простая контактная форма с помощью Angularjs и php Контактная форма с помощью angularjs и PHP Ваше имя Почта Сообщение Отправить

Php код для отправки электронной почты

Создайте страницу contact.php и скопируйте вставить код, приведенный ниже. Ниже приведен php-код, который будет извлекать данные из angular формы и отправлять по электронной почте, по указанному адресу электронной почты.

< ?php $post_data = file_get_contents("php://input"); $data = json_decode($post_data); //Just to display the form values echo "Name: " . $data->name; echo "Email: " . $data->email; echo "Message: " . $data->message; // sned an email $to = $data->email; $subject = "Тестовое письмо сайт для тестирования angularjs контактной формы"; $message = $data->message; $headers = "From: " . $data->name .. "\r\n" .. "\r\n" . "X-Mailer: PHP/" . phpversion(); //функция PHP mail для отправки электронной почты на адрес электронной почты mail($to, $subject, $message, $headers); ?>

Почему мне установили эту форму

В настоящий момент на ваш сайт проводится Brute-force атака. Brute-force атака — это атака по подбору паролей. В данном случае происходит подбор пароля к административной панели вашего сайта.

Чтобы не допустить взлома вашего сайта и повысить его безопасность, нами была установлена дополнительная защита.

Как я теперь могу получить доступ к админ-панели сайта

Теперь при доступе к административной панели вашего сайта (на Joomla или WordPress) будет появляться дополнительное окно ввода логина и пароля с надписью «please use your control panel password». В качестве логина необходимо ввести логин вашей услуги хостинга, он имеет вид «u1234567» . В качестве пароля — текущий пароль к вашей услуге хостинга.

После прохождения базовой HTTP-аутентификации перед вами откроется стандартное поле для авторизация в админ-панели вашего сайта. Теперь уже вам нужно будет ввести логин и пароль администратора сайта.

Как работает базовая HTTP-аутентификация

При вводе логина-пароля в окно базовой аутентификации значение логина и хеша пароля будут сравниваться со значениями в специальном файле ~/etc/users , доступным в панели управления хостингом. Содержимое файла выглядит примерно так: «u1234567:dm48bspxIO3rg» . Где «u1234567» — логин, а «dm48bspxIO3rg» — хеш пароля (обратите внимание: только хеш, а не сам пароль!). Хеш пароля — это результат преобразование пароля по определенному алгоритму.

Таким образом, когда вы вводите логин и пароль в окно базовой аутентификации, от введённого пароля берётся хеш и сравнивается со значением хеша в файле ~/etc/users . Если значения совпадают, вы проходите аутентификацию.

У меня не получается пройти базовую аутентификацию

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

Если вы прошли базовую аутентификацию но не можете войти непосредственно в админ-панель сайта Joomla или WordPress, воспользуйтесь справкой:

Как повысить защиту сайта от Brute-force атак?

Для повышения защиты сайта:

измените логин суперпользователя на более уникальный. Не используйте короткие имена, лучше если вы будете использовать имя вместе с фамилией. В сети Интернет есть множество ресурсов где собраны наиболее популярные логины. Ознакомьтесь с ними и никогда не используйте их;
установите сложный пароль администратора сайта. Сложный пароль должен содержать буквы верхнего и нижнего регистра, цифры и дополнительные символы, такие как «* — _ # :» и т.д. Длина пароля — никак не меньше 6 символов. Желательно от 10 и выше.

Как убрать форму базовой HTTP-аутентификации?

Чтобы убрать форму базовой HTTP-аутентификации:

AuthType Basic AuthName "please use your control panel password" AuthUserFile .../users Require valid-user

Для комментирования строки поставьте символ решётки («#») в начало строки, вот так.

Posted October 23rd at 11:15pm.

Использование подтверждения имени пользователя для повышения уровня безопасности учетной записи

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

Вниманию игроков в FIFA: данная функция необходима для доступа к серверам FIFA Ultimate Team и партнерским приложениям.

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

Включение подтверждения имени пользователя

1. Зайдите на ea.com и выполните вход.

2. Нажмите на ваше имя пользователя, затем выберите пункт «Моя учетная запись».

3. Выберите вкладку «Безопасность», где вы сможете найти раздел «Подтверждение имени пользователя».

4. Нажмите «Включить» для активации функции подтверждения имени пользователя, введите ответ на контрольный вопрос и выберите один из вариантов: электронная почта, приложение для идентификации или SMS для получения кода подтверждения.

Если вы выберете опцию «Электронная почта», а не SMS, удостоверьтесь, что указанный для учетной записи адрес электронной почты - это действительный и работающий адрес, который вы регулярно проверяете на наличие новых сообщений.
Приложение для идентификации для планшета и мобильного телефона позволяет генерировать на этих устройствах коды подтверждения для входа в учетную запись.
Выберите тип устройства из выпадающего списка и загрузите Google Authenticator для устройств на базе Apple и Android или Authenticator для устройств, использующих операционную систему Windows.
Игрокам в FIFA 15 на PlayStation 3 и Xbox 360 не понадобится предпринимать дополнительные меры безопасности при подтверждении имени пользователя с приложением для идентификации.

5. Теперь вы будете получать код подтверждения при попытке входа с неизвестного устройства. Каждые 90 дней вы будете получать код подтверждения при входе в учетную запись с доверенных устройств. Таким образом, только вы с помощью уникального кода сможете получить доступ к вашей учетной записи EA.

При необходимости подтверждение имени пользователя можно отключить, для этого вернитесь на страницу управления учетной записью и выберите пункт «Отключить».*

Примечание

*Не отключайте подтверждение имени пользователя, если вы играете в FIFA Ultimate Team, иначе вам будет отказано в доступе.
Убедитесь, что вы также создали и подтвердили секретный вопрос и ответ на него для игры FIFA Ultimate Team.

Настройте приложение для идентификации

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

1. Откройте вкладку «Безопасность» на странице «Моя учетная запись» и найдите раздел «Подтверждение имени пользователя».

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

3. Выберите в выпадающем списке нужную вам операционную систему телефона и просканируйте QR-код с помощью приложения для чтения штрихкодов или найдите в магазине приложений для вашего телефона по запросу authenticator соответствующее приложение: Google Authenticator на Android и iOS или Authenticator на Windows Phone.

4. Откройте приложение для идентификации и выберите пункт добавить учетную запись вручную.

5. Просканируйте QR-код или введите секретный код, чтобы связать приложение для идентификации с учетной записью EA.

6. Закончите настройку приложения для идентификации, указав сгенерированный им для учетной записи Electronic Arts код и нажав «Включить подтверждение имени пользователя».

Когда вам понадобится подтвердить имя пользователя в будущем:

1. Откройте приложение для идентификации.

2. Введите шестизначный код для учетной записи Electronic Arts.

Сгенерированный код действителен в течение ограниченного времени. Если время действия текущего кода уже истекает, подождите, пока приложение сгенерирует новый код, чтобы у вас было достаточно времени на его ввод.

Что делать, если у меня нет возможности воспользоваться мобильным телефоном или электронной почтой, когда мне нужен код? Можно ли сгенерировать вспомогательные коды?

Если ваш телефон, идентификатор или электронный ящик не доступны для вас, единственный способ войти в учетную запись EA с неизвестного компьютера - использование вспомогательных кодов. Убедитесь, что храните их в надежном и доступном для вас месте. Вы можете просматривать и обновлять данные коды в учетной записи EA в разделе «Настройки конфиденциальности» клиента Origin или в режиме онлайн.

Нажмите на пункт «Безопасность», затем «Просмотр» и «Вспомогательные коды».*
Вы также можете воспользоваться функцией «Запрос нового кода после входа в FIFA Ultimate Team».

*Если у вас закончились вспомогательные коды, вы можете сгенерировать новые на странице «Управление учетной записью».

Подтвердите контактную информацию, чтобы убедиться в верности кода.

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

Если при активации подтверждения имени пользователя вы выбрали опцию отправки кода на почту, то можете проверить и обновить свой адрес электронной почты в разделе «Обо мне» на странице «Управления учетной записью» или через клиент Origin.
Если вы выбрали «Приложение для идентификации», вы можете воспользоваться штрихкодом или QR-кодом для сканирования и поиска кода между?secret= и &.
Если при активации подтверждения имени пользователя вы выбрали опцию отправки кода по SMS , то можете проверить и обновить свой номер телефона в разделе «Безопасность» на странице управления учетной записью или через клиент Origin.
Создать или подтвердить секретный вопрос и ответ.

Как только вы подтвердите контактные данные, у вас появится возможность включить подтверждение имени пользователя для получения нового кода.

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

Общее правило безопасности - не доверять никому, так что нельзя надеяться на то, что пользователи всегда будут вводить в формы правильные значения. Например, вместо ввода в поле правильного email-адреса, пользователь может ввести неверный адрес, или вообще какие-нибудь вредоносные данные.

Когда дело доходит до валидации пользовательских данных, ее можно проводить как на стороне клиента (в веб-браузере), так и на серверной стороне.

Ранее валидацию на стороне клиента можно было провести только с помощью JavaScript. Но все изменилось (или почти изменилось), так как с помощью HTML5 валидацию можно проводить средствами браузера, без необходимости писать сложные скрипты для валидации на JavaScript.

Валидация форм с помощью HTML5

HTML5 предоставляет довольно надежный механизм, основанный на следующих атрибутах тега : type , pattern и require . Благодаря этим новым атрибутам вы можете переложить некоторые функции проверки данных на плечи браузера.

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

Атрибут type

Этот атрибут говорит, какое поле ввода отобразить для обработки данных, например, уже знакомое поле типа

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

Попробуйте поиграться со значениями поля email в нижеприведенной демонстрации .

Также существуют другие стандартные типы полей, вроде , и для валидации чисел, URL’ов и телефонных номеров соотвествено.

Замечание: формат телефонного номера различается для разных стран из-за несоответствия количества цифр в телефонных номерах и разности форматов. Как результат, спецификация не определяет алгоритм проверки телефонных номеров, так что на время написания статьи данная возможность слабо поддерживается браузерами.

К счастью для нас, валидацию телефонных номеров можно провести с использованием атрибута pattern , который принимает как аргумент регулярное выражение, который мы рассмотрим далее.

Атрибут pattern

Атрибут pattern , скорее всего, заставит многих фронтенд-разработчиков прыгать от радости. Этот атрибут принимает регулярное выражение (аналогичное формату регулярных выражений JavaScript), по которому будет проверяться корректность введенных в поле данных.

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

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

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

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

Давайте посмотрим на пару примеров использования регулярных выражений для валидации значения полей ввода.

Телефонные номера

Как упоминалось ранее, тип поля tel не полностью поддерживается браузерами из-за несоответствия форматов номеров телефонов в разных странах.

Например, в некоторых странах формат телефонных номеров представляется в виде xxxx-xxx-xxxx , и сам телефонный номер будет что-то вроде этого: 0803-555-8205 .

Регулярное выражение, которому соответствует данный шаблон, такое: ^\d{4}-\d{3}-\d{4}$ . В коде это можно записатьтак :

Phone Number:

Буквенно-цифровые значения Атрибут required

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

Это избавляет нас от реализации проверки полей с помощью JavaScript, что может сохранить немного времени разработчикам.

Например: или (для совместимости с XHTML)

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

Заключение

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

Стоит отметить, что надеяться на валидацию только на стороне браузера опасно, так как эти проверки могут быть легко обойдены злоумышленниками или ботами.

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

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

Параметр required , который иногда используется для input, не работает в древних IE, что просто нельзя так оставить. Пользователи-пенсионеры, которые до сих пор пользуются IE6 должны одинаково легко работать с вашим сайтом, наряду с пользователями Google Chrome последней версии. Кто, кроме web-разработчиков, о них может позаботиться.

О наболевшем, о Internet Explorer

Для нормальных браузеров, к которым можно отнести Firefox, Opera и Google Chrome, эта задача относительно легка. Даже давние версии этих браузеров одинаково хорошо отображают html-код, если в нем конечно же не используются какие-то новые технологии. Но чтобы добиться подобного в браузерах семейства Internet Explorer, требуются просто титанические усилия.

Каждая версия браузера Internet Exlorer обладает своей, уникальной тупостью. Что работает в IE6, может как положено не работать в IE7 и наоборот. Этот зоопарк компании Microsoft не удалось побороть даже в самой последней версии своего браузера.

Понять почему разработчики браузеров не могут просто взять открыть и почитать стандарты W3C для сайтостроения, я не могу.

Поэтому мне, как web-разработчику, приходится выступать некоторой «прослойкой» между капризными браузерами и требующими знаний и зрелищ посетителями сайтов. И замечательно, что web-разработчикам пока это удается.

Дак, как же заставить работать required в старых версиях IE?

На помощь нам приходит JS. Раньше я терпеть его не мог, а теперь не вижу дальнейшего пути без него на просторе «правильного» WEB .

Решение приведенное ниже я выдумал не сам, а взял с буржуйского блога. Так как я жадный, а блог буржуйский, я не стану приводить на него ссылку.

За все у нас будет отвечать функция fnCheckFields() . Поместите на вашем сайте JS-код:

function fnCheckFields(form_obj){ var error_msg = "Пожалуйста, заполните все обязательные поля."; var is_error = false; for (var i = 0; form_obj_elem = form_obj.elements[i]; i++) if (form_obj_elem.type "input" || form_obj_elem.type "text") if (form_obj_elem.getAttribute("required") && !form_obj_elem.value) is_error = true; if (is_error) alert(error_msg); return !is_error; }

Обычно рекомендуют размещать его между html-тегами HEAD в начале страницы, но я бы рекомендовал все же размещать его в самом низу страницы до закрывающегося тега BODY . Таким образом JS меньше влияет на скорость загрузки страницы.

Окно ввода, где должен вводиться обязательный параметр, на html-языке должно выглядеть так:

Этот скрипт работает очень просто: после нажатия кнопки Отправить , скрипт проверяет все инпуты на наличие параметра required и если находит его, то соответственно смотрит на введенное значение этого поля. Если в такой инпут ничего не введено, то выводится предупреждающее окно о необходимости ввода. Данные соответственно никуда не отправляются.

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

Рассказать в соц. сетях