В нашем предыдущем уроке мы обсуждали, как реализовать базовую проверку формы с использованием некоторых входных атрибутов в HTML5 и небольшого регулярного выражения .
-
HTML5Проверка ввода формы с использованием только HTML5 и Regex
Из этого руководства вы узнаете, как использовать плагин jQuery для добавления проверки формы на ваш сайт.
Использование плагина jQuery для проверки форм служит многим целям. Это дает вам дополнительные возможности, такие как простое отображение пользовательских сообщений об ошибках и добавление условной логики для проверки формы. Библиотека валидации также может помочь вам добавить валидацию в HTML-формы с минимальными изменениями в разметке или без таковых. Условия для действительности также могут быть добавлены, удалены или изменены в любое время с легкостью.
Начиная
В этом руководстве мы будем использовать плагин проверки jQuery . Плагин предлагает множество функций, а также помогает вам определить свою собственную логику проверки.
Прежде чем мы сможем начать использовать плагин в наших полях, мы должны включить необходимые файлы в наш проект. Есть два разных файла для включения. Первый — это файл ядра, который включает в себя основные функции плагина, включая все — от различных методов проверки до некоторых пользовательских селекторов. Второй файл содержит дополнительные методы для проверки входных данных, таких как номера кредитных карт и номера телефонов в США.
Вы можете добавить эти файлы в свои проекты с помощью менеджеров пакетов, таких как Bower или NPM. Вы также можете просто получить ссылку CDN на файлы и добавить их в тег script на своей веб-странице. Поскольку это плагин на основе jQuery, вам также необходимо добавить ссылку на библиотеку jQuery.
|
1
2
|
<script src=»https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js»></script>
<script src=»https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js»></script>
|
После добавления этих файлов вы можете начать проверку любой формы с помощью метода validate .
Подтверждение вашей первой формы
Вы можете начать использовать этот плагин, не внося существенных изменений в разметку. Единственное, что вам, возможно, придется изменить, — это добавить id или class в форму, которую вы хотите проверить, если у нее ее еще нет.
Вот разметка базовой формы, которую мы будем проверять с помощью плагина jQuery validate.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<form id=»basic-form» action=»» method=»post»>
<p>
<label for=»name»>Name <span>(required, at least 3 characters)
<input id=»name» name=»name» minlength=»3″ type=»text» required>
</p>
<p>
<label for=»email»>E-Mail <span>(required)
<input id=»email» type=»email» name=»email» required>
</p>
<p>
<input class=»submit» type=»submit» value=»SUBMIT»>
</p>
</form>
|
Мы используем те же атрибуты, что и в предыдущем уроке по проверке форм на основе HTML5 . Форма будет по-прежнему выполнять проверку без добавления JavaScript. Однако использование плагина для проверки позволит нам показать сообщения об ошибках прямо под недопустимым полем ввода. Мы также сможем стилизовать ошибки так, как хотим.
Чтобы начать проверку формы с помощью этого плагина, просто добавьте следующий код JavaScript на веб-странице:
|
1
2
3
|
$(document).ready(function() {
$(«#basic-form»).validate();
});
|
Это основано на предположении, что вы уже добавили необходимые файлы JavaScript. Добавление этих строк JavaScript обеспечит правильную проверку вашей формы и отображение всех сообщений об ошибках. Вот рабочая демка.
Библиотека старается быть максимально удобной для пользователя, показывая сообщения об ошибках только тогда, когда они необходимы. Например, если вы переходите по полям имени и адреса электронной почты без фактического ввода какой-либо информации, вы не получите никаких сообщений об ошибках. Однако, если вы попытаетесь перейти в поле электронной почты после ввода только одного символа в поле имени, вы получите сообщение об ошибке ввода не менее трех символов.
Сообщения об ошибках вводятся в DOM с использованием элемента label . Все они имеют класс error , поэтому легко применить свой собственный стиль, как мы это делали в нашем примере. То же самое верно для недопустимых входных данных, к которым также добавлен класс error .
Параметры для метода validate()
В нашем предыдущем примере мы просто вызывали метод validate() не передавая ему никаких опций. Однако мы также можем передать объект этому методу вместе со многими опциями внутри этого объекта. Значение этих параметров будет определять, как плагин формы обрабатывает проверку, ошибки и т. Д.
Если вы хотите, чтобы этот плагин игнорировал некоторые элементы во время процесса проверки, вы можете легко сделать это, передав класс или селектор ignore() . Все элементы формы с этим конкретным селектором будут игнорироваться плагином при проверке ввода.
Добавить правила проверки для полей ввода
Вы также можете передать некоторые правила в метод validate() , чтобы определить, как проверяются входные значения. Значением параметра rules должен быть объект с парами ключ-значение. Ключ в каждом случае — это имя элемента, который мы хотим проверить. Значением этого ключа является объект, который содержит набор правил, которые будут использоваться для проверки.
Вы также можете добавить условную логику к различным полям, которые вы проверяете, используя ключевое слово depends и передавая ему функцию обратного вызова, которая возвращает либо true либо false . Вот пример, который использует простые правила, чтобы определить, как входные данные проверены.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
$(document).ready(function() {
$(«#basic-form»).validate({
rules: {
name : {
required: true,
minlength: 3
},
age: {
required: true,
number: true,
min: 18
},
email: {
required: true,
email: true
},
weight: {
required: {
depends: function(elem) {
return $(«#age»).val() > 50
}
},
number: true,
min: 0
}
}
});
});
|
В приведенном выше фрагменте кода name ключей, age , email и weight являются просто именами элементов ввода. Каждый ключ имеет объект в качестве своего значения, и пары ключ-значение в объекте определяют, как будет проверяться поле ввода. Эти параметры проверки похожи на атрибуты, которые вы можете добавить в разметку формы. Например, установка для true значения сделает элемент, необходимый для отправки формы. Установка для minlength значения, такого как 3, заставит пользователей вводить не менее 3 символов при вводе текста. Есть несколько других встроенных методов проверки, которые кратко описаны на странице документации .
Одна вещь, которую вы должны отметить в приведенном выше коде, — это использование depends чтобы условно сделать вес обязательным полем, если возраст превышает 50. Это делается путем возврата true в функцию обратного вызова, если значение, введенное в поле ввода age является более 50
Создайте свои собственные сообщения об ошибках
Этот плагин также позволяет вам устанавливать сообщения об ошибках для различных правил проверки в форме. Вы начинаете с установки значения ключа messages для объекта с парами ключ-значение для полей ввода и соответствующих сообщений об ошибках.
Вот пример, который будет отображать пользовательские сообщения об ошибках для каждого поля ввода.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
messages : {
name: {
minlength: «Name should be at least 3 characters»
},
age: {
required: «Please enter your age»,
number: «Please enter your age as a numerical value»,
min: «You must be at least 18 years old»
},
email: {
email: «The email should be in the format: [email protected]»
},
weight: {
required: «People with age over 50 have to enter their weight»,
number: «Please enter your weight as a numerical value»
}
}
|
Как и правила, messages зависят от имени полей ввода. Каждое из этих полей ввода примет объект с парами ключ-значение в качестве значения. Ключ в каждом случае — это правило валидации, которому необходимо следовать. Значение — это просто сообщение об ошибке, которое вы хотите отобразить в случае нарушения определенного правила.
Например, поле ввода age вызовет required сообщение об ошибке, если оставить его пустым. Однако, это вызовет ошибку number если вы введете что-то еще, кроме числа, в поле ввода.
Одна вещь, которую вы заметите, это то, что плагин будет отображать общее сообщение об ошибке для правил проверки, где вы не предоставили пользовательское сообщение об ошибке. Попробуйте ввести другие значения в следующей демонстрации, и вы увидите, что пользовательские и общие сообщения об ошибках отображаются, как и ожидалось.
Дополнительные параметры для изменения поведения плагина
Вы можете запретить плагину проверять поля ввода при нажатии onfocusout , onkeyup и других подобных событиях, установив для onfocusout , onkeyup или onclick значение false . Помните, что логическое значение true не является допустимым значением для этих ключей. По сути, это означает, что если вы хотите, чтобы плагин проверял или терял фокус на событии key up, просто оставьте эти параметры без изменений.
Вы также можете изменить классы, которые добавляются к допустимым или недействительным элементам ввода, используя ключи errorClass и validClass . Это может помочь предотвратить некоторые нежелательные конфликты из-за повторного использования одного и того же имени класса. Точно так же у вас есть возможность изменить элемент, в котором появляется ошибка. По умолчанию плагин использует элемент label для отображения всех сообщений об ошибках, но вы можете изменить его на em или любой другой элемент, используя ключ errorElement . Затем сам элемент error может быть помещен в другой HTML-элемент с помощью ключа wrapper .
Это некоторые из наиболее распространенных вариантов, которые вы, вероятно, будете использовать при проверке форм. Однако есть некоторые другие параметры проверки, которые могут пригодиться, если вы хотите что-то сделать, например изменить размещение сообщений об ошибках или сгруппировать их все вместе.
Последние мысли
В этом уроке мы узнали, как поднять проверку формы на следующий уровень с помощью плагина jQuery. Использование проверки формы JavaScript дает нам большой дополнительный контроль над базовой проверкой HTML. Например, вы можете легко управлять тем, как и когда появляются разные сообщения об ошибках, когда ввод заполнен недопустимыми значениями. Точно так же вы можете также указать, должен ли плагин пропускать проверку для некоторых конкретных элементов. Я настоятельно рекомендую вам прочитать документацию этого плагина и некоторые рекомендации по его правильному использованию.
В нашем следующем уроке вы узнаете о некоторых других инструментах и плагинах на основе JavaScript, которые помогут вам легко создавать и проверять формы.
И пока вы здесь, посмотрите другие наши посты о формах JavaScript и валидации форм!
-
Проверка ввода формы с использованием только HTML5 и Regex
-
Отправить форму без обновления страницы с помощью jQuery
