Сайт о телевидении

Сайт о телевидении

» » Простая валидация формы без JS. Развитие валидации форм

Простая валидация формы без JS. Развитие валидации форм

Laravel поставляется с простой, удобной системой валидации (проверки входных данных на соответствие правилам) и получения сообщений об ошибках - классом Validation .

Простейший пример валидации

$validator = Validator::make(array("name" => "Дейл"), array("name" => "required|min:5"));

Первый параметр, передаваемый методу make - данные для проверки. Второй параметр - правила, которые к ним должны быть применены.

Использование массивов для указания правил

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

$validator = Validator::make(array("name" => "Дейл"), array("name" => array("required", "min:5")));

Проверка нескольких полей

$validator = Validator::make(array("name" => "Дейл", "password" => "плохойпароль", "email" => "[email protected]"), array("name" => "required", "password" => "required|min:8", "email" => "required|email|unique"));

Как только был создан экземпляр Validator , метод fails (или passes) может быть использован для проведения проверки.

If ($validator->fails()) { // Переданные данные не прошли проверку }

Если Validator нашёл ошибки, вы можете получить его сообщения таким образом:

$messages = $validator->messages();

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

$failed = $validator->failed();

Проверка файлов

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

Хук после валидации

Laravel после завершения валидации может запустить вашу функцию-замыкание, в которой вы можете, например, проверить что-то особенное или добавить какое-то своё сообщение об ошибке. Для этого служит метод after() :

$validator = Validator::make(...); $validator->after(function($validator) { if ($this->somethingElseIsInvalid()) { $validator->errors()->add("field", "Something is wrong with this field!"); } }); if ($validator->fails()) { // }

Вы можете добавить несколько after , если это нужно.

Валидация в контроллерах

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

Базовый контроллер App\Http\Controllers\Controller включает в себя трейт ValidatesRequests , который уже содержит методы для валидации:

/** * Сохранить пост в блоге. * * @param Request $request * @return Response */ public function store(Request $request) { $this->validate($request, [ "title" => "required|unique|max:255", "body" => "required", ]); // }

Если валидация проходит, код продолжает выполняться. Если нет - бросается исключение Illuminate\Contracts\Validation\ValidationException . Если вы не поймаете это исключение, его поймает фреймворк, заполнит flash-переменные сообщениями об ошибках валидации и средиректит пользователя на предыдущую страницу с формой - сам!

В случае AJAX-запроса редиректа не происходит, фреймворк отдает ответ с HTTP-кодом 422 и JSON с ошибками валидации.

Код, приведенный выше, аналогичен вот этому::

/** * Сохранить пост в блоге. * * @param Request $request * @return Response */ public function store(Request $request) { $v = Validator::make($request->all(), [ "title" => "required|unique|max:255", "body" => "required", ]); if ($v->fails()) { return redirect()->back()->withErrors($v->errors()); } // }

Изменения формата ошибок

Если вы хотите кастомизировать сообщения об ошибках валидации, которые сохраняются во флэш-переменных сессии при редиректе, перекройте метод formatValidationErrors в вашем контроллере:

/** * {@inheritdoc} */ protected function formatValidationErrors(\Illuminate\Validation\Validator $validator) { return $validator->errors()->all(); }

Валидация запросов

Для реализации более сложных сценариев валидации вам могут быть удобны так называемые Form Requests. Это специальные классы HTTP-запроса, содержащие в себе логику валидации. Они обрабатывают запрос до того, как он поступит в контроллер.

Чтобы создать класс запроса, используйте artisan-команду make:request:

Php artisan make:request StoreBlogPostRequest

Класс будет создан в папке app/Http/Requests . Добавьте необходимые правила валидации в его метод rules:

/** * Get the validation rules that apply to the request. * * @return array */ public function rules() { return [ "title" => "required|unique|max:255", "body" => "required", ]; }

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

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

В случае неудачной валидации фреймворк заполняет флэш-переменные ошибками валидации и возврашает редирект на предыдущую страницу. В случае AJAX-запроса отдается ответ с кодом 422 и JSON с ошибками валидации.

Контроль доступа

Классы Form Request также содержат метод authorize . В этом методе вы можете проверять, разрешено ли пользователю совершать это действие, обновлять данный ресурс. Например, если пользователь пытается отредактировать комментарий к посту, является ли он его автором?

/** * Determine if the user is authorized to make this request. * * @return bool */ public function authorize() { $commentId = $this->route("comment"); return Comment::where("id", $commentId) ->where("user_id", Auth::id())->exists(); }

Обратите внимание на вызов метода route() выше. Этод метод дает вам доступ к параметрам в урле (в данном случае это {comment}), определенным в роуте:

Route::post("comment/{comment}");

Если метод authorize возвращает false, фреймворк формирует ответ с HTTP-кодом 403 и сразу же отсылает его. Метод контроллера не выполняется.

/** * Determine if the user is authorized to make this request. * * @return bool */ public function authorize() { return true; }

Изменения формата ошибок во флэш-переменных

Если вы хотите кастомизировать сообщения об ошибках валидации, которые сохраняются во флэш-переменных сессии при редиректе, переопределите метод formatValidationErrors в базовом классе запросов (App\Http\Requests\Request):

/** * {@inheritdoc} */ protected function formatValidationErrors(\Illuminate\Validation\Validator $validator) { return $validator->errors()->all(); }

Работа с сообщениями об ошибках

После вызова метода messages объекта Validator вы получите объект MessageBag , который имеет набор полезных методов для доступа к сообщениям об ошибках.

Получение первого сообщения для поля

echo $messages->first("email");

Получение всех сообщений для одного поля

foreach ($messages->get("email") as $message) { // }

Получение всех сообщений для всех полей

foreach ($messages->all() as $message) { // }

Проверка на наличие сообщения для поля

if ($messages->has("email")) { // }

Получение ошибки в заданном формате

echo $messages->first("email", "");

Примечание: по умолчанию сообщения форматируются в вид, который подходит для Twitter Bootstrap.

Получение всех сообщений в заданном формате

foreach ($messages->all("
  • :message
  • ") as $message) { // }

    Ошибки и шаблоны

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

    Route::get("register", function() { return View::make("user.register"); }); Route::post("register", function() { $rules = array(...); $validator = Validator::make(Input::all(), $rules); if ($validator->fails()) { return redirect("register")->withErrors($validator); } });

    Заметьте, что когда проверки не пройдены, мы передаём объект Validator объекту переадресации Redirect с помощью метода withErrors . Этот метод сохранит сообщения об ошибках в одноразовых flash-переменных сессии, таким образом делая их доступными для следующего запроса.

    Однако, заметьте, мы не передаем в View::make("user.register"); переменные $errors в шаблон. Laravel сам проверяет данные сессии на наличие переменных и автоматически передает их шаблону, если они доступны. Таким образом, важно помнить, что переменная $errors будет доступна для всех ваших шаблонов всегда, при любом запросе. . Это позволяет вам считать, что переменная $errors всегда определена и может безопасно использоваться. Переменная $errors - экземпляр класса MessageBag .

    Таким образом, после переадресации вы можете прибегнуть к автоматически установленной в шаблоне переменной $errors:

    first("email"); ?>

    Именованные MessageBag

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

    Return redirect("register")->withErrors($validator, "login");

    Получить текст ошибки из MessageBag с именем login:

    login->first("email"); ?>

    Правила проверки

    Ниже список всех доступных правил и их функции:

    accepted

    Поле должно быть в значении yes , on или 1 . Это полезно для проверки принятия правил и лицензий.

    active_url

    Поле должно быть корректным URL, доступным через функцию checkdnsrr .

    after:date

    Поле должно быть датой, более поздней, чем date

    alpha

    Поле должно содержать только алфавитные символы.

    alpha_dash

    Поле должно содержать только алфавитные символы, цифры, знаки подчёркивания (_) и дефисы (-).

    alpha_num

    Поле должно содержать только алфавитные символы и цифры.

    array

    Поле должно быть массивом.

    before:date

    Поле должно быть датой, более ранней, чем date . Строки приводятся к датам функцией strtotime .

    between:min ,max

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

    boolean

    Поле должно быть логическим (булевым). Разрешенные значения: true , false , 1 , 0 , "1" и "0" .

    confirmed

    Значение поля должно соответствовать значению поля с этим именем, плюс foo_confirmation . Например, если проверяется поле password , то на вход должно быть передано совпадающее по значению поле password_confirmation .

    date

    Поле должно быть правильной датой в соответствии с функцией strtotime .

    date_format:format

    Поле должно подходить под формат даты format в соответствии с функцией date_parse_from_format .

    different:field

    Значение проверяемого поля должно отличаться от значения поля field .

    email

    Поле должно быть корректным адресом e-mail.

    exists:table ,column

    Поле должно существовать в заданной таблице базе данных.

    Простое использование:

    "state" => "exists:states"

    Указание имени поля в таблице:

    "state" => "exists:states,abbreviation"

    Вы также можете указать больше условий, которые будут добавлены к запросу "WHERE":

    "email" => "exists:staff,email,account_id,1"

    image

    Загруженный файл должен быть изображением в формате jpeg, png, bmp, gif или svg.

    in:foo ,bar ,...

    Значение поля должно быть одним из перечисленных (foo , bar и т.д.).

    integer

    Поле должно иметь корректное целочисленное значение.

    ip

    Поле должно быть корректным IP-адресом.

    max:value

    Значение поля должно быть меньше или равно value

    mimes:foo ,bar ,...

    MIME-тип загруженного файла должен быть одним из перечисленных.

    Простое использование:

    "photo" => "mimes:jpeg,bmp,png"

    min:value

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

    not_in:foo ,bar ,...

    Значение поля не должно быть одним из перечисленных (foo , bar и т.д.).

    numeric

    Поле должно иметь корректное числовое или дробное значение.

    regex:pattern

    Поле должно соответствовать заданному регулярному выражению.

    Внимание: при использовании этого правила может быть нужно перечислять другие правила в виде элементов массива, особенно если выражение содержит символ вертикальной черты (|).

    required

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

    required_if:field ,value ,...

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

    required_with:foo ,bar ,...

    Присутствует и имеет непустое значение хотя бы одно из перечисленных полей (foo , bar и т.д.).

    required_with_all:foo ,bar ,...

    Проверяемое поле должно присутствовать и иметь непустое значение, но только если присутствуют и имеют непустое значение все перечисленные поля (foo , bar и т.д.).

    required_without:foo ,bar ,...

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

    required_without_all:foo ,bar ,...

    Проверяемое поле должно присутствовать и иметь непустое значение, но только если не присутствуют или имеют пустые значения все перечисленные поля (foo , bar и т.д.).

    same:field

    Поле должно иметь то же значение, что и поле field .

    size:value

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

    timezone

    Поле должно содержать идентификатор часового пояса (таймзоны), один из перечисленных в php-функции timezone_identifiers_list

    unique:table ,column ,except ,idColumn

    Значение поля должно быть уникальным в заданной таблице базы данных. Если column не указано, то будет использовано имя поля.

    Простое использование

    "email" => "unique:users"

    Указание имени поля в таблице

    "email" => "unique:users,email_address"

    Игнорирование определённого ID

    "email" => "unique:users,email_address,10"

    Добавление дополнительных условий

    Вы также можете указать больше условий, которые будут добавлены к запросу "WHERE"":

    "email" => "unique:users,email_address,NULL,id,account_id,1"

    В правиле выше только строки с account_id равном 1 будут включены в проверку.

    url

    Поле должно быть корректным URL.

    Примечание: используется PHP-функция filter_var

    Условные правила

    Иногда вам нужно валидировать некое поле только тогда, когда оно присутствует во входных данных. Для этого добавьте правило sometimes:

    $v = Validator::make($data, array("email" => "sometimes|required|email",));

    В примере выше для поля email будет запущена валидация только когда $data["email"] существует.

    Сложные условные правила

    Иногда вам нужно, чтобы поле имело какое-либо значение только если другое поле имеет значеие, скажем, больше 100. Или вы можете требовать наличия двух полей, только когда также указано третье. Это легко достигается условными правилами. Сперва создайте объект Validator с набором статичных правил, которые никогда не изменяются:

    $v = Validator::make($data, array("email" => "required|email", "games" => "required|numeric",));

    Теперь предположим, что ваше приложение написано для коллекционеров игр. Если регистрируется коллекционер с более, чем 100 играми, то мы хотим их спросить, зачем им такое количество. Например, у них может быть магазин или может им просто нравится их собирать. Итак, для добавления такого условного правила мы используем метод Validator .

    $v->sometimes("reason", "required|max:500", function($input) { return $input->games >= 100; });

    Первый параметр этого метода - имя поля, которое мы проверяем. Второй параметр - правило, которое мы хотим добавить, если переданная функция-замыкание (третий параметр) вернёт true . Этот метод позволяет легко создавать сложные правила проверки ввода. Вы можете даже добавлять одни и те же условные правила для нескольких полей одновременно:

    $v->sometimes(array("reason", "cost"), "required", function($input) { return $input->games >= 100; });

    Примечание: Параметр $input , передаваемый замыканию - объект Illuminate\Support\Fluent и может использоваться для чтения проверяемого ввода и файлов.

    Собственные сообщения об ошибках

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

    Передача своих сообщений в Validator

    $messages = array("required" => "Поле:attribute должно быть заполнено.",); $validator = Validator::make($input, $rules, $messages);

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

    Использование других переменных-строк

    $messages = array("same" => "Значения:attribute и:other должны совпадать.", "size" => "Поле:attribute должно быть равно exactly:size.", "between" => "Значение:attribute должно быть от:min и до:max.", "in" => "Поле:attribute должно иметь одно из следующих значений: :values",);

    Указание собственного сообщения для отдельного поля

    Иногда вам может потребоваться указать своё сообщение для отдельного поля.

    $messages = array("email.required" => "Нам нужно знать ваш e-mail адрес!",);

    Указание собственных сообщений в файле локализации

    Также можно определять сообщения валидации в файле локализации вместо того, чтобы передавать их в Validator напрямую. Для этого добавьте сообщения в массив custom файла локализации app/lang/xx/validation.php .

    "custom" => array("email" => array("required" => "Нам нужно знать ваш e-mail адрес!",),),

    Собственные правила проверки

    Регистрация собственного правила валидации

    Laravel изначально содержит множество полезных правил, однако вам может понадобиться создать собственные. Одним из способов зарегистрировать произвольное правило - через метод Validator::extend .

    Validator::extend("foo", function($attribute, $value, $parameters) { return $value == "foo"; });

    Примечание: имя правила должно быть в формате_с_подчёркиваниями.

    Переданная функция-замыкание получает три параметра: имя проверяемого поля $attribute , значение поля $value и массив параметров $parameters , переданных правилу.

    Вместо функции в метод extend можно передать ссылку на метод класса:

    Validator::extend("foo", "FooValidator@validate");

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

    Расширение класса Validator

    Вместо использования функций-замыканий для расширения набора доступных правил вы можете расширить сам класс Validator . Для этого создайте класс, который наследует Illuminate\Validation\Validator . Вы можете добавить новые методы проверок, начав их имя с validate .

    Регистрация нового класса Validator

    Затем вам нужно зарегистрировать это расширение валидации. Сделать это можно, например, в вашем сервис-провайдере или в ваших старт-файлах .

    Validator::resolver(function($translator, $data, $rules, $messages) { return new CustomValidator($translator, $data, $rules, $messages); });

    Иногда при создании своего класса валидации вам может понадобиться определить собственные строки-переменные (типа ":foo") для замены в сообщениях об ошибках. Это делается путём создания класса, как было описано выше, и добавлением функций с именами вида replaceXXX .

    Protected function replaceFoo($message, $attribute, $rule, $parameters) { return str_replace(":foo", $parameters, $message); }

    Если вы хотите добавить свое сообщение без использования Validator::extend , вы можете использовать метод Validator::replacer:

    Validator::replacer("rule", function($message, $attribute, $rule, $parameters) { // });

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

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

    Серьезной веб-странице требуется проверка данных, т.е. какой-либо способ обнаружения ошибок во введенных данных, а еще лучше - способ, не допускающий ошибок вообще. На протяжении многих лет веб-разработчики делали это с помощью процедур 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, чтобы ограничить их значение определенным диапазоном значений.

    Например:

    Input:required:invalid { border:1px solid red; }

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

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

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

    {3}-{3}

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

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

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

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

    QDR-001 WES-205 LOG-104

    А вот эти нет:

    qdr-001 TTT-0259 5SD-000

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

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

    3) max, min
    Атрибут min и max могут помочь указывать диапазон между минимальном и максимальном номером. Мы можем использовать эти атрибуты в следующих инпутах: date, time, week, range, number и month . В следующем примере мы можем видеть минимальную и максимальную разницу в возрасте от 18 до 65 лет.


    Если пользователь введет возраст до 17 лет или после 66 лет, то он получит сообщение об ошибке, при том что этот запрос не будет отправлен на сервер.

    4) step
    Атрибут step можно использовать для числового интервала. В следующем примере есть input number где мы указываем минимальный и максимальный год, но мы добавляем step=”4” . Это означает, что при каждом изменении значение будет меняться с шагом 4 года.


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

    5) pattern
    Атрибут паттерн использует регулярное выражение для валидаций этого поля. Регулярное выражение представляет собой заранее определенный набор символов, которые образуют определенный шаблон. Мы можем использовать его либо для поиска строк, которые следуют шаблону, либо для обеспечения определенного формата, определенного шаблона.

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

    Заключение

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

    Вы также можете установить определенное требуемое значение. Вроде email или number.

    Это поле является обязательным для заполнения и вводимая информация будет проверяться на соответствие адресу электронной почты. Давайте улучшим UX:

    1. Сообщим пользователю о требуемом формате, когда фокус находится в поле ввода
    2. Напомним ему, если введенные данные не будут валидными

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

    Проверяем заполнено поле или нет

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

    Есть ли CSS-селектор для проверки пустоты поля? Вообще-то нет! Вы можете подумать на :empty ,но ошибетесь. Этот псевдокласс предназначен для проверки ситуаций когда элемент не содержит в себе ничего. Поля ввода и так пусты по умолчанию.

    Трюк в том, чтобы проверить поле на видимость атрибута placeholder :

    CSS
    input:not(:placeholder-shown) { }

    Мы не использовали плейсхолдер в нашем примере, но это правило сработает, если мы зададим значение из одного пробела:

    :placeholder-shown супер полезен для нас! Это в целом секретный селектор, позволяющий проверить, есть ли в поле значение или нет.

    IE и Firefox пока не поддерживают его, что немного осложняет задачу. Обычно спасителем является новая функция @supports , но…

    CSS /* Это не сработает */
    @supports (input:placeholder-shown) {
    input:not(:placeholder-shown) {
    }
    }

    Вы не можете использовать @supports для селекторов, только для свойства/значения (например @supports (display: flex)).

    Проверить плейсхолдер при помощи JavaScript довольно легко:

    JavaScript var i = document.createElement(‘input’);
    if (‘placeholder’ in i) { }

    Но это не кажется самым простым способом имитации :placeholder-shown . Поэтому…возможно, просто стоит подождать поддержки всеми браузерами.

    Представим, что поддержка уже повсеместная и посмотрим, как это будет выглядеть…

    SCSS form { > div {

    > input,
    > input,
    > input {

    // Когда поле ввода…
    // 1. НЕ пустое
    // 2. НЕ в фокусе
    // 3. НЕ валидно &:invalid:not(:focus):not(:placeholder-shown) {
    // Покажем напоминание background: pink;
    & + label {
    opacity: 0;
    }
    }

    // Когда в невалидное поле устанавливается фокус (и оно по прежнему не пустое) &:invalid:focus:not(:placeholder-shown) {
    // Покажем более настойчивое напоминание
    & ~ .requirements {
    max-height: 200px;
    padding: 0 30px 20px 50px;
    }
    }
    }

    // ~
    //


    .requirements {
    padding: 0 30px 0 50px;
    color: #999;
    max-height: 0;
    transition: 0.28s;
    overflow: hidden;
    color: red;
    font-style: italic;