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.