SitePoint | ISNCA

Tutorial ten pokazuje jak skonfigurować podstawową walidację formularza za pomocą jQuery, zademonstrowaną na przykładzie formularza rejestracyjnego.

Wykorzystamy wtyczkę jQuery Validation Plugin do walidacji naszego formularza. Podstawową zasadą działania tego pluginu jest określanie reguł walidacji i komunikatów o błędach dla elementów HTML w JavaScript.

Tutaj znajduje się demo na żywo tego, co zamierzamy zbudować:

Zobacz pióro
jQuery Form Validation by SitePoint (@SitePoint)
na CodePen.

Krok 1: Dołącz jQuery

Po pierwsze, musimy dołączyć bibliotekę jQuery. Wtyczka walidacyjna jQuery została przetestowana do wersji 3.1.1 jQuery, ale demo w tym artykule działa idealnie z wersją 3.4.1, która jest najnowsza.

Możesz użyć jednej z następujących opcji pobierania:

Pobierz ją z jquery.com
Pobierz ją używając Bower: $ bower install jquery
Pobierz go za pomocą npm lub Yarn: $ npm install jquery lub yarn add jquery
Użyj CDN: https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

Utwórz nowy plik HTML o nazwie index.html i dołącz jQuery przed zamykającym znacznikiem </body>:

<!-- Change the "src" attribute according to your installation path --><script src="vendor/jquery/dist/jquery.min.js"></script>

Jeśli chciałbyś użyć Bower lub npm, ale nie jesteś z nimi zaznajomiony, możesz być zainteresowany tymi dwoma artykułami:

Package Management for the Browser with Bower
A Beginner’s Guide to npm – the Node Package Manager

Krok 2: Dołącz wtyczkę jQuery Validation Plugin

Wybierz pomiędzy:

Ściągnij ją z githubowego repo wtyczki
Ściągnij ją używając Bower: $ bower install jquery-validation
Pobierz go za pomocą npm: npm i jquery-validation
NuGet: Install-Package jQuery.Validation
Użyj CDN: https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js

Włącz wtyczkę po jQuery:

<!-- Change the "src" attribute according to your installation path --><script src="vendor/jquery-validation/dist/jquery.validate.min.js"></script>

Krok 3: Utwórz formularz HTML

Do rejestracji chcemy zebrać następujące informacje o użytkowniku:

imię pierwsze
nazwisko
email
hasło

Zatem stwórzmy nasz formularz zawierający te pola wejściowe:

<div class="container"> <h2>Registration</h2> <form action="" name="registration"> <label for="firstname">First Name</label> <input type="text" name="firstname" placeholder="John"/> <label for="lastname">Last Name</label> <input type="text" name="lastname" placeholder="Doe"/> <label for="email">Email</label> <input type="email" name="email" placeholder="[email protected]"/> <label for="password">Password</label> <input type="password" name="password" placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;"/> <button type="submit">Register</button> </form></div>

Podczas integrowania tego z prawdziwą aplikacją, nie zapomnij wypełnić atrybutu action, aby upewnić się, że formularz jest przesyłany do właściwego miejsca docelowego.

Krok 4: Utwórz style dla formularza

Utwórz nowy plik, css/styles.css, i umieść go w sekcji <head> swojego pliku HTML:

<link rel="stylesheet" href="css/style.css"/>

Kopiuj następujące style do nowo utworzonego pliku:

@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;}

Uwaga na style dla .error, które będą używane do komunikatów o błędach walidacji.

Krok 5: Tworzenie reguł walidacji

Na koniec, musimy zainicjować plugin walidacji formularzy. Utwórz nowy plik js/form-validation.js i odwołaj się do niego po tagu <script> wtyczki jQuery Validation:

<script src="js/form-validation.js"></script>

Kopiuj następujący kod do nowo utworzonego pliku:

// Wait for the DOM to be ready$(function() { // Initialize form validation on the registration form. // It has the name attribute "registration" $("form").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(); } });});

Wniosek

To wszystko, skończyłeś! Teraz masz już pomysł jak ustawić walidację formularzy za pomocą jQuery. Należy pamiętać, że nie zastępuje to walidacji po stronie serwera. Nadal jest możliwe, aby złośliwy użytkownik manipulował lub omijał reguły walidacji (na przykład, używając narzędzi deweloperskich przeglądarki).

How to Set Up Basic jQuery Form Validation in Two Minutes