Γρήγορη αναφορά

Parsley.js Επικύρωση Φορμών Σημειώσεις

Πλήρης οδηγός αναφοράς για το Parsley.js: γνωρίσματα HTML5, κανόνες επικύρωσης, JavaScript API πεδίων και φόρμας και προσαρμοσμένοι επικυρωτές.

· Δημοσιεύτηκε

Το Parsley.js παρέχει επικύρωση φορμών στην πλευρά του πελάτη χωρίς περιττό κώδικα JavaScript.

Εκκίνηση

// Προτεινόμενη εκκίνηση με JavaScript
$('#myForm').parsley({
  errorClass: 'is-invalid',
  successClass: 'is-valid'
});

Τυπικοί Περιορισμοί Επικύρωσης HTML

<!-- Υποχρεωτικό -->
<input required />

<!-- Τύποι Email & URL -->
<input type="email" />
<input type="url" />

<!-- Όρια Μήκους -->
<input minlength="6" maxlength="20" />
<input data-parsley-length="[6, 20]" />

<!-- Αριθμητικά & Μοτίβα Regex -->
<input pattern="^[A-Z0-9]+$" />
<input data-parsley-type="digits" />
<input data-parsley-type="alphanum" />

<!-- Εύρος Αριθμών -->
<input type="number" min="1" max="100" />
<input data-parsley-range="[1, 100]" />

<!-- Όρια Επιλογής Checkbox -->
<input type="checkbox" name="hobbies" data-parsley-mincheck="2" />

<!-- Επιβεβαίωση Κωδικού Πρόσβασης -->
<input id="password" type="password" />
<input type="password" data-parsley-equalto="#password" />

JavaScript API Φόρμας & Πεδίων

Μέθοδοι Φόρμας

const form = $('#myForm').parsley();

form.isValid();   // Επιστρέφει true εάν είναι έγκυρη, false διαφορετικά
form.validate();  // Εκτελεί επικύρωση και εμφανίζει μηνύματα σφάλματος
form.reset();     // Επαναφέρει την κατάσταση επικύρωσης
form.destroy();   // Αποσυνδέει τους χειριστές του Parsley από τη φόρμα

Μέθοδοι Πεδίων

const field = $('#username').parsley();

field.isValid();
field.validate(); // Επιστρέφει πίνακα αντικειμένων αποτυχημένων περιορισμών

Προσαρμοσμένοι Επικυρωτές

Καθολική καταχώριση προσαρμοσμένων επικυρωτών:

window.Parsley.addValidator('multipleOf', {
  requirementType: 'integer',
  validateNumber(value, requirement) {
    return value % requirement === 0;
  },
  messages: {
    el: 'Αυτή η τιμή πρέπει να είναι πολλαπλάσιο του %s.',
    en: 'This value must be a multiple of %s.'
  }
});

Χρήση στο HTML:

<input type="number" data-parsley-multiple-of="5" />

Αναφορές

Σχετικά θέματα