Referință rapidă

Ghid Rapid Validare Formulare Parsley.js

Ghid de referință pentru Parsley.js: atribute HTML5, reguli de validare, API JavaScript pentru formulare și câmpuri și validatori personalizați.

· Publicat

Parsley.js oferă o experiență superioară de validare a formularelor pe partea de client fără cod repetitiv.

Inițializare

// Inițializare recomandată în JavaScript
$('#myForm').parsley({
  errorClass: 'is-invalid',
  successClass: 'is-valid'
});

Constrângeri standard de validare HTML

<!-- Câmp obligatoriu -->
<input required />

<!-- Tipuri email și URL -->
<input type="email" />
<input type="url" />

<!-- Limite de lungime -->
<input minlength="6" maxlength="20" />
<input data-parsley-length="[6, 20]" />

<!-- Tipare numerice și Regex -->
<input pattern="^[A-Z0-9]+$" />
<input data-parsley-type="digits" />
<input data-parsley-type="alphanum" />

<!-- Interval numeric -->
<input type="number" min="1" max="100" />
<input data-parsley-range="[1, 100]" />

<!-- Limite de selecție căsuțe bifare -->
<input type="checkbox" name="hobbies" data-parsley-mincheck="2" />

<!-- Confirmare potrivire parolă -->
<input id="password" type="password" />
<input type="password" data-parsley-equalto="#password" />

API JavaScript pentru formular și câmpuri

Metode pentru formular

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

form.isValid();   // Returnează true dacă este valid, altfel false
form.validate();  // Rulează validarea și afișează erorile
form.reset();     // Resetează starea de validare și șterge erorile
form.destroy();   // Detașează handler-ele Parsley de formular

Metode pentru câmpuri

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

field.isValid();
field.validate(); // Returnează un tablou cu erorile de constrângere

Validatori personalizați

Înregistrați validatori personalizați la nivel global:

window.Parsley.addValidator('multipleOf', {
  requirementType: 'integer',
  validateNumber(value, requirement) {
    return value % requirement === 0;
  },
  messages: {
    ro: 'Această valoare trebuie să fie un multiplu de %s.',
    en: 'This value must be a multiple of %s.'
  }
});

Utilizare în HTML:

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

Referințe

Subiecte conexe