jQuery EasyUI使用教程之表單驗證

本教程將向您展現如何驗證一個表單。easyui框架提供一個validatebox插件來驗證一個表單。在本教程中，咱們將建立一個聯繫表單，並應用validatebox插件來驗證表單,而後您能夠根據本身的需求來調整這個表單。

jQuery EasyUI最新試用版下載請猛戳>>

點擊查看示例

建立表單

讓咱們建立一個簡單帶有name、email、subject和message字段的聯繫表單：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<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"> </div> <div> <label for="email">Email:</label> <input class="easyui-validatebox" type="text" name="email" required="true" validtype="email"> </div> <div> <label for="subject">Subject:</label> <input class="easyui-validatebox" type="text" name="subject" required="true"> </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按鈕時，若是表單是無效的，咱們應該阻止表單提交。

1 2 3 4 5 6 7 8 9

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

若是表單是無效的，將顯示一個提示信息。

下載EasyUI示例：easyui-form-demo.zip

有興趣的朋友能夠點擊查看更多有關jQuery EasyUI的教程>>