jQuery EasyUI Formulare - Formular-Validierung
Dieses Tutorial zeigt Ihnen, wie Sie ein Formular zu validieren. easyui validatebox Framework stellt eine Plug-in eine Form zu validieren. In diesem Tutorial werden wir ein Kontaktformular, erstellen und validatebox Plug-in-Anwendung, um die Form zu überprüfen. Sie können dann nach ihren eigenen Bedürfnissen an die Form anpassen.
Erstellen Sie ein Formular (Formular)
Lassen Sie uns mit Namen, E-Mail, Betreff und Nachrichtenfelder ein einfaches Kontaktformular zu erstellen:
<Div style = "padding: 2px 3px; border-bottom: 1px solid #ccc"> Formular-Validierung </ div> <Form id = "ff" method = "post"> <Div> <Label for = "name"> Name: </ label> <Input class = "easyui-validatebox" type = "text" name = "name" required = "true"> </ input> </ Div> <Div> <Label for = "E-Mail"> E-Mail: </ label> <Input class = "easyui-validatebox" type = "text" name = "email" required = "true" validType = "E-Mail"> </ input> </ Div> <Div> <Label for = "Betreff"> Betreff: </ label> <Input class = "easyui-validatebox" type = "text" name = "Subjekt" required = "true"> </ input> </ Div> <Div> <Label for = "message"> Nachricht: </ label> & Lt; TextArea- name = "message" style = "height: 60px;" & gt; & lt; / TextArea- & gt; </ Div> <Div> <Input type = "submit" value = "Submit"> </ Div> </ Form>
Wir fügen einen Stil easyui-validatebox zu Input-Tag genannt, so dass die Eingangseichmarke wird nach validType Eigenschaft angewendet werden.
Formularübermittlung verhindern, wenn die Form ist ungültig
Klickt der Benutzer das Formular Absenden-Button, wenn das Formular nicht gültig ist, sollten wir als Vorlage zu stoppen.
$ ( '# Ff'). Formular ({ url: 'form3_proc.php', onSubmit: function () { return $ (this) .form ( 'validate'); }, Erfolg: function (data) { $ .messager.alert ( 'Info', Daten, 'info'); } });
Wenn das Formular nicht gültig ist, wird eine Meldung angezeigt.