jQuery EasyUI使用教程之表单验证

翻译 2016年08月31日 10:12:17

本教程将向您展示如何验证一个表单。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的教程>>

扩展jQuery EasyUI 的表单验证

easyui 的validatebox()提供了自定义验证的方法,为此我把一些常用的数据验证汇总了一下,代码如下:...
  • jumtre
  • jumtre
  • 2014年08月19日 13:20
  • 2707

jquery.easyui添加表单验证

jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascri...

jquery easyui 表单验证

EasyUI 验证框使用方法:  //***************************  missingMessage:未填写时显示的信息  validType:验证类型见下示例  in...

【Web前端学习笔记】EasyUI、JQuery表单验证

EasyUI、JQuery表单验证 A.EasyUI 1.概述 是一组基于JQuery的UI插件框架,提供了创建网页所需的一切 帮助开发者轻松打造出功能丰富且美观的web网页 2.特点 a...

jQuery easyui表单验证

这是easyui表单验证,其中包含了大多数常用数据类型验证。

毕业设计(二十)---使用easyUI dialog 对话框做登陆弹出 表单验证

后台方法: private HttpServletResponse response = ServletActionContext.getResponse(); // 用户登录 publi...
  • mamba10
  • mamba10
  • 2013年02月03日 11:48
  • 7423

jQuery 教程 (十一) 实战表单验证与自动完成提示插件 .NET

一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是介绍两个最常用的jQuery插件. 分别...
  • five824
  • five824
  • 2012年02月07日 16:32
  • 351

EasyUI表单验证

  • 2016年01月07日 10:28
  • 5KB
  • 下载

jQuery EasyUI使用教程使用Ajax提交表单

本教程主要展示如何使用easyui提交表单。我们创建一个带有name、email和phone字段的表单,通过使用easyui表单插件来将表单更改为ajax表单。表单提交所有的字段到后台服务器,服务器处...

jQuery EasyUI使用教程之创建展开行详细编辑表单的CRUD应用

当切换datagrid视图到"detailview"时,用户可以展开一行来显示该行下面的任何详细信息。此功能允许用户为放置在行详细信息面板中的编辑表单提供恰当的布局。在本教程中,我们使用DataGri...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery EasyUI使用教程之表单验证
举报原因:
原因补充:

(最多只允许输入30个字)