jQuery Plugin di convalida: aggiunta di regole applicabili a più campi

Sto usando il plugin jQuery Validation :

Ho diversi campi in una forma estesa a cui voglio applicare le stesse regole. Ho semplificato il codice per questo esempio. Questo codice non funziona, ma voglio fare qualcosa di simile. La seconda regola dovrebbe applicarsi sia a first_name che a last_name . Voglio incapsulare tutte le regole qui in questa funzione e non modificare gli elenchi di classi di alcuni degli elementi del modulo per aggiungere una class richiesta o qualsiasi altra cosa.

(Anche in questo caso, ho diversi gruppi di campi di moduli con requisiti diversi che desidero raggruppare. Ho solo required: true in quell’elemento per semplicità)

 $('#affiliate_signup').validate( { rules: { email: { required: true, email: true }, first_name,last_name: { required: true }, password: { required: true, minlength: 4 } } }); 

Grazie in anticipo.

Ai fini del mio esempio, questo è il codice di partenza di base:

HTML:

    

jQuery:

 $('#myForm').validate({ rules: { field_1: { required: true, number: true }, field_2: { required: true, number: true }, field_3: { required: true, number: true } } }); 

http://jsfiddle.net/9W3F7


Opzione 1a) È ansible estrarre i gruppi di regole e combinarli in variabili comuni.

 var ruleSet1 = { required: true, number: true }; $('#myForm').validate({ rules: { field_1: ruleSet1, field_2: ruleSet1, field_3: ruleSet1 } }); 

http://jsfiddle.net/9W3F7/1


Opzione 1b) Relativo a 1a sopra ma a seconda del tuo livello di complessità, puoi separare le regole che sono comuni a determinati gruppi e usare .extend() per ricombinarli in un numero infinito di modi.

 var ruleSet_default = { required: true, number: true }; var ruleSet1 = { max: 99 }; $.extend(ruleSet1, ruleSet_default); // combines defaults into set 1 var ruleSet2 = { min: 3 }; $.extend(ruleSet2, ruleSet_default); // combines defaults into set 2 $('#myForm').validate({ rules: { field_1: ruleSet2, field_2: ruleSet_default, field_3: ruleSet1 } }); 

Risultato finale:

  • field_1 sarà un numero richiesto non inferiore a 3.

  • field_2 sarà solo un numero richiesto.

  • field_3 sarà un numero richiesto non superiore a 99.

http://jsfiddle.net/9W3F7/2


Opzione 2a) È ansible assegnare classi ai propri campi in base alle regole comuni desiderate e quindi assegnare tali regole alle classi. Usando il metodo addClassRules stiamo prendendo regole composte e trasformandole in un nome di class.

HTML:

    

jQuery:

 $('#myform').validate({ // initialize the plugin // other options }); $.validator.addClassRules({ num: { required: true, number: true } }); 

http://jsfiddle.net/9W3F7/4/


Opzione 2b) La principale differenza dall’opzione 2a è che puoi usare questo per assegnare regole agli elementi di input creati dynamicmente chiamando il metodo rules('add') immediatamente dopo averli creati. Puoi usare la class come selettore, ma non è necessario. Come puoi vedere di seguito, abbiamo utilizzato un selettore di caratteri jolly anziché la class .

Il metodo .rules() deve essere chiamato in qualsiasi momento dopo aver richiamato .validate() .

jQuery:

 $('#myForm').validate({ // your other plugin options }); $('[name*="field"]').each(function() { $(this).rules('add', { required: true, number: true }); }); 

http://jsfiddle.net/9W3F7/5/


Documentazione:

  • rules('add') metodo

  • metodo addClassRules

È ansible utilizzare la syntax ‘getter’ in questo modo:

  { rules: { email: { required: true, email: true }, first_name: { required: true }, get last_name() {return this.first_name}, password: { required: true, minlength: 4 } } } 

Se ti capisco bene, vuoi applicare molte regole a molti campi, che possono differire secondo alcune regole, ma sei troppo pigro per ripeterti con le stesse regole ad altri campi. Tuttavia, con jQuery validate è ansible avere più di una regola su un campo di input. Basta usare la notazione array qui.

Per raggiungere il tuo caso d’uso, aggiungi gli attributi dei data a ciascun campo di input con le regole che desideri applicare. Nel migliore dei casi, utilizzare un formato JSON con codifica url, in modo che sia necessario un solo attributo data per ogni campo di input. Per esempio.:

 < !DOCTYPE html>    validate test   

La tecnologia di base alla base è semplice:

  1. Crea i tuoi campi con l’attributo `data-“.
  2. Passa sopra ogni campo di input per afferrare le regole che vuoi applicare su di esso.
  3. Applica le tue regole raccolte all’elemento del modulo

È anche ansible utilizzare i gruppi di input con gli stessi validatori in questo modo, ad esempio utilizzando le classi per esso e le variabili JavaScript predefinite con l’object rules. Penso che tu abbia avuto l’idea su come diventare pigri in un modo elegante 😉