- 浏览: 7252765 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (1546)
- 企业中间件 (236)
- 企业应用面临的问题 (236)
- 小布Oracle学习笔记汇总 (36)
- Spring 开发应用 (54)
- IBatis开发应用 (16)
- Oracle基础学习 (23)
- struts2.0 (41)
- JVM&ClassLoader&GC (16)
- JQuery的开发应用 (17)
- WebService的开发应用 (21)
- Java&Socket (44)
- 开源组件的应用 (254)
- 常用Javascript的开发应用 (28)
- J2EE开发技术指南 (163)
- EJB3开发应用 (11)
- GIS&Mobile&MAP (36)
- SWT-GEF-RCP (52)
- 算法&数据结构 (6)
- Apache开源组件研究 (62)
- Hibernate 学习应用 (57)
- java并发编程 (59)
- MySQL&Mongodb&MS/SQL (15)
- Oracle数据库实验室 (55)
- 搜索引擎的开发应用 (34)
- 软件工程师笔试经典 (14)
- 其他杂项 (10)
- AndroidPn& MQTT&C2DM&推技术 (29)
- ActiveMQ学习和研究 (38)
- Google技术应用开发和API分析 (11)
- flex的学习总结 (59)
- 项目中一点总结 (20)
- java疑惑 java面向对象编程 (28)
- Android 开发学习 (133)
- linux和UNIX的总结 (37)
- Titanium学习总结 (20)
- JQueryMobile学习总结 (34)
- Phonegap学习总结 (32)
- HTML5学习总结 (41)
- JeeCMS研究和理解分析 (9)
最新评论
-
lgh1992314:
[u][i][b][flash=200,200][url][i ...
看看mybatis 源代码 -
尼古拉斯.fwp:
图片根本就不出来好吧。。。。。。
Android文件图片上传的详细讲解(一)HTTP multipart/form-data 上传报文格式实现手机端上传 -
ln94223:
第一个应该用排它网关吧 怎么是并行网关, 并行网关是所有exe ...
工作流Activiti的学习总结(八)Activiti自动执行的应用 -
ZY199266:
获取不到任何消息信息,请问这是什么原因呢?
ActiveMQ 通过JMX监控Connection,Queue,Topic的信息 -
xiaoyao霄:
DestinationSourceMonitor 报错 应该导 ...
ActiveMQ 通过JMX监控Connection,Queue,Topic的信息
在页面导入相应的jquery和Validation的插件并导入并使用Validation框架
常用的限制使用如下:
相应的HTML中form中信息如下:
<form id="myform">
<label for="field">Required, only .xls and .csv files allowed</label>
FIle:<input id="file" name="file" type="file" />
PWD:<input id="pwd" name="pwd" type="text" />
PWD_AGAIN:<input id="pwd_again" name ="pwd_again" type="text" />
Birth:<input name="mydate" id="mydate" type="text" />
Age:<input name="age" id="age" type="text" />
Email:<input name ="myemail" id="myemail" type="text" />
URL :<input name="myurl" id="myurl" type="text" />
<input type="submit" value="Validate!" />
</form>
在js中绑定的代码如下:
<script type="text/javascript">
jQuery(function($) {
$("#myform").validate(rules:{
file:{
required:true, //表示必填的项
accept:"xls|csv" //可以使用
},
pwd:{
required:true,
creditcard:true, //表示必须为密码格式
rangeLength:[6,10] //表示密码的长度限制
},
pwd_again:{ //两次输入的密码的信息一致
required:true,
equalTo:"#pwd" //表示匹配的的字段
}
mydate:{
required:true,
date:true //输入的必须为时间类型
},
age:{
required:true,
digits:true, //表示输入的必须为数字
maxLength:2, //表示输入的必须为2个字符的长度
rangeValue:[1,100] //表示输入的数据的value的范围
},
myemail:{
require:true,
email:true //表示必须电子邮件的格式
},
myurl:{
required:true,
url:true //表示输入的必须为url的限制
}
});
});
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>jQuery PlugIn - 表单验证插件实例 Validate </title>
<!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader-->
<link rel="stylesheet" type="text/css" href="/JsLib/jquery/themes/redmond/style.css"%>" />
<script type="text/javascript" src="JsLib/jquery/jquery-min-lastest.js"></script>
<script type="text/javascript" src="JsLib/jquery/ui/jquery-ui-all-min-lastest.js"></script>
<script type="text/javascript" src="JsLib/jquery/plugin/jquery.validate/jquery.validate.min.js"></script>
<script type="text/javascript"src="/JsLib/jquery/plugin/jquery.validate/localization/messages_cn.js"></script>
<% if (false)
{%><script src="js/jquery-vsdoc-lastest.js" type="text/javascript"></script>
<% }%>
<script type="text/javascript">
/*========== 必须放在头部加载的语句块. 尽量避免使用 ==========*/
</script>
<style type="text/css">
body
{
font-size:12px;
}
/* form中显示文字的label */
.slabel
{
width:100px;
display: -moz-inline-box;
line-height: 1.8;
display: inline-block;
text-align:right;
}
/* 出错样式 */
input.error, textarea.error
{
border: solid 1px #CD0A0A;
}
label.error
{
color:#CD0A0A;
margin-left:5px;
}
/* 深红色文字 */
.textred
{
color:#CD0A0A;
}
</style>
</head>
<body>
<form id="commentForm" method="get" action="">
<fieldset style="width:500px;"><legend>表单验证</legend>
<p><label for="cname" class="slabel"><em class="textred">*</em> 姓名:</label>
<input id="cname" name="name" size="25" class="required" minlength="2" />
</p>
<p><label for="cemail" class="slabel"><em class="textred">*</em> E-Mail:</label>
<input id="cemail" name="email" size="25"/>
</p>
<p><label for="curl" class="slabel">网址:</label>
<input id="curl" name="url" size="25" class="url" value="" />
</p>
<p><label for="ccomment" class="slabel"><em class="textred">*</em> 内容:</label>
<textarea rows="2" id="ccomment" name="comment" cols="20" class="required" style="height:80px;"></textarea>
</p>
<p style="text-align:center;">
<input class="submit" type="submit" value="提交" />
</p>
</fieldset>
</form>
<script type="text/javascript">
/*==========用户自定义方法==========*/
/*==========事件绑定==========*/
$(function()
{
});
/*==========加载时执行的语句==========*/
$(function()
{
$("#commentForm").validate(
{
errorClass: "error",
submitHandler: function(form)
{
//如果想提交表单, 需要使用form.submit()而不要使用$(form).submit()
alert("submitted!");
},
rules: {
//为name为email的控件添加两个验证方法:required()和email()
email: { required: true, email: true }
},
messages: {
//为name为email的控件的required()和email()验证方法设置验证失败的消息内容
email: {required:"需要输入电子邮箱", email:"电子邮箱格式不正确"}
}
});
});
</script>
</body>
</html>
发表评论
-
Titanium+JQuery整合
2012-04-18 14:54 2674Titanium和JQuery整合的结构如下: 登 ... -
jquery validate.addMethod 正则表达式 (自定义验证方法)
2010-01-12 17:38 31052项目中使用的jQuery添加的校验的方法 $(do ... -
jQuery中ajax的使用和缓存问题解决
2009-12-09 15:42 162941:GET访问 浏览器 认为 是等幂的就是 一个相同的URL ... -
防止jQuery Load使用缓存的方法
2009-12-09 15:29 5709一、用法 jquery的load函数是请求另一个文件并 ... -
Struts2.0和jQuery的局部更新技术的应用
2009-12-05 19:08 3089在项目中Struts2.0和JQuery结合使用jQuer ... -
jQuery性能优化指南(全部)- 最佳和非最佳實戰
2009-11-28 11:51 2385jQuery性能优化指南(全部) 1,总是从ID选择器开始继承 ... -
jQuery工具函数
2009-11-27 12:49 1976工具函数是指在jQuery对象(即变量"" ... -
jQuery技巧实用大全
2009-06-14 08:41 2770随着WEB2.0及 ajax思想在互联网上 ... -
jQuery使用ajax的post与get发送数据
2009-06-14 08:29 32147针对上一篇JQuery学习中 ... -
自动完成插件 autocomplete
2009-06-09 15:34 6102自动完成插件 autocompleteautocomplete ... -
JQuery 插件Validate框架的学习总结(三)
2009-06-09 15:22 6843在提交表单前常要对用户输入进行校验.ASP.NET的验证控件就 ... -
JQuery 插件Validate框架的学习总结
2009-06-09 14:10 2696插件文档学习网站: http://www.codesky.n ... -
JQuery 插件SortTable的学习总结
2009-06-09 13:59 3567下载jquery中sorttable的js插件使用,用于美化截 ... -
关于Jquery实现datepicker实现国际化的应用
2009-06-09 11:52 7097使用这个插件要下载两 ... -
关于Jquery实现tab的局部更新
2009-06-09 11:23 4796实现此种局部更新的使用技术为JQuery和ProtoType ... -
JQuery学习应用开发和JQuery中文学习指南
2009-05-09 08:25 2115JQuery插件所在网站学习 http://ww ...
相关推荐
jquery.validate Validation .js验证框架 帮助 手册 文档.chm 版本 方面查询 (一)、可选项( options ) 1 (二)插件方法 (jQuery validation) 6 (三、四)选择器及实用工具 (jQuery validation) 7 四、实用工具...
jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,还可以自己扩充自己的验证方法,并且对国际化也有很好的支持。
jquery.validate Validation .js验证框架 帮助 手册 文档.doc (一)、可选项( options ) 1 (二)插件方法 (jQuery validation) 6 (三、四)选择器及实用工具 (jQuery validation) 7 四、实用工具(Utilities) 8 ...
jquery validate 教程 验证框架 帮助文档 中文文档 基于jQuery的客户段验证插件
这个jQuery插件使简单的客户端的表单验证轻松快速,同时提供大量的选择定制。是一个很好的选择,当你试图把它集成到一个现有的应用程序的现有标记。插件捆绑了一套有用的验证方法,包括URL和电子邮件验证
jQuery.validate.js 中文文档.pdf(整理),基于jQuery的客户段验证插件,简单实用,可重用性主。。极品验证框架 推荐
掌握Jquery框架的插件开发 2、掌握Jquery-validate表单验证插件的使用,了解表单验证的实现原理 实现一个基于Jquery的表单验证插件。 1、初步运用了Jquery框架进行编程,基本掌握Jquery框架的使用。 2、熟练使用...
plugin历史版本1、新的事件.on() .off()3、动画的改进1.42版介绍JQuery插件让Dreamweaver支持提示代码功能引入JQuery展开编辑本段简介 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript...
jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,还可以自己扩充自己的验证方法,并且对国际化也有很好的支 JQuery.validate.js 在表单验证中经常使用,初学,对于...
jquery框架的js验证插件,很好用,个人非常喜欢
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。有兴趣的可以了解一下。
Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理...
jQuery1.31 做中文验证的三个主要文件.jQuery是优秀的前台ajax框架,其编码精巧,使用简单,能方便的使用加入各种动画效果. 包含有jQuery1.3.1.js文件 jQuery.validate.js 验证插件 jQuery.validate.messages_cn.js ...
表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验。...后来我找到了jquery.validate,我发现这个框架还挺好的,因为它只提供校验机制,但是不提供特定校验的交互,有比较多的自定义
jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,并且对国际化也有很好的支持。 正常的验证模式如下: <form id="ff" action=...
7.2 验证插件validate /198 7.3 表单插件form /202 7.4 Cookie插件cookie /205 7.5 搜索插件AutoComplete /209 7.6 图片灯箱插件notesforlightbox /213 7.7 右键菜单插件contextmenu /216 7.8 图片放大镜插件...
使用JQuery validate验证表单内容,然后将表单提交到服务器,把表单内容保存在数据库相应表中。 用Hibernate多对一关联技术查询数据库中两张相关联表的内容。 用Spring AOP技术,实现对添加或修改...
validate.js是一款强大的纯javascript表单验证插件。该表单验证插件提供跨框架和跨语言的数据验证方式,验证条件可以写在JSON数据中,被服务器和客户端共享。它支持日期时间的验证,并提供自定义的验证接口。