- 浏览: 531568 次
- 性别:
- 来自: 天津
文章分类
- 全部博客 (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 2134一、logback的介绍 Logback是由log4j ... -
jquery formValidator 表单验证插件, ajax无法传值到后台问题的解决
2016-06-24 17:10 611data : { count: Math.random ... -
thymeleaf与spring整合
2016-06-15 10:08 11841、使用的是Spring EL而不是Ognl。2、访问上下文 ... -
SpringMVC 400 Bad Request 问题
2016-06-15 09:11 1907在提交表单时,发生400错误,并未进入save方法。 ... -
bootstrap3自定义popover显示的内容
2016-05-27 11:14 1077<script type="text/jav ... -
JS 中面向对象的5种写法
2015-08-13 15:54 645定义Circle类,拥有成员变量r,常量PI和计算面积的成员 ... -
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2015-07-31 15:09 4076动态载入 JavaScript/Csss 文件 传统加载外部 ... -
Java_Ant详解
2015-06-15 16:54 6881,什么是antant是构建工 ... -
httpClient通过代理(Http Proxy)进行请求
2014-09-16 14:18 1156httpClient通过代理(Http Proxy)进行请求 ... -
httpclient上传文件及传参数
2014-09-16 11:07 11513用到的包有commons-httpclient-3.0.1. ... -
简单返回顶部代码及注释说明
2014-07-16 10:44 913最近做了一个排行榜页 ... -
深入浅出JSONP:解决AJAX跨域问题
2014-04-16 11:00 772取不到数据! 上周客户新买了服务器,原本在旧的服务器上放着 ... -
Progress Bar Plugin
2013-12-26 10:04 787from: http://digitalbush.com/p ... -
javascript cookie
2013-11-08 09:18 1006cookie概述在上一节, ... -
plupload实现多图片上传
2013-07-19 16:12 23201最近发现一个非常牛的上传组件(http://www.plu ... -
调用axis2 WebService三种方法
2013-06-28 13:41 1744第一:简单的使用axis2包自己实现调用 package ... -
java-jsch实现sftp文件操作
2013-06-26 13:55 3615(曾在天涯)的文章详细讲解了jsch中的函数以及用法 ht ... -
url encode的问题
2012-11-06 08:27 58931.urlencode和decode 字符的编码和解码在有中 ... -
通过Class Name获取一个对象的数组
2012-09-24 10:42 3897DOM 提供了一个名为 getElementById() ... -
Lucene3.0 初窥(转载)
2012-08-04 21:38 959【Lucene3.0 初窥】全文检索的基本原理 ...
相关推荐
jquery.validate表单验证密码完整例子(带密码强度显示)
jquery验证插件Validator
NULL 博文链接:https://yuhe.iteye.com/blog/1433271
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来...
NULL 博文链接:https://nassir.iteye.com/blog/1112713
jquery的验证框架。一个很好用的jquery验证框架,使用起来也很简单
jquery的校验,喜欢的人们拿去用吧,个人认为还不错
个人感觉非常好用且NB的验证控件。 支持多语言, 支持数字、字母、电话等常规验证 支持ajax认证 支持自定义 。 还有巨多好用的功能等待发现
// 手机号码验证 jQuery.validator.addMethod(“mobile”, function(value, element) { var length = value.length; var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/ return this.optional(element) || ...
将Winsteps.Validator.dll引入到项目中; 2. 将WinValidatorFiles文件夹拷贝到web项目的根目录下; 2. 在.cs文件中加入引用using Winsteps.Validator; 3. 在Page_Load事件中插入如下代码: <br>WinVal ...
jQuery.validator.addMethod("idCardNo", function (value, element) { //验证身份证号方法 var testIdCardNo = function (idcard) { var Errors = new Array("验证通过!", "身份证号码位数不对!", "身份证号码...
jquery.validate1.12.0.js
org.glassfish.bean.validator-3.0.0.jar
Jquery FormValiDator 3.3
ASP.NET源码——步步为赢气泡验证控件(Winsteps.Validator).zip
jquery.validate使用攻略 1 第一章 jquery.validate使用攻略 1 第二章 jQuery.validate.js API 7 Custom selectors 7 Utilities 8 Validator 8 List of built-in Validation methods 9 validate ()的可选项 11 debug...
jar包大小:135KB commons-validator-1.3.1.jar jar包大小:93KB commons-transaction-1.2.jar jar包大小:141KB commons-scxml-0.6.jar jar包大小:254KB commons-primitives-1.0.jar jar包大小:60KB commons-pool-1.3....
ASP.NET-[其他类别]步步为赢气泡验证控件(Winsteps.Validator).zip
jQuery.validator.addMethod("isIdCardNo", function(value, element) { return this.optional(element) || idCardNoUtil.checkIdCardNo(value); }, "请正确输入您的身份证号码"); //护照编号验证 jQuery....