Yahoo! User Interface Blog (YUIBlog)

Il 3 Modulo Form YUI - Forms e validazione Made Simple

Il modulo di modulo nella Galleria YUI 3 mira a rendere il lavoro con forme semplici, comprese quelle incorporate in nonché la convalida personalizzabile e la possibilità di impostare gli errori del server. Ci sono classi di campi predefiniti per tutti i tipi di input del modulo HTML, e si possono estendere per creare campi personalizzati appositamente su misura. La convalida è completamente personalizzabile a livello di campo, e include una serie di metodi predefiniti che è possibile utilizzare per la validazione indirizzi e-mail, numeri di telefono, codici postali, date, orari e gli indirizzi IP. Questa convalida può essere fatto al momento della presentazione o in linea come il cambiamento dei valori di campo.

Un oggetto Form può essere completamente generata in script o costruiti direttamente dal markup (sostegno di un miglioramento progressivo avvicinamento). Ecco un esempio di come sia semplice costruire una forma di script:

 var = new myForm Y.Form ({
	 metodo: "post",
	 azione: "/ test.php action = submit",
	 inlineValidation: true,
	 campi: [
		 {Name: 'input1', tipo: 'text', etichetta: 'Ingresso Email:', validator: 'email'},
		 {Name: 'input2', digitare: 'text', etichetta: 'Ingresso Numero di telefono:', validator: 'telefono'},
		 'Scelte radio::' {name: 'choiceinput', tipo: 'scelta', etichetta, le scelte: [
			 {Label: 'Choice A', valore: 'A'},
			 {Label: 'B Choice', valore: 'B'},
			 {Label: 'Choice C', valore: 'C'}
		 ]},
		 {Type: 'submit', label: 'Invia'},
		 {Type: 'reset', label: 'Reset'}
	 ]
 });
 myForm.render ('# formContainer');

Questo esempio evidenzia molte delle caratteristiche del modulo. Il inlineValidate attributo è impostato su true, che provoca i campi per convalidare se stessi non appena gli incendi valueChange loro evento. Validatori preconfigurati per e-mail e numeri di telefono sono impostati su due degli ingressi, come pure, e un campo speciale chiamato ChoiceField viene utilizzato per una radio ingresso pulsante di scelta.

Vedere più esempi su GitHub per la costruzione di un modulo da markup e la definizione di un costume DateField, che attribuisce un YUI 2 Widget Calendar ad un ingresso.

Spero che troverete il modulo Form utili per lo sviluppo delle applicazioni, e accogliere eventuali commenti o suggerimenti per l'aggiunta di funzionalità o bug da risolvere. Per ulteriori informazioni si prega di consultare la documentazione su Github.

Domande sulla componente Form? Ogni YUI 3 Galleria modulo dispone di un forum di discussione dedicato, ecco quello per il modulo Form .

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!