輕鬆學習jQuery外掛程式EasyUI EasyUI表單驗證_jquery

一、EasyUI建立非同步提交表單
本文向您展示如何透過 easyui 提交一個表單（Form）。我們建立一個帶有 name、email 和 phone 欄位的表單。透過使用 easyui 表單（form）外掛程式來改變表單（form）為 ajax 表單（form）。表單（form）提交所有欄位到後台伺服器，伺服器處理和發送一些資料返回前端頁面。我們接收返回數據，並將它顯示出來。

建立表單（Form）

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

改為 Ajax 表單

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

伺服器端程式碼

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

二、EasyUI表單驗證
將向您展示如何驗證一個表單。 easyui 框架提供一個 validatebox 外掛程式來驗證一個表單。在本教學中，我們將建立一個聯絡表單，並套用 validatebox 外掛程式來驗證表單。然後您可以根據自己的需求來調整這個表單。

建立表單（form）

讓我們建立一個簡單的聯絡表單，帶有 name、email、subject 和 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>

我們新增一個樣式名為 easyui-validatebox 到 input 標記，所以 input 標記將根據 validType 屬性套用驗證。
當表單無效時阻止表單提交

當使用者點擊表單的 submit 按鈕時，如果表單是無效的，我們應該封鎖表單提交。

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

如果表單是無效的，將顯示一個提示訊息。

以上就會針對表單進行的講解，包括如何建立非同步提交表單、如何進行表單驗證，希望這些都可以幫助大家。