关闭

jQuery EasyUI使用教程之表单验证

232人阅读 评论(0) 收藏 举报

本教程将向您展示如何验证一个表单。easyui框架提供一个validatebox插件来验证一个表单。在本教程中,我们将创建一个联系表单,并应用validatebox插件来验证表单,然后您可以根据自己的需求来调整这个表单。

创建树形下拉框

创建表单

让我们创建一个简单带有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的教程>>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:204463次
    • 积分:6246
    • 等级:
    • 排名:第3948名
    • 原创:65篇
    • 转载:34篇
    • 译文:369篇
    • 评论:8条
    最新评论