Rumah > hujung hadapan web > tutorial js > Pelajari pemalam jQuery EasyUI EasyUI borang validation_jquery

Pelajari pemalam jQuery EasyUI EasyUI borang validation_jquery

WBOY
Lepaskan: 2016-05-16 15:28:31
asal
1194 orang telah melayarinya

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>
Salin selepas log masuk

Tukar kepada bentuk Ajax

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

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

Salin selepas log masuk

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>
Salin selepas log masuk

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');
 }
 });
Salin selepas log masuk

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.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan