Pelajari pemalam jQuery EasyUI EasyUI borang validation_jquery

1. Cipta borang penyerahan tak segerak dengan EasyUI
Artikel ini menunjukkan kepada anda cara menghantar borang (Borang) melalui easyui. Kami membuat borang dengan medan nama, e-mel dan telefon. Tukar borang kepada borang ajax dengan menggunakan pemalam borang easyui. Borang menyerahkan semua medan ke pelayan bahagian belakang, dan pelayan memproses dan menghantar beberapa data kembali ke halaman hujung hadapan. Kami menerima data pemulangan dan memaparkannya.

Buat Borang

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

Tukar kepada bentuk Ajax

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

Kod sisi pelayan

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. Pengesahan borang EasyUI
akan menunjukkan kepada anda cara untuk mengesahkan borang. Rangka kerja easyui menyediakan pemalam validatebox untuk mengesahkan borang. Dalam tutorial ini, kami akan membuat borang hubungan dan menggunakan pemalam validatebox untuk mengesahkan borang. Anda kemudian boleh menyesuaikan borang ini untuk memenuhi keperluan anda.

Buat borang

Mari buat borang hubungan ringkas dengan nama, e-mel, subjek dan medan mesej:

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

Kami menambah gaya yang dipanggil easyui-validatebox pada teg input, jadi teg input akan menggunakan pengesahan berdasarkan atribut validType.
Halang penyerahan borang apabila borang tidak sah

Apabila pengguna mengklik butang hantar borang, kami harus menghalang borang daripada dihantar jika borang itu tidak sah.

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

Jika borang tidak sah, mesej akan dipaparkan.

Perkara di atas akan menerangkan borang, termasuk cara membuat borang penyerahan tak segerak dan cara melakukan pengesahan borang saya harap ini dapat membantu semua orang.