1. Casa
  2. Forme jQuery EasyUI - Form Validation

Il miglior tutorial Forme jQuery EasyUI - Form Validation Nel 2024, in questo tutorial puoi imparare Scarica esempi jQuery EasyUI,

Forme jQuery EasyUI - Form Validation

Questo tutorial vi mostrerà come a convalidare un modulo. quadro validatebox easyui fornisce un plug-in per convalidare un modulo. In questo tutorial, creeremo un modulo di contatto, e applicare il plug-in validatebox per verificare la forma. È quindi possibile regolare in base alle proprie esigenze al modulo.

Creare un form (modulo)

Creiamo un semplice modulo di contatto con i campi di nome, e-mail, messaggi e all'oggetto: 

	<Div style = "padding: 3px 2px; border-bottom: 1px solid #ccc"> Form Validation </ div>
	<Form id = metodo "ff" = "post">
		<Div>
			<Label for = "nome"> Nome: </ label>
			<Input class = "easyui-validatebox" type = "text" name = "nome" required = "true"> </ input>
		</ Div>
		<Div>
			<Label for = "email"> E-mail: </ label>
			<Class = Ingresso tipo "easyui-validatebox" = "text" name = "email" required = "true" VALIDTYPE = "email"> </ input>
		</ Div>
		<Div>
			<Label for = "oggetto"> Oggetto: </ label>
			<Class = Ingresso tipo "easyui-validatebox" = "text" name = "soggetto" required = "true"> </ input>
		</ Div>
		<Div>
			<Label for = "messaggio"> Messaggio: </ label>
			& Lt; textarea name = "messaggio" style = "height: 60px;" & gt; & lt; / textarea & gt;
		</ Div>
		<Div>
			<Input type = "submit" value = "Invia">
		</ Div>
	</ Form>

Aggiungiamo uno stile chiamato easyui-validatebox per tag input, in modo che il marchio di verifica in ingresso verranno applicate in base alle proprietà VALIDTYPE.

Impedire modulo di presentazione quando la forma non è valido

Quando l'utente fa clic sul pulsante modulo di invio, se il modulo non è valida, dovremmo smettere di modulo di presentazione. 

	$ ( '# FF'). Modulo ({
		URL: 'form3_proc.php',
		onSubmit: function () {
			return $ (this) .Form ( 'validate');
		},
		successo: la funzione (dati) {
			$ .messager.alert ( 'Info', i dati, 'Info');
		}
	});

Se il modulo non è valido, viene visualizzato un messaggio.

Scarica esempi jQuery EasyUI

jeasyui-form-form3.zip

Tutorial caldi

Contattaci

Forme jQuery EasyUI - Form Validation
10/30