Apprenez facilement le plug-in jQuery EasyUI EasyUI form validation_jquery

1. Créez un formulaire de soumission asynchrone avec EasyUI
Cet article vous montre comment soumettre un formulaire (Formulaire) via easyui. Nous créons un formulaire avec des champs nom, email et téléphone. Changez le formulaire en formulaire ajax en utilisant le plugin de formulaire easyui. Le formulaire soumet tous les champs au serveur principal, et le serveur traite et renvoie certaines données à la page frontale. Nous recevons les données de retour et les affichons.

Créer un formulaire

 <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>

Changement vers le formulaire Ajax

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

Code côté serveur

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. Vérification du formulaire EasyUI
vous montrera comment valider un formulaire. Le framework easyui fournit un plug-in validatebox pour valider un formulaire. Dans ce tutoriel, nous allons créer un formulaire de contact et appliquer le plugin validatebox pour valider le formulaire. Vous pourrez ensuite adapter ce formulaire à vos besoins.

Créer un formulaire

Créons un formulaire de contact simple avec des champs de nom, d'e-mail, d'objet et de message :

 <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>

Nous ajoutons un style appelé easyui-validatebox à la balise d'entrée, de sorte que la balise d'entrée appliquera la validation basée sur l'attribut validType.
Empêcher l'envoi du formulaire lorsque le formulaire n'est pas valide

Lorsque l'utilisateur clique sur le bouton d'envoi du formulaire, nous devons empêcher la soumission du formulaire s'il n'est pas valide.

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

Si le formulaire n'est pas valide, un message s'affichera.

Ce qui précède expliquera le formulaire, y compris comment créer un formulaire de soumission asynchrone et comment effectuer la vérification du formulaire. J'espère que cela pourra aider tout le monde.