- 浏览: 7330708 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (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 2711Titanium和JQuery整合的结构如下: 登 ... -
jquery validate.addMethod 正则表达式 (自定义验证方法)
2010-01-12 17:38 31231项目中使用的jQuery添加的校验的方法 $(do ... -
jQuery中ajax的使用和缓存问题解决
2009-12-09 15:42 163361:GET访问 浏览器 认为 是等幂的就是 一个相同的URL ... -
防止jQuery Load使用缓存的方法
2009-12-09 15:29 5744一、用法 jquery的load函数是请求另一个文件并 ... -
Struts2.0和jQuery的局部更新技术的应用
2009-12-05 19:08 3127在项目中Struts2.0和JQuery结合使用jQuer ... -
jQuery性能优化指南(全部)- 最佳和非最佳實戰
2009-11-28 11:51 2421jQuery性能优化指南(全部) 1,总是从ID选择器开始继承 ... -
jQuery工具函数
2009-11-27 12:49 2010工具函数是指在jQuery对象(即变量"" ... -
jQuery技巧实用大全
2009-06-14 08:41 2816随着WEB2.0及 ajax思想在互联网上 ... -
jQuery使用ajax的post与get发送数据
2009-06-14 08:29 32183针对上一篇JQuery学习中 ... -
自动完成插件 autocomplete
2009-06-09 15:34 6152自动完成插件 autocompleteautocomplete ... -
JQuery 插件Validate框架的学习总结(三)
2009-06-09 15:22 6906在提交表单前常要对用户输入进行校验.ASP.NET的验证控件就 ... -
JQuery 插件Validate框架的学习总结
2009-06-09 14:10 2735插件文档学习网站: http://www.codesky.n ... -
JQuery 插件SortTable的学习总结
2009-06-09 13:59 3596下载jquery中sorttable的js插件使用,用于美化截 ... -
关于Jquery实现datepicker实现国际化的应用
2009-06-09 11:52 7148使用这个插件要下载两 ... -
关于Jquery实现tab的局部更新
2009-06-09 11:23 4835实现此种局部更新的使用技术为JQuery和ProtoType ... -
JQuery学习应用开发和JQuery中文学习指南
2009-05-09 08:25 2181JQuery插件所在网站学习 http://ww ...
相关推荐
### Struts2与jQuery.validate框架简介 #### Struts2框架 Struts2是Apache软件基金会的一个开源项目,它是Struts1的升级版,提供了一个用于构建企业级Java Web应用的强大MVC框架。Struts2的核心组件包括拦截器、...
jQuery Validate框架极大地简化了客户端表单验证,它提供了丰富的预设规则和自定义功能,可以灵活地处理各种验证需求。通过学习和实践,开发者可以快速地在项目中应用这个强大的验证工具,提升用户体验,减少无效...
本篇文章将详细介绍jQuery.validate框架及其核心功能。 一、jQuery.validate简介 jQuery.validate插件是由Jörn Zaefferer开发的,它的主要目标是简化和标准化HTML表单的验证过程。通过使用该插件,开发者可以轻松...
总结来说,jQuery.validate是一个强大且灵活的表单验证插件,它提供丰富的验证规则和高度可定制的错误处理。通过源码阅读,我们可以更深入地理解其工作原理,并根据实际需求进行扩展和优化。对于任何涉及用户输入...
使用此框架之前,需确保页面中已引入jQuery库和jQuery.validate插件。例如: ```html <script type="text/javascript" src="js/jquery-min.js"> <script type="text/javascript" src="js/jquery.validate.pack.js">...
jQuery.validate.js是一款强大的JavaScript插件,专为jQuery框架设计,用于实现前端表单验证,提供了丰富的验证规则和自定义选项,使得开发者能够轻松地构建具有高效验证功能的网页。 一、jQuery.validate.js的核心...
jquery.validate Validation .js验证框架 帮助 手册 文档.chm 版本 方面查询 (一)、可选项( options ) 1 (二)插件方法 (jQuery validation) 6 (三、四)选择器及实用工具 (jQuery validation) 7 四、实用工具...
在jQuery Validate框架中,主要包含以下几个核心知识点: 1. **安装与引入**:首先,你需要在项目中引入jQuery库和jQuery Validate插件的JavaScript文件。通常,这两个文件可以从CDN(内容分发网络)获取,或者下载...
jQuery.validate是jQuery库的一个插件,它是一个功能强大的表单验证框架,使用它可以非常方便地实现前端表单验证。通过使用jQuery.validate,开发者可以定义表单元素的验证规则,并在表单提交之前执行这些规则,以...
jQuery Validate 是一个强大的客户端验证插件,用于在用户提交表单前进行实时验证。这个框架大大简化了HTML表单的验证过程,提供了丰富的内置验证规则和可扩展的自定义验证功能,使得表单验证更加人性化和高效。 1....
通过上述方法,你可以灵活地使用jQuery Validate框架实现丰富的前端验证功能。无论是简单的表单还是复杂的业务场景,都能找到合适的解决方案。在实际开发中,记得根据项目需求合理选择和组合这些特性,以提供最佳的...
jQuery Validate是一个强大的JavaScript库,它为jQuery框架提供了简单易用的表单验证功能。这个插件以其灵活性和丰富的定制选项,深受开发者喜爱。本文将深入探讨jQuery Validate的使用方法、核心功能和常见应用场景...
然后,通过在页面中引入jQuery库和validate插件的JavaScript文件,你可以初始化验证行为。例如: ```html <script src="jquery.js"> <script src="jquery.validate.js"> $(document).ready(function() { $("#...
《jQuery Validate插件详解与应用指南》 在Web开发领域,表单验证是不可或缺的一环,它能够确保用户输入的数据符合预设的规则,从而提高数据的准确性和系统的稳定性。jQuery Validate是一个强大的JavaScript库,专...
【最新实用的Validate通用表单验证Jquery插件】是一个高效、灵活的前端验证工具,专为使用Jquery框架的Web开发人员设计。这个插件极大地简化了表单验证的过程,使得用户输入的数据在提交前就能得到有效的检查,从而...
总结来说,`jQuery Validate` 框架为客户端表单验证提供了强大而灵活的解决方案,包括多种内置规则、自定义规则、错误处理回调、忽略选项以及元数据支持。通过这些特性,你可以轻松地实现对用户输入的有效性检查,...
8. **插件扩展**:jQuery Validate可以与其他jQuery插件(如表单序列化插件)配合使用,以实现更复杂的表单操作。 **使用步骤:** 1. **引入库**:首先需要在HTML文档中引入jQuery库和jQuery Validate插件的脚本...
### jQuery验证框架内置验证方法validate #### 一、概述 jQuery验证框架,即`jquery.validate.js`,是一款非常实用的JavaScript库,它为Web开发者提供了简单而强大的客户端表单验证功能。通过使用此插件,可以轻松...
`jQuery Validate`是jQuery库的一个强大插件,用于前端表单验证。它简化了网页表单的验证过程,提供了一套完整的验证规则和灵活的扩展机制。以下是对这个验证框架的详细说明: ### 1. 插件简介 `jQuery Validate`...