`
suxing
  • 浏览: 202143 次
  • 性别: Icon_minigender_1
  • 来自: 遵义
社区版块
存档分类
最新评论

对jquery验证框架form validation的改进

阅读更多

不错的jquery验证框架-form validation使用总结 一帖中作者对英文原版 进行改进和汉化,但无论是原版和这个“汉化版”在ie6下验证提示都会被select标签遮挡,这本是ie6的bug,参照bgiframe插件 的代码,我进行了一些修改。

 

 	settings = jQuery.extend({
		allrules:allRules,
		validationEventTriggers:"blur",					
		inlineValidation: true,	
		returnIsValid:false,
		animateSubmit:true,
		unbindEngine:true,
		ajaxSubmit: false,
		promptPosition: "topRight",	// OPENNING BOX POSITION, IMPLEMENTED: topLeft, topRight, bottomLeft, centerRight, bottomRight
		success : false,
		failure : function() {},
		fixIE6Select: "auto"  //auto,fix,unfix
	}, settings);

 配置上增加了fixIE6Select参数,默认为"auto"即自动判断页面中有没有select标签,有则启用。

 

 

		if($.browser.msie && /6.0/.test(navigator.userAgent)){
		   var selectNum=$('select').length;
		   var IE6html='<iframe frameborder="0" tabindex="-1" src="javascript:false;" ';
		   IE6html+='style="display:block;position:absolute;z-index:-1;';
		   IE6html+='top:expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\');';
		   IE6html+='left:expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\'px\');';
		   IE6html+='width:expression(this.parentNode.offsetWidth+\'px\');';
		   IE6html+='height:expression($(this).parent().find(\'.formErrorContent\').outerHeight()+\'px\');" />';
		   switch($.validationEngine.settings.fixIE6Select){
		      case "unfix":
				 break;
			  case "fix":
			     $(divFormError).append(IE6html);
				 break;
			  default:  //auto
			     if(selectNum>0){
			        $(divFormError).append(IE6html);
				 }
		   }     
		}

 在验证提示文本内容下添加一层iframe。

分享到:
评论
4 楼 jquery_gz123 2010-03-22  
你好,不好意思,好久没上论坛了。
一般有这样的情况,用户自定义函数(比如校验页面上两个元素)返回true或者false,返回false时需要校验,否则不需要。不清楚是否有这样的功能?
3 楼 suxing 2010-03-06  
jquery_gz123 写道
传入方法校验,以及页面元素有上下文关系的校验貌似不行。

可否讲得具体些,我好像没发这个问题。
2 楼 matychen 2010-03-03  
有空试一试
1 楼 jquery_gz123 2010-03-02  
传入方法校验,以及页面元素有上下文关系的校验貌似不行。

相关推荐

    使用FormValidation进行表单验证

    使用FormValidation进行表单验证,使用到了jQuery和Bootstrap框架等相关技术

    jQuery Validation Plugin验证插件手动验证

    jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,并且对国际化也有很好的支持。 正常的验证模式如下: &lt;form id="ff" action=...

    表单验证框架使用及说明

    需验证页面引入jquery和插件js、css ... 初始化插件 1 $(document).ready(function() { 2 $("#formID").validationEngine() 3 }) 或者带相关属性: $(document).ready(function() { $("#formID")....

    jQuery Validation实例代码 让验证变得如此容易

    使用客户端验证可以有效的减少数据往返服务器和客户端的次数,有利于提高服务器的资源利用路,并且还能够给用户直观,快速的回应。 在Web 2.0时代,这显得尤其重要,我想大家一定和我一样讨厌用基础的javascript写着...

    jquery-form-validator-plugin:Jquery 表单验证插件

    jquery-form-validator-plugin :用于字段验证。 使用简单的节点 js 服务器进行设置 下面是关于演示应用程序的草稿。 前端框架草案: Bootstrap CSS Google Fonts DOM / UI JQuery [jquery-1.10.2] Front end ...

    jquery-form-manager:jQuery 插件框架为 HTML 表单及其输入提供全面的界面

    jQuery 表单管理器 jQuery 表单管理器插件提供了一个综合框架,不仅可以处理标准 HTML 表单及其输入,还可以处理用户定义的输入元素。 ###Overview 一段时间以来,W3C 一直致力于...invalidate :对否定验证结果的视觉

    jquery.dvalidate.js:自用的超简单表单验证框架,零配置不写js不污染页面样式直接就是lou

    自用的超简单表单验证框架,零配置不写js不污染页面样式直接就是lou 在线示例: 使用方法 1.引入js 2.在需要验证的表单加入属性“validate” &lt;form validate&gt; &lt;!--your field here--&gt; &lt;/form&gt; 3....

    jquery插件bootstrapValidator表单验证详解

    看作者的github,这款插件已经不再更新了,而推荐使用FormValidation,不过现在还是先介绍一下BootstrapValidator的使用。 准备工作 BootstrapValidator文档地址:http://bv.doc.javake.cn/ 下载源码后,将其中的...

    jbvalidator:HTML 5和Bootstrap Jquery表单验证插件

    jbvalidator是一个全新的基于jQuery的表单验证插件,它是为最新的Bootstrap 5框架创建的,并且支持客户端和服务器端验证。 多种语言。 自定义错误消息。 自定义验证规则。 通过HTML数据属性易于使用。 安装 npm ...

    JsonFormBuilder:MODX JsonFormBuilder

    使用片段(带有一些基本PHP命令),可以更快地构建复杂的表单,并且可以自动使用jQuery插件的“ Validation”方法。 JsonFormBuilder的主要目的是通过简单的JSON结构与PHP中的任何自定义验证方法混合来简化表单...

    ligerui-LigerRM-V2

    validate.ashx ---- 通用的验证数据验证入口(针对jQuery.validation remote验证) 4,完善的数据权限控制机制。除了基本的 (用户角色) =&gt; (模块功能) 这类的功能权限控制,还在数据请求入口做了一点小动作,根据...

    java面试宝典

    166、如何用JQuery进行表单验证? 39 167、Prototype如何实现页面局部定时刷新? 40 168、Prototype如何为一个Ajax添加一个参数? 40 169、Ajax请求总共有多少种Callback? 41 170、Javascript如何发送一个Ajax请求?...

    千方百计笔试题大全

    166、如何用JQuery进行表单验证? 39 167、Prototype如何实现页面局部定时刷新? 40 168、Prototype如何为一个Ajax添加一个参数? 40 169、Ajax请求总共有多少种Callback? 41 170、Javascript如何发送一个Ajax请求?...

    nglp-angular-material-landing-page:NGLP是Angular材质的着陆页

    产品特点材料设计Angular Flex Layout的移动和桌面响应式布局手机上的Sidenav组件移动和桌面上的粘性导航对滚动事件做出React跨浏览器动画自定义角度材质主题模态对话框联系表格联系表格字段验证启用触摸功能的...

Global site tag (gtag.js) - Google Analytics