jEasyUI 表單驗(yàn)證

本教程將向您展示如何驗(yàn)證一個(gè)表單。easyui 框架提供一個(gè) validatebox 插件來驗(yàn)證一個(gè)表單。在本教程中，我們將創(chuàng)建一個(gè)聯(lián)系表單，并應(yīng)用 validatebox 插件來驗(yàn)證表單。然后您可以根據(jù)自己的需求來調(diào)整這個(gè)表單。

創(chuàng)建表單（form）

讓我們創(chuàng)建一個(gè)簡單的聯(lián)系表單，帶有 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>
????????????&lt;textarea name="message" style="height:60px;"&gt;&lt;/textarea&gt;
????????</div>
????????<div>
????????????<input type="submit" value="Submit">
????????</div>
????</form>

我們添加一個(gè)樣式名為 easyui-validatebox 到 input 標(biāo)記，所以 input 標(biāo)記將根據(jù) validType 屬性應(yīng)用驗(yàn)證。

當(dāng)表單無效時(shí)阻止表單提交

當(dāng)用戶點(diǎn)擊表單的 submit 按鈕時(shí)，如果表單是無效的，我們應(yīng)該阻止表單提交。

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

如果表單是無效的，將顯示一個(gè)提示信息。

上一篇：jEasyUI 創(chuàng)建異步提交表單下一篇：jEasyUI 創(chuàng)建樹形下拉框