一、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'); } }); 如果表單是無效的，將顯示一個提示信息。
以上就會針對表單進行的講解，包括如何創建異步提交表單、如何進行表單驗證，希望這些都可以幫助到大家。
