Эта популярная статья о базовой проверке форм jQuery была обновлена 18 августа 2016 года, чтобы исправить некоторые незначительные ошибки и отразить текущую версию библиотеки. Комментарии, относящиеся к старой статье, были удалены.
Из этого туториала Вы узнаете, как настроить проверку базовой формы с помощью jQuery, что демонстрируется регистрационной формой.
Мы будем использовать плагин проверки jQuery для проверки нашей формы. Основным принципом этого плагина является определение правил проверки и сообщений об ошибках для элементов HTML в JavaScript.
Вот живая демонстрация того, что мы собираемся построить:
Шаг 1: Включить jQuery
Во-первых, нам нужно включить jQuery v1.x, поскольку плагин проверки в настоящее время совместим только с версиями jQuery ниже 2.0.
Существуют следующие варианты загрузки:
- Загрузите его с jquery.com
- Загрузите его с помощью Bower:
$ bower install jquery#1.x --save-dev - Загрузите его, используя npm:
$ npm install jquery@1.x --save-dev - Используйте CDN:
https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js
Создайте новый файл HTML с именем index.html и index.html jQuery перед закрывающим </body> :
<!-- Change the "src" attribute according to your installation path --> <script src="vendor/jquery/dist/jquery.min.js"></script>
Если вы хотите использовать Bower или npm, но не знакомы с ними, вас могут заинтересовать эти две статьи:
Шаг 2. Включите плагин проверки jQuery
Выбери между:
- Загрузите его с сайта плагина
- Загрузите его с помощью Bower:
$ bower install jquery-validation - Загрузите его, используя npm:
$ npm install jquery-validation - Используйте CDN:
https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js
Включить плагин после jQuery:
<!-- Change the "src" attribute according to your installation path --> <script src="vendor/jquery-validation/dist/jquery.validate.min.js"></script>
Шаг 3. Создайте HTML-форму
Для регистрации мы хотим собрать следующую информацию о пользователе:
- Имя
- Фамилия
- Эл. адрес
- пароль
Итак, давайте создадим нашу форму, содержащую эти поля ввода:
<div class="container"> <h2>Registration</h2> <form action="" name="registration"> <label for="firstname">First Name</label> <input type="text" name="firstname" id="firstname" placeholder="John"/> <label for="lastname">Last Name</label> <input type="text" name="lastname" id="lastname" placeholder="Doe"/> <label for="email">Email</label> <input type="email" name="email" id="email" placeholder="john@doe.com"/> <label for="password">Password</label> <input type="password" name="password" id="password" placeholder="●●●●●"/> <button type="submit">Register</button> </form> </div>
При интеграции этого в реальное приложение, не забудьте заполнить атрибут action , чтобы убедиться, что форма отправлена в правильное место назначения.
Шаг 4. Создание стилей для формы
Создайте новый файл css/styles.css и css/styles.css его в раздел <head> вашего HTML-файла:
<link rel="stylesheet" href="css/style.css"/>
Скопируйте следующие стили во вновь созданный файл:
@import url("https://fonts.googleapis.com/css?family=Open+Sans"); /* Styles */ * { margin: 0; padding: 0; } body { font-family: "Open Sans"; font-size: 14px; } .container { width: 500px; margin: 25px auto; } form { padding: 20px; background: #2c3e50; color: #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } form label, form input, form button { border: 0; margin-bottom: 3px; display: block; width: 100%; } form input { height: 25px; line-height: 25px; background: #fff; color: #000; padding: 0 6px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } form button { height: 30px; line-height: 30px; background: #e67e22; color: #fff; margin-top: 10px; cursor: pointer; } form .error { color: #ff0000; }
Если вы используете Compass (SCSS), вы можете использовать следующее для стилизации формы:
@import "compass"; @import url("https://fonts.googleapis.com/css?family=Open+Sans"); /* Color settings */ $formBg: #2c3e50; $formColor: #fff; $inputBg: #fff; $inputColor: #000; $buttonBg: #e67e22; $buttonColor: #fff; $errorMsgColor: #ff0000; /* Styles */ * { margin: 0; padding: 0; } body { font-family: "Open Sans"; font-size: 14px; } .container { width: 500px; margin: 25px auto; } form { padding: 20px; background: $formBg; color: $formColor; @include border-radius(4px); label, input, button { border: 0; margin-bottom: 3px; display: block; width: 100%; } input { height: 25px; line-height: 25px; background: $inputBg; color: $inputColor; padding: 0 6px; @include box-sizing(border-box); } button { height: 30px; line-height: 30px; background: $buttonBg; color: $buttonColor; margin-top: 10px; cursor: pointer; } .error { color: $errorMsgColor; } }
Обратите внимание на стили для .error , которые будут использоваться для сообщений об ошибках валидации.
Шаг 5. Создайте правила проверки
Наконец, нам нужно инициализировать плагин проверки формы. Создайте новый файл js/form-validation.js и укажите его после <script> плагина jQuery Validation:
<script src="js/form-validation.js"></script>
Скопируйте следующий код во вновь созданный файл:
// 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 built-in "email" rule 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. Помните, что это не заменяет проверку на стороне сервера. Злоумышленник все еще может манипулировать или обходить правила проверки (например, с помощью инструментов разработчика браузера).