Erlernen Sie ganz einfach das jQuery-Plug-in EasyUI EasyUI von validation_jquery

1. Erstellen Sie ein asynchrones Einreichungsformular mit EasyUI
In diesem Artikel erfahren Sie, wie Sie ein Formular (Formular) über easyui einreichen. Wir erstellen ein Formular mit Namens-, E-Mail- und Telefonfeldern. Ändern Sie das Formular mithilfe des EasyUI-Formular-Plugins in ein Ajax-Formular. Das Formular übermittelt alle Felder an den Back-End-Server, und der Server verarbeitet einige Daten und sendet sie zurück an die Front-End-Seite. Wir erhalten die Retourendaten und zeigen diese an.

Formular erstellen

 <div style="padding:3px 2px;border-bottom:1px solid #ccc">Ajax Form</div>
 <form id="ff" action="form1_proc.php" method="post">
 <table>
 <tr>
 <td>Name:</td>
 <td><input name="name" type="text"></input></td>
 </tr>
 <tr>
 <td>Email:</td>
 <td><input name="email" type="text"></input></td>
 </tr>
 <tr>
 <td>Phone:</td>
 <td><input name="phone" type="text"></input></td>
 </tr>
 <tr>
 <td></td>
 <td><input type="submit" value="Submit"></input></td>
 </tr>
 </table>
 </form>

Wechsel zur Ajax-Formular

 $('#ff').form({
 success:function(data){
 $.messager.alert('Info', data, 'info');
 }
 });

Serverseitiger Code

form1_proc.php
 $name = $_POST['name'];
 $email = $_POST['email'];
 $phone = $_POST['phone'];
 
 echo "Your Name: $name <br/> Your Email: $email <br/> Your Phone: $phone";

2. EasyUI-Formularüberprüfung
zeigt Ihnen, wie Sie ein Formular validieren. Das Easyui-Framework stellt ein Validatebox-Plugin zur Validierung eines Formulars bereit. In diesem Tutorial erstellen wir ein Kontaktformular und wenden das Validatebox-Plugin an, um das Formular zu validieren. Anschließend können Sie dieses Formular an Ihre Bedürfnisse anpassen.

Formular erstellen

Lassen Sie uns ein einfaches Kontaktformular mit Namens-, E-Mail-, Betreff- und Nachrichtenfeldern erstellen:

 <div style="padding:3px 2px;border-bottom:1px solid #ccc">Form Validation</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="email">Email:</label>
 <input class="easyui-validatebox" type="text" name="email" required="true" validType="email"></input>
 </div>
 <div>
 <label for="subject">Subject:</label>
 <input class="easyui-validatebox" type="text" name="subject" required="true"></input>
 </div>
 <div>
 <label for="message">Message:</label>
 <textarea name="message" style="height:60px;"></textarea>
 </div>
 <div>
 <input type="submit" value="Submit">
 </div>
 </form>

Wir fügen dem Eingabe-Tag einen Stil namens „easyui-validatebox“ hinzu, damit das Eingabe-Tag eine Validierung basierend auf dem validType-Attribut durchführt.
Verhindern Sie die Formularübermittlung, wenn das Formular ungültig ist

Wenn der Benutzer auf die Schaltfläche „Senden“ des Formulars klickt, sollten wir verhindern, dass das Formular gesendet wird, wenn das Formular ungültig ist.

 $('#ff').form({
 url:'form3_proc.php',
 onSubmit:function(){
 return $(this).form('validate');
 },
 success:function(data){
 $.messager.alert('Info', data, 'info');
 }
 });

Wenn das Formular ungültig ist, wird eine Meldung angezeigt.

Oben wird das Formular erläutert, einschließlich der Erstellung eines asynchronen Übermittlungsformulars und der Durchführung der Formularüberprüfung. Ich hoffe, dass dies allen helfen kann.