В этом руководстве показано, как настроить базовую проверку формы с помощью jQuery, демонстрируемую регистрационной формой.
Мы собираемся использовать плагин проверки jQuery для проверки нашей формы. Основной принцип этого плагина заключается в том, чтобы указать правила проверки и сообщения об ошибках для элементов HTML в JavaScript.
Вот живая демонстрация того, что мы собираемся построить:
Шаг 1. Включите jQuery
Вы можете использовать любой из следующих вариантов загрузки:
Загрузите его с jquery.com
Загрузите его с помощью Bower: $ bower install jquery
Загрузите его с помощью npm или Yarn: $ npm install jqueryилиyarn add jquery
Используйте CDN: https: //ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
Создайте новый файл HTML с именем index.htmlи включите jQuery перед закрывающим тегом:
Если вы хотите использовать Bower или npm, но не знакомы с ними, вам могут быть интересны эти две статьи:
Управление пакетами для браузера с Bower
Руководство для начинающих по npm — диспетчеру пакетов узлов
Шаг 2. Включите подключаемый модуль проверки jQuery.
Выбери между:
Загрузите его из репозитория плагина на github.
Загрузите его с помощью Bower: $ bower install
Загрузите его с помощью npm: npm i
NuGet:
Используйте CDN: https: //cdnjs.cloudflare.com/ajax/libs/
Включите плагин после jQuery:
Шаг 3: Создайте
Для регистрации мы хотим собрать следующую информацию о пользователе:
имя
фамилия
Эл. адрес
пароль
Итак, давайте создадим нашу форму, содержащую эти поля ввода:
Registration
При интеграции этого в реальное приложение не забудьте заполнить actionатрибут, чтобы убедиться, что форма отправлена в правильное место назначения.
Шаг 4: Создайте стили для формы
Создайте новый файл css/styles.cssи включите его в
раздел вашего
Скопируйте следующие стили во вновь созданный файл:
@import url («https: //fonts.googleapis.com/css? family=Open+Sans») ;
/* Styles */
* {
margin: 0;
padding: 0;
}
body {
}
.container {
width: 500px;
margin: 25px auto;
}
form {
padding: 20px;
background: #2c3e50;
color: #fff;
-
-
}
form label,
form input,
form button {
border: 0;
display: block;
width: 100%;
}
form input {
height: 25px;
background: #fff;
color: #000;
padding: 0 6px;
-
-
}
form button {
height: 30px;
background: #e67e22;
color: #fff;
cursor: pointer;
}
form.error {
color: #ff0000;
}
Обратите внимание на стили для.error, которые будут использоваться для сообщений об ошибках проверки.
Шаг 5: Создайте правила проверки
Наконец, нам нужно инициализировать плагин проверки формы. Создайте новый файл js/
Скопируйте следующий код во вновь созданный файл:
// Wait for the DOM to be ready
$ (function () {
// Initialize form validation on the registration form.
// It has the name attribute «registration»
$ («form[name='registration’]»).validate ({
// Specify validation rules
rules: {
// The key name on the left side is the name attribute
// of an input field. Validation rules are defined
// on the right side
firstname: «required»,
lastname: «required»,
email: {
required: true,
// Specify that email should be validated
// by the
email: true
},
password: {
required: true,
minlength: 5
}
},
// Specify validation error messages
messages: {
firstname: «Please enter your firstname»,
lastname: «Please enter your lastname»,
password: {
required: «Please provide a password»,
minlength: «Your password must be at least 5 characters long»
},
email: «Please enter a valid email address»
},
// Make sure the form is submitted to the destination defined
// in the «action» attribute of the form when valid
submitHandler: function (form) {
form.submit () ;
}
}) ;
}) ;
Вывод
Готово! Теперь у вас есть идея, как настроить проверку формы с помощью jQuery. Имейте в виду, что это не заменяет проверку на стороне сервера. Злоумышленник