Проверка E-mail введенного в форму


Содержание

Проверяем e-mail на валидность на PHP/jQuery

Сегодня я хотел бы поговорить с вами немного о валидности. Что это такое? Это проверка введенной информации согласно какому-либо шаблону, маске. Все мы знаем, что мобильный телефон для России начинается с +7, а e-mail должен содержать в себе знак @.

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

Проверка валидности e-mail на PHP

Итак, мы полагаем, что в какую-то переменную нам поступает e-mail пользователя. Наша задача – проверить ее корректность, и если в адресе имеется ошибка – сообщить пользователю об этом.

Соответственно, если e-mail некорректен, вы можете вывести необходимое сообщение и остановить дальнейшее выполнение скрипта (в нашем случае – отправку) до тех пор, пока не будет указан правильный e-mail.

Проверка валидности e-mail на jQuery

Поскольку jQuery – клиентский скрипт (то есть выполняется на стороне пользователя), то здесь мы рассмотрим live-пример, где при введении e-mail в некоторое поле будет мобильно происходить проверка его на корректность.

У нас есть поле для ввода e-mail:

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

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

Проверка формы jQuery

Здравствуйте, уважаемые читатели блога LifeExample, в статье «Проверка формы jQuery«, хочу посветить немного времени на разработку одной очень нужной составляющей любого сайта. Говорить сегодня мы будем, о том, что такое проверка формы на заполнение, какими бывают проверки и как реализовать проверку формы на jQuery.

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

  • Поля ввода (text,textarea);
  • Чекбоксы (checkbox);
  • Радиокнопки (radiobutton);
  • Выпадающие списки (select).

Какими бывают формы

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

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

  • Форма регистрации;
  • Форма авторизации;
  • Форма обратной связи;

Согласитесь, что это очень распространённые элементы любого сайта, и сложно встретить тот ресурс, на котором бы не было данных форм.

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

  • Проверке формы на корректность введенного e-mail;
  • Проверке формы на совпадение паролей;
  • Проверке формы по типу введенных данных (числовое поле);

Целью данной статьи я хочу выделить: простую реализацию с помощью библиотеки jquery, проверку формы.

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

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

Ну, все хватит воды, давайте выделим основные задачи, и приступим к их выполнению.
Главная цель: Проверка формы jquery.

Задачи:

  1. Создать HTML форму;
  2. Форма должна содержать большое количество разных по назначению полей;
  3. Написать скрипт-валидатор с использованием jQuery библиотеки.

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

Создадим HTML форму (Шаг 1)

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

Внешне, наша стандартная форма регистрации будет выглядеть вот так:


Основным для нас в скачанном файле является блок edit_form выводящий таблицу полей, со следующей структурой элементов:

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

Также в предложенном файле имеется часть, определяющая CSS стили и собственно та часть, в которой будет расположен код проверки формы jQuery.

Пишем проверку заполнения формы на jQuery (Шаг 2)

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

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

var field = new Array ( «login» , «pass» , «confirmpass» , «e-mail» , «about» ) ; //поля обязательные

$ ( «form» ) . submit ( function ( ) < // обрабатываем отправку формы
var error = 0 ; // индекс ошибки
$ ( «form» ) . find ( «:input» ) . each ( function ( ) < // проверяем каждое поле в форме
for ( var i = 0 ; i field. length ; i ++ ) < // если поле присутствует в списке обязательных
if ( $ ( this ) . attr ( «name» ) == field [ i ] ) < //проверяем поле формы на пустоту

if ( ! $ ( this ) . val ( ) ) < // если в поле пустое
$ ( this ) . css ( ‘border’ , ‘red 1px solid’ ) ; // устанавливаем рамку красного цвета
error = 1 ; // определяем индекс ошибки

>
else <
$ ( this ) . css ( ‘border’ , ‘gray 1px solid’ ) ; // устанавливаем рамку обычного цвета
>

if ( error == 0 ) < // если ошибок нет то отправляем данные
return true ;
>
else <
if ( error == 1 ) var err_text = «Не все обязательные поля заполнены!» ;
$ ( «#messenger» ) . html ( err_text ) ;
$ ( «#messenger» ) . fadeIn ( «slow» ) ;
return false ; //если в форме встретились ошибки , не позволяем отослать данные на сервер.
>

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

Проверка корректности e-mail (Шаг 3)

Когда-то я уже писал как реализовать проверку е-mail на стороне сервера средствами языка PHP. Сегодня мы познакомимся с реализацией того же механизма с помощью клиентского языка JavaScript .

Для этого нужно немного представлять, что такое регулярные выражения, и для чего они нужны, о чем было рассказано в статье «Регулярные выражения в PHP».

Итоговый скрипт проверки корректности поля e-mail содержит в себе не много строк, и является достаточно простым для понимания.

Добавим в разрабатываемый скрипт проверки формы jquery, следующие строки кода:

Вставить данный кусок кода нужно сразу перед вот этой строкой:

А также необходимо прописать текст ошибки

Кроме всего этого нужно не забыть определить функцию, которая будет проверять корректность введенного e-mail:

Содержимое функции isValidEmailAddress() выглядит немного пугающе, но не стоит обращать внимание на сложное регулярное выражение. Ведь принцип её работы очень простой: если переданная строка соответствует правилам оформления e-mail адреса, то возвращается true, иначе false.

Сравнение паролей (Шаг 4)

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

Весь алгоритм сводится к получению значений двух полей с паролями, и проверки их на соответствие:

Также как и с проверкой поля e-mail, нужно дописать в блок определения текста ошибки обработчик для error=3.

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

jQuery: кроссбраузерная валидация email в input

Проверяю содержимое поля ввода на соответствие регулярному выражению:

В Хроме и Опере отлично работает. В IE и Firefox — нет. Как сделать кроссбраузерно?

2 ответа 2

Не используйте регулярные выражения для валидации адресов электронной почты

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

Проверять эмеил более сложной регуляркой — плохая идея. Адрес электронной почты может содержать не только [a-zA-Z0-9-_.] , но и невероятную тучу других символов. Есть регулярные выражения, составленные по спецификации, но из-за своей длины и сложности они неподдерживаемые. Более того, ваша регулярка поставит в тупик пользователей ящиков @i.ua , @test.longdomainname.ru и многих других вариаций, ибо домены могут быть как длиной в один символ, так и в 253 символа.

Используйте type=email даже если важна кроссбраузерность

Как вам указал пользователь @Visman, следует использовать type=email :

Илон Маск рекомендует:  StrToInt64 - Функция Delphi


Этот атрибут очень важен для мобильных устройств. При нажатии на это поле ввода у пользователя во многих мобильных браузерах изменится клавиатура, которая упростит им ввод адреса электронной почты. Вторая важная функция данного атрибута — какая-никакая проверка валидности эмеила. Событие submit не будет срабатывать, если браузер будет считать введенный эмеил невалидным. А неподдерживающие данное значение атрибута браузеры будут работать с полем как с type=text .

Результат

Конечный результат должен выглядеть примерно так:

QA evolution

Валидация имейлов

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

Перед тем как писать валидацию, надо знать из чего состоит email адрес. Думаю известно всем что это «username@hostname».

Имя пользователя может в себе содержать:

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

Имя хоста состоит из нескольких компонентов, разделённых точкой и не превышающих 63 символа, и суффиксов (домены первого уровня). Компоненты, в свою очередь, состоят из латинских букв, цифр и дефисов, причём дефисы не могут быть в начале или в конце компонента. Суффиксы это ограниченный список доменов первого уровня.

Чит-лист для проверки поля email

1) Пустое поле email -> Сообщение о незаполненном поле email

2) Email в нижнем регистре -> Операция проводится успешно

3) Email в верхнем регистре -> Операция проводится успешно

4) Email с цифрами в имени аккаунта -> Операция проводится успешно

5) Email с цифрами в доменной части -> Операция проводится успешно

6) Email с дефисом в имени аккаунта -> Операция проводится успешно

7) Email с дефисом в доменной части -> Операция проводится успешно

8) Email со знаком подчеркивания в имени аккаунта -> Операция проводится успешно

9) Email со знаком подчеркивания в доменной части -> Операция проводится успешно

10) Email с точками в имени аккаунта -> Операция проводится успешно

11) Email с несколькими точками в доменной части -> Операция проводится успешно

12) Email без точек в доменной части -> Должно появится сообщение о неправильном или некорректном e-mail введеном в поле

13) Превышение длины email (>320 символов) -> Должно появится сообщение о неправильном или некорректном e-mail введеном в поле

14) Отсутствие @ в email -> Должно появится сообщение о неправильном или некорректном e-mail введеном в поле

15) Email с пробелами в имени аккаунта -> Должно появится сообщение о неправильном или некорректном e-mail введеном в поле

16) Email с пробелами в доменной части -> Должно появится сообщение о неправильном или некорректном e-mail введеном в поле

17) Email без имени аккаунта -> Должно появится сообщение о неправильном или некорректном e-mail введеном в поле

18) Email без доменной части -> Должно появится сообщение о неправильном или некорректном e-mail введеном в поле


19) Некорректный домен первого уровня (допустимо 2-63 букв после точки: .ru или например .americanexpress) ->Должно появится сообщение о неправильном или некорректном e-mail введеном в поле

Вообще по доменным именам нужна отдельная статья, но оставим здесь интересую информацию.

  1. zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz.ru — САмый последний домен в зоне ру.
  2. llanfairpwllgwyngyllgogerychwyrndrobwyll-llantysiliogogogoch.info — название деревни Лланвайр-Пуллгвингилл в Уэльсе на острове Англси, означающее «Церковь Святой Марии в ложбине, заросшей белым орешником, около быстрого водоворота, неподалёку от церкви Святого Тисилио и красной пещеры».

Базовые валидационные проверки Login/Password

  • Заполнить поле корректный login и корректный pass. Expected: успешно залогинен. Разлогиниться. Почистить кэш и куки (открыть/закрыть браузер?).
  • Оставить оба поля пустыми. Попытка входа. Expected: Сообщение об ошибке.
  • Оставить пустое поле login. Попытка входа. Expected: Сообщение об ошибке.
  • Оставить пустое поле password. Попытка входа. Expected: Сообщение об ошибке.
  • Ввeсти корректный login и некорректный pass. Expected: Сообщение об ошибке.
  • Ввeсти некорректный login, но корректный pass. Expected: Сообщение об ошибке.
  • Ввeсти некорректный login и некорректный pass. Expected: Сообщение об ошибке.
  • Заполнить поле login ввeсти корректный pass, а в поле пароля ввести корректный login. Expected: Сообщение об ошибке.
  • Ввeсти login и корректный pass. Expected: Сообщение об ошибке.
  • Заполнить поле login SQL запрос (‘ or ‘a’ = ‘a’; DROP TABLE user; SELECT * FROM blog WHERE code LIKE ‘a%’;) — структура запроса зависит от DB.
  • Заполнить поле login скрипт ()
  • Заполнить поле login html-теги ()
  • Заполнить поле login сложную последовательность символов вроде “ ♣ ♂ ” , “”‘

!@#$%^&*()?>,./\

  • Заполнить поле login текст состоящий из одних пробелов;
  • Заполнить поле login правильный login, начинающийся с нескольких пробелов, и правильный pass. Expected: Сообщение об ошибке или автоматическое обрезание пробелов .
  • Заполнить полеlogin правильный login, после которого следуют нескольких пробелов, и правильный pass. Expected: Сообщение об ошибке или автоматическое обрезание пробелов .
  • Ввeсти корректный login и корректный pass. Нажать на кнопку “Назад” в браузере. Expected: или The page should be expired, или увидеть те же поля. Если второе – ввести в поля снова login и pass. Перейти. Залогинен?
  • Ввeсти корректный login. Указать pass с использованием букв РАЗНОГО регистра.
  • Ввeсти login с использованием букв РАЗНОГО регистра. Указать корректный pass.
  • Проверить ограничение на длину login и пароля при регистрации? Ввести qqweqweqweqweqweqweqweqweqweqweqweqweqweqwe / qqweqweqweqweqweqweqweqweqweqweqweqweqweqwe
  • Заполнить поле login/pass Aa!@#$%^&*()-_+=`

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

  • Открыть браузер. Ввести в поля валидные данные. Нажать на кнопку Login. Отключить интернет. Получить “страница недоступна”. Подключить интернет обратно. Зайти на сайт. Expected: не залогинен.
  • Блокируется ли акаунт/IP того, кто введет n-количество раз не правильный pass?
  • Установить фокус на поле login. Ввести текст. Нажать кнопку Tab на клавиатуре. Expected: фокус перемещается на поле пароля. Ввести текст. Нажать кнопку Tab на клавиатуре. Expected: фокус перемещается на галочку “remember me”. Нажать кнопку Space на клавиатуре. Expected: появилась галочка. Нажать кнопку Tab на клавиатуре. Expected: фокус перемещается на кнопку Login. Нажать кнопку Enter на клавиатуре. Expected: процесс пошёл.
  • Проверка на ‘Remember me on this computer’. Заполнить поля валидными данными. Чекнуть галочку Remember me. Залогиниться. Закрыть браузер. Открыть бразуер. Открыть страницу сайта. Expected: login для входа не требуется.
  • Ввeсти корректный login и корректный pass. Скопировать полученный url и вставить его в другой браузер. Expected: It should not display the user’s welcome page.

  • 4 мысли о “Валидация имейлов”

    Привет, вы говорите что домены топ уровня могут содержать только 2-6 символов. (пункт 19)
    А как насчет брендовых доменов типа «.americanexpress» ?
    Получается, ошибочка.

    Как проверять email адрес на валидность правильно

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

    Как же выглядит e-mail адрес? Интуитивно можно предположить, что так:

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

    Конечно, и тут можно обойтись с помощью регулярного выражения:

    Но с этим есть несколько проблем:

    • Как вы будете проверять правильность этого монстра? Такие регулярные выражения переходят «из уст в уста» на форумах, и каждый добавляет в них функциональность до тех пор, пока работа с выражением становится невозможной. И это именно тот случай.
    • Я бы не сказал, что регулярные выражения такой длины эффективнее, чем другие методы. Чем длиннее выражение, тем дольше оно будет компилироваться (сравнение всегда происходит за O(n)).
    • С помощью регулярного выражения можно сделать только проверку на соответствие. Выполнить проверку на то, находится ли домен в чёрном списке, у вас уже, увы, не получится.

    Давайте пойдём другим путём

    Вот основа нашей проверки:

    А вот диаграмма, описывающая алгоритм, по которому наша программа будет работать:

    Если вы заметили, что тут не все правила соблюдаются — не волнуйтесь, мы вернёмся к этому позже. Если вы не заметили, и вообще не понимаете, что тут происходит, то сейчас объясню.

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

    Теперь о проверках, которые мы сделаем, после того, как код пройдёт по этой диаграмме:

    Валидация e-mail на лету с использованием jQuery

    Дата публикации: 2011-07-26

    От автора: в этом уроке мы вновь коснемся такой темы, как юзабилити, которую мы уже затрагивали в ряде предыдущих уроков. Сейчас мы реализуем такую вещь, как проверка электронного адреса, который ввел пользователь (email), «на лету», т.е. без отправки данных на сервер, а непосредственно на стороне клиента. Это будет не только удобно, но еще и придаст странице большей эффектности. Кроме того, таким образом, снимается лишняя нагрузка на сайт — ведь не посылаются лишние запросы на сервер.

    Реализовывать поставленную задачу мы будем при помощи 2-х средств:

    Языка регулярных выражений, при помощи которого мы как раз и будем проверять то, что вводит пользователь на соответствие шаблону e-mail;

    Фреймворка jQuery, который и будет показывать «на лету» результат проверки (валидации) электронного адреса.

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Шаг 1. Формирование задач.

    Собственно, такую штуку, я думаю, Вы уже не раз видели на всевозможных сайтах. Есть поле для ввода e-mail, когда Вы вводите адрес почты в это поле и затем переходите к другому полю, рядом с полем e-mail выводится сообщение в каком-либо виде о том, что такой e-mail подходит или не подходит. Иногда такое сообщение появляется совсем уж «на лету», т.е, как только Вы начинаете вводить символы с клавиатуры — эти символы сразу же начинают проверяться на соответствие шаблону. Я покажу, как реализовывается оба варианта, а какой выбрать — решать уж Вам. Итак, приступим.

    Илон Маск рекомендует:  Currency - Тип Delphi

    Прежде всего, создадим обычную страницу HTML с несколькими правилами стилей и небольшой формой:

    Как на PHP правильно сделать валидацию поля email в форме?

    Всем здравствуйте!
    Помогите, пожалуйста, разобраться с корректной валидацией email.
    Есть HTML форма (в примере представлена часть формы для email) :

    Понимаю, что надо использовать FILTER_VALIDATE_EMAIL , но куда именно нужно вписать «образец», по которому будет происходить дальнейшее сравнение внесенных в форму данных?
    Есть мысль оформить общий подход к валидации email так:
    1 вариант:
    Если в данное поле формы было что-то введено if(isset($_POST[«email»])), то начинаем осуществлять проверку на корректность вносимых данных, а именно:
    использовать if(!filter_var($_POST[’email’], FILTER_VALIDATE_EMAIL)).
    Если введенные данные корректны (то есть соответствуют изначально заданному шаблону, например $var = «anyword@domain.ru»;), то продолжаем работу по другим полям формы.
    А Если введенные данные некорректны, то отправляем значение в массив ошибок ($errors) и выводим предупреждение об этом ( $errors[’email’] = «Не валидный email»;). А если никакие данные не были введены, то «пустое» значение тоже отправляется в этот же массив ошибок ($errors) , для него установлено уже свое сообщение ($errors[’email’] = «Не заполнено обязательное поле»;).

    2 вариант:
    Если было отправлено пустое поле email, то присваеваем полученное значение в массив ошибок и выдаем сообщение «Не заполнено обязательное поле» (как это есть в части представленного кода), иначе если поле email было не пустым (какие-то данные все же были введены), то начинаем проверку: Если внесенные данные некорректны (то есть соответствуют изначально заданному шаблону, например $var = «anyword@domain.ru»;), значит полученный результат отправлять в массив ошибок с выдачей сообщения «Не валидный email». Иначе (если полученный результат корректен), то продолжаем двигаться по проверке других форм.

    Самый главный вопрос:
    в каком месте кода необходимо задать этот шаблон/образец ($var = «anyword@domain.ru),по которому будет происходить сравнение введенной почты на ее корректность; чтобы все работало так как нужно, и чтоб этот образец нигде в браузере не всплывал ?

    Заранее благодарю за помощь!


    • Вопрос задан более двух лет назад
    • 3886 просмотров

    Кому интересно — вот решение:

    Надо было убрать отрицание перед filter_var($_POST[«email»]. и т.д.
    И задавать шаблон/ образец, как было в примере w3school, не надо.
    Все работает так, как нужно.

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

    В идеале нужно сабмитить форму на аяксе и выводить сообщение о неверном введеном адресе прямо под полем ввода красиво оформленным без перезагрузки страницы. Но это Вам навыки уже другие нужно иметь.

    Валидация форм

    Поля в форме предназначены для сбора информации от посетителей страницы. Но несмотря на все усилия и объяснения, получение правильной информации может оказаться трудным делом. Нетерпеливые или невнимательные посетители могут пропускать важные поля, заполнять поле или несколько полей не полностью, да и попросту нажимать неправильные клавиши. Заполнив таким образом форму, они нажимают кнопку «Отправить», и серверная программа получает набор данных, с которыми она не знает что делать (если не реализована валидация данных на серверной стороне).

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

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

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

    Как работает проверка HTML5?

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

    Например, допустим, что определенное поле нельзя оставлять пустым, и посетитель должен ввести в него хоть что-то. В HTML5 это осуществляется с помощью атрибута required в соответствующем поле (далее дорабатываем пример из предыдущей статьи):

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

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

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

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

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

    Отключение проверки

    В некоторых случаях может потребоваться отключить проверку. Например, вы хотите протестировать свой серверный код на правильность обработки поступивших некорректных данных. Чтобы отключить проверку для всей формы, в элемент добавляется атрибут novalidate:

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

    Обнаружение незаполненных полей — это только один из нескольких типов проверки. Позже мы рассмотрим обнаружение ошибок в данных разных типов.

    Оформление результатов проверки

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

    Все, что для этого требуется — это добавить несколько простых CSS3-псевдоклассов. Доступны следующие опции:

    required и optional

    Применяют форматирование к полю в зависимости от того, использует ли это поле атрибут required или нет;

    valid и invalid

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

    in-range и out-of-range

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

    Проверка с помощью регулярных выражений

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


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

    Квадратные скобки в начале строки определяют диапазон допустимых символов. Иными словами, группа [A-Z] разрешает любые прописные буквы от А до Z. Следующая за ней часть в фигурных скобках указывает множитель, т.е. <3>означает, что нужны три прописные буквы. Следующее тире не имеет никакого специального значения и означает самое себя, т.е. указывает, что после трех прописных букв должно быть тире. Наконец, [0-9] обозначает цифры в диапазоне от 0 до 9, а <3>требует три таких цифры.

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

    Для обозначения начала и конца значения в поле символы ^ и $, соответственно, не требуются. HTML5 автоматически предполагает наличие этих двух символов. Это означает, что значение в поле должно полностью совпасть с регулярным выражением, чтобы его можно было считать корректным.

    Таким образом следующие значения будут допустимыми для этого регулярного выражения:

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

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

    В данном примере событие oninput активизирует функцию validateComments(). Ответственность за написание этой функции, проверку текущего значения поля и вызова метода setCustomValidity() лежит на разработчике.

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

    Илон Маск рекомендует:  TFormatSettings - Тип Delphi

    Далее приводится пример использования этого метода для проверки требования, чтобы значение в поле содержало не менее 20 символов:

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

    Поддержка проверки браузерами

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

    Поддержка проверки браузерами

    Браузер IE Firefox Chrome Safari Opera Safari iOS Android
    Минимальная версия 10 4 10 5 10

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

    С другой стороны, ваш веб-сайт может содержать сложные формы, в которых можно сделать массу ошибок при вводе данных, и вы не хотите потерять тех IE-пользователей, которые после первой неудачной попытки заполнить вашу форму не предпримут другую. В таком случае у вас есть два пути: разработать и использовать свою систему проверки или же использовать библиотеку JavaScript, чтобы компенсировать умственную отсталость IE. Какой из этих двух подходов выбрать, зависит от объема и сложности проверки.

    На странице HTML5 Cross Browser Polyfills можно найти длинный список библиотек JavaScript, которые все, по большому счету, делают то же самое. Одна из лучших среди этих библиотек — это webforms2.

    Библиотека webforms2 реализует все рассмотренные на данный момент атрибуты. Для использования библиотеки загрузите все ее файлы в папку своего веб-сайта (а лучше в подкаталог папки веб-сайта) и добавьте в веб-странице ссылку на эту библиотеку.

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

    Проверка правильности ввода email на jQuery

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

    Рассмотрим несколько способов на html5 и jQuery, чтобы избежать данной проблемы. Начнем с html5. В нем уже давно появился специальный тип поля type=»email» , который проверяется самим браузером на корректность ввода. Пример:

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

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

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

    Многих интересует вопрос, как с этим скриптом блокировать отправку формы, если email набран не верно. Привожу рабочий пример:

    В этом примере используется глобальная переменная otpravka , которая меняется на true если email введен правильно. Следовательно, при отправке формы с классом fomato — проверяется это условие. Если оно выполнится форма отправится успешно.

    Валидация или проверка полей формы на ошибки и заполнение

    Доброго времени суток. ��

    В этой статье хочу рассказать вам о том, как сделать проверку полей формы на заполнение. В итоге у нас получится валидация формы с помощью jQuery. Многие делают на чистом PHP в самом обработчике, но иногда такой метод не подходит. Например, в случаи, когда вы захотите проверять форму до перезагрузки страницы. Вдруг вам не нужно обновления страницы и вы хотите вывести сообщение об ошибке, чтобы человек исправил, а уже потом произошла отправка и обновление страницы. Конечно можно еще использовать метод с AJAX, но это уже совсем другая история ��

    Пример того что у нас получится можно посмотреть в примере ниже. В примере задействована и валидация на правильный ввод почты — e-mail. Ниже я покажу два варианта скриптов с проверкой правильности почты и без нее.

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

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

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

    Теперь, чтобы придать нормальный внешний вид нашей форме, добавим немного CSS стилей.Если вы будете использовать их на своем сайте, то добавьте их в свой файл стилей.

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

    • #messenger — это стили для того самого блока с выводом сообщений. Главный параметр для этого класса — это display:none. Тоесть мы изначально скрываем блок.
    • .notvalid — это стили для класса, который будет присваиваться нашим скриптом к тому полю, что не заполнено или заполнено не корректно. Об этом классе я еще раз упомяну ниже.

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

    Так как наш скрипт работает с помощью jQuery, нужно чтобы была подключена библиотека jQuery. Если она не подключена ранее, сделайте это, добавив вот такую строку:

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

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

    Давайте рассмотрим основные элементы нашей функции из скрипта.

    • frmotpr() — вторая строка, название функции. Это название должно совпадать с называнием внутри нашего события onclick, что мы добавили кнопке ОТПРАВИТЬ.
    • («name_f», «contact_f», «mssg_f») — в третей строке в кавычках, через запятую мы указываем ); — далее показываем с легкой анимацией наш блок, который мы стилями выше скрыли. Если было пустое поле вы увидите после нажатия на кнопку сообщение об ошибке.
    • return false; — запрещаем отправку формы и возвращаемся к началу. перед этой строкой можете тоже добавить какие-то задачи или функции, которые хотите.

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

    Теперь давайте рассмотрим версию скрипта, которая помимо проверки на заполнение, будет еще и проверять корректно ли введен e-mail.

    Сам скрипт очень похож, добавлена просто еще функция и пару новых строк:

    Собственно, рассмотрим новые строки

    • function isVal ; — эта строка добавилась в то место, где мы присваиваем переменной err_text — текст. Данная строка указывает, что если код ошибки 2, то есть некорректный e-mail, выведется текст — Введен не корректный e-mail!

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

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

    На этом все, спасибо за внимание. ��

    Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL