国产精品人妻无码一区牛牛影视,日韩欧美成人高清,日韩欧美中文字幕一区二区

jQuery EasyUI使用教程：表單驗(yàn)證

原創(chuàng)|使用教程|編輯：龔雪|2016-08-31 09:11:37.000|閱讀 697 次

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

# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷售中 >>

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

jQuery EasyUI最新試用版下載請(qǐng)猛戳>>

創(chuàng)建表單

讓我們創(chuàng)建一個(gè)簡(jiǎn)單帶有name、email、subject和message字段的聯(lián)系表單：

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

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

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

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

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

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

下載EasyUI示例：