- 浏览: 541718 次
- 性别:
- 来自: 天津
文章分类
- 全部博客 (230)
- java (87)
- c/c++/c# (39)
- ASP.net MVC (4)
- eclipse/visual studio (3)
- tomcat/weblogic/jetty (13)
- linux/unix/windows (20)
- html/javascript/jquery/kendo/bootstrap/layui/vue/react (31)
- hibernate/struts/spring/mybatis/springboot (21)
- lucene/solr/ELK (2)
- shiro (0)
- oracle/sqlserver/mysql/postgresql (23)
- shell/python/ruby (6)
- android (0)
- maven/ant (1)
- freemarker/thymeleaf/velocity (1)
- open source project (41)
- cache/memcached/redis (0)
- nosql/hadoop/hbase/mongodb (0)
- system architecture/dubbo/zookeeper (0)
- software testing (0)
- system optimization (0)
- system security (0)
- tcp/udp/http (2)
- roller/wordpress (2)
- 工具收藏 (8)
- 文摘 (4)
- 生活 (0)
最新评论
-
coconut_zhang:
这个demo 非常完整了,是指下面说的那个html 模版,模版 ...
flying sauser, thymeleaf实现PDF文件下载 -
a93456:
你好,你有完整的demo吗? String template这 ...
flying sauser, thymeleaf实现PDF文件下载 -
yujiaao:
fn 函数循环是没有必要的啊,可以改成
protecte ...
Java 笛卡尔积算法的简单实现 -
安静听歌:
设置了.setUseTemporaryFileDuringWr ...
使用jxl导出大数据量EXCEL时内存溢出的解决办法 -
q280499693:
写的很详细,但是我现在想知道他们是怎么定位log4j.prop ...
关于SLF4J结合Log4j使用时日志输出与指定的log4j.properties不同
jquery.validator 和 jquery.form 控件使用的问题 .
如果使用jquery.validator 验证框架,那么form表单要放在table之外,不然会出现错误信息加载两次,并导致remote验证不能使用的情况,另外不能和jquery.form使用,不然会导致表单虽然不通过验证,但是依然提交的情况,如果一定要使用,则必须放在validator的submitHandler函数中执行ajaxSubmit操作。
先上张验证表单的效果吧:
1、首页要在页面中引入js
<script src="/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/jquery.validate.js" type="text/javascript"></script>
<script src="/jquery.form.js" type="text/javascript"></script>
2、js核心代码
jQuery(document).ready(function() {
/*commentform是你页面中的form表单的id,例如:
<form id="commentform" action="#" method=post>
<DIV id=author_info> <P><INPUT id=author tabIndex=1 name="user"><LABEL for=author><SMALL>姓名:</SMALL> </LABEL> </P> <span id="a"></span> <P><INPUT id=email tabIndex=2 name="email"> <LABEL for=email><SMALL>邮箱:</SMALL> </LABEL></P> <span id="b"></span> <P><INPUT id=url tabIndex=3 name=url><LABEL for=url><SMALL>网址:</SMALL></LABEL></P> <span id="c"></span> </DIV> <BR><TEXTAREA id=comment onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};" onpropertychange="checklen(this)" name=content rows=14 cols=100 maxlength="250" ></TEXTAREA> <br>文明上网,理性发言,您还可输入<span id="tno"></span>个字符<p> <span id="d"></span><p>
</FORM>
*/
//开始验证规则 jQuery("#commentform").validate({ rules: { user: { required: true, maxlength: 10 }, email: { required: true, email: true }, url: { required: true, url: true }, content: "required" }, messages: { user: { required: '请输入姓名', maxlength: '用户名应小于10个字符' }, email: { required: '请输入邮箱', email: '请检查邮箱格式(例如:wjd@126.com)' }, url: { required: '请输入您的网址', url: '请输入正确格式的网址(例如:http://www.baidu.com)' }, content: '请输入您的评论' },
//当点击提交按钮时执行submitHandler函数
submitHandler: function(form) { jQuery(commentform).ajaxSubmit({ url: "./xxx.do?method=save", data: jQuery('#commentform').formSerialize(), type: 'POST', beforeSubmit: function() { jQuery('#loading').show(); }, success: function(data) { if (data == "success") { jQuery('#loading').hide(); //此处可以用ajax方式得出刚刚的留言,显示到页面上 } else { alert("留言出错了"); } } }); //当验证没通过时不予以提交表单 return false; }, //当验证没通过时显示错误的样式 errorPlacement: function(error, element) { if (element.attr("name") == "user") { error.appendTo("#a"); } if (element.attr("name") == "email") { error.appendTo("#b"); } if (element.attr("name") == "url") { error.appendTo("#c"); } if (element.attr("name") == "content") { error.appendTo("#d"); } }, errorElement: "em",//可以用其他标签,记住把样式也对应修改 success: function(span) { span.text("正确").addClass("success");//加上自定义的success类,当验证通过时提示正确 } }); });
3、在页面中引入提示信息的样式(验证通过时提示输入正确,没通过时提示错误)
<style type="text/css">
em.error { background:url("/common/validation/images/unchecked.gif.png") no-repeat 0px 0px; padding-left: 16px; } em.success { background:url("/common/validation/images/checked.gif.png") no-repeat 0px 0px; padding-left: 16px; }
</style>
这样利用jquery validate 和jquery form 插件组合实现表单验证和无刷新提交的功能就实现了,是不是很简单呢?
发表评论
-
logback的使用和logback.xml详解
2017-03-09 11:20 2183一、logback的介绍 Logback是由log4j ... -
jquery formValidator 表单验证插件, ajax无法传值到后台问题的解决
2016-06-24 17:10 661data : { count: Math.random ... -
thymeleaf与spring整合
2016-06-15 10:08 12341、使用的是Spring EL而不是Ognl。2、访问上下文 ... -
SpringMVC 400 Bad Request 问题
2016-06-15 09:11 1964在提交表单时,发生400错误,并未进入save方法。 ... -
bootstrap3自定义popover显示的内容
2016-05-27 11:14 1141<script type="text/jav ... -
JS 中面向对象的5种写法
2015-08-13 15:54 703定义Circle类,拥有成员变量r,常量PI和计算面积的成员 ... -
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2015-07-31 15:09 4116动态载入 JavaScript/Csss 文件 传统加载外部 ... -
Java_Ant详解
2015-06-15 16:54 7261,什么是antant是构建工 ... -
httpClient通过代理(Http Proxy)进行请求
2014-09-16 14:18 1225httpClient通过代理(Http Proxy)进行请求 ... -
httpclient上传文件及传参数
2014-09-16 11:07 11633用到的包有commons-httpclient-3.0.1. ... -
简单返回顶部代码及注释说明
2014-07-16 10:44 965最近做了一个排行榜页 ... -
深入浅出JSONP:解决AJAX跨域问题
2014-04-16 11:00 810取不到数据! 上周客户新买了服务器,原本在旧的服务器上放着 ... -
Progress Bar Plugin
2013-12-26 10:04 825from: http://digitalbush.com/p ... -
javascript cookie
2013-11-08 09:18 1060cookie概述在上一节, ... -
plupload实现多图片上传
2013-07-19 16:12 23283最近发现一个非常牛的上传组件(http://www.plu ... -
调用axis2 WebService三种方法
2013-06-28 13:41 1797第一:简单的使用axis2包自己实现调用 package ... -
java-jsch实现sftp文件操作
2013-06-26 13:55 3667(曾在天涯)的文章详细讲解了jsch中的函数以及用法 ht ... -
url encode的问题
2012-11-06 08:27 60321.urlencode和decode 字符的编码和解码在有中 ... -
通过Class Name获取一个对象的数组
2012-09-24 10:42 3970DOM 提供了一个名为 getElementById() ... -
Lucene3.0 初窥(转载)
2012-08-04 21:38 1020【Lucene3.0 初窥】全文检索的基本原理 ...
相关推荐
jQuery验证控件`jquery.validate.js`是一款非常流行的前端表单验证插件,它极大地简化了在Web应用中实现表单验证的过程。这个插件由Jörn Zaefferer开发,是jQuery库的一个强大扩展,使得开发者能够快速、便捷地为...
3. 应用样式和行为:通过添加特定的CSS类或使用jQuery方法启用EasyUI功能。 4. 配置和交互:通过JavaScript代码配置组件属性,实现动态交互。 **3. 示例分析** 在“codefans.net”这个文件中,可能包含了一系列...
在使用 jQuery Validate 之前,首先需要引入 jQuery 库和 jQuery Validate 的 js 文件。 ```html <script src="../js/jquery.js" type="text/javascript"> <script src="../js/jquery.validate.js" type="text/...
### Jquery(Validate-Form)使用方法详解 #### 一、Jquery Validate 概述 Jquery Validate 是一个非常流行的前端表单验证插件,它由 Jörn Zaefferer 编写和维护,他是 jQuery 团队的一员,同时也是 jQuery UI 的...
### jQuery Validate 快速入门与实战应用 #### 一、jQuery Validate 插件简介 ...以上就是 `jQuery Validate` 的基本使用和一些高级功能介绍,通过合理运用这些功能,可以显著提升前端表单验证的能力和灵活性。
默认情况下,类型为 "submit" 和 "reset" 的表单控件会被忽略。你可以根据需要自定义: ```javascript $("#myform").validate({ ignore: ".ignore" }); ``` #### 2.5 `rules` `rules` 选项用于定义表单元素的...
该插件是jQuery库的一个扩展,充分利用了jQuery的简洁和高效特性。 ### 一、安装与引入 在使用jQuery Validate之前,首先需要确保已经引入了jQuery库。接着,通过以下方式引入jQuery Validate插件: ```html ...
开发者可以使用jQuery.validator.addMethod方法定义一个新的验证规则,然后在表单的rules对象中调用这个自定义的验证方法,并配置相应的错误提示信息。这样的做法既保证了验证的灵活性,也保证了用户输入的有效性。 ...
本篇将深入探讨如何使用jQuery进行表单验证,特别是针对描述中提到的电话号码、电子邮件、控件和数字的验证。 1. **基本概念** - jQuery:jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件...
在这个场景中,我们将深入探讨JQuery中的表单验证控件,尤其是`jQuery的表单校验插件validate`。 `jQuery Validate`插件是jQuery的一个官方扩展,用于实现客户端的表单验证。这个插件提供了丰富的选项和方法,使得...
在Web开发中,用户输入的数据验证是必不可少的一个环节,它能够确保用户提交的信息符合预设的规则,从而避免数据错误和安全问题。jQuery Validate是一个强大的、易于使用的jQuery插件,专为表单验证而设计。本文将...
该插件的核心优势在于其轻量级的代码和易于使用的API,允许开发者通过少量的JavaScript代码实现多样化的验证规则。 首先,使用jQuery_formValidator需要引入几个必要的文件,包括: 1. jquery-1.3.2.js:jQuery库,...
下面是一个简单的示例,演示如何使用JQuery验证框架来验证一个包含姓名和邮箱的表单: ```html <!DOCTYPE html> <title>JQuery验证框架示例 <script src="js/jquery.min.js"> <script src="js/jquery....
在HTML中,表单元素通常通过`<form>`标签定义,它们包含各种输入控件如`<input>`、`<select>`和`<textarea>`等。这些控件的`required`属性可以设置为true,以在提交表单前强制验证非空输入。然而,这种基本验证往往...
**jQuery Validation插件详解** ...在ASP.NET环境中,jQuery Validation可以与ASP.NET的验证控件结合使用。通过设置`ClientValidationEnabled`属性为`true`,使服务器端验证与客户端验证同步。 ```csharp ...
jQuery formValidator2.2.4是一款广泛使用的轻量级表单验证插件,它提供了丰富的验证规则和灵活的自定义功能。在这个修改版中,开发者已经对原有的样式进行了调整,去除了之前的红色警告样式和箭头宽度,使得整体...
invalidHandler: function(form, validator) { // 处理验证失败的逻辑 }, ``` 6. **附加方法** 除了自动验证,还有`valid()`、`invalid()`、`resetForm()`等方法,用于手动触发验证、设置验证状态和重置表单。...
通过使用jQuery,开发者可以轻松地实现DOM操作、事件处理、动画效果和Ajax交互。 ### 2. jQuery表单验证原理 jQuery表单验证通常基于jQuery插件,如jQuery Validation Plugin,它提供了强大的验证规则和自定义错误...