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