关于引入多个jquery冲突的问题(附一个很好用的validate前端验证框架及使用方法)
废话不多说,进入正题:
如果一个jsp中想要使用两个不同版本的jquery怎么办呢?客官往下看:
<script src="${ctxStatic}/jquery/jquery-1.8.3.min.js" type="text/javascript"></script> <script src="${ctxStatic}/formValidator.2.5.2/js/jquery-1.6.min.js" type="text/javascript"></script>
如果我想使用1.8.3版本的jquery
那么就在引入1.8.3的<script></script>下面加上如下代码:
<script>
var jq = $.noConflict();
jq(document).ready(function(){
// binds form submission and fields to the validation engine
jq("#aaab").validationEngine(); });
</script>
记住一定要紧挨着引入1.8.3的js
如果放在1.6版本下面,那么所定义的jq就是1.6版本的了
当然,如果我们的项目是通过include标签引入的全局jquery 而当前jsp页面又新引入了一个jquery,那么上段代码放在什么位置都是无所谓的,所定义的jq都是当前页面新引入的jquery
下面是例子:(一个很方便的validate前端验证:想要使用验证直接引入下列文件:)
<link rel="stylesheet" href="${ctxStatic}/formValidator.2.5.2/css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" href="${ctxStatic}/formValidator.2.5.2/css/template.css" type="text/css"/> <script src="${ctxStatic}/formValidator.2.5.2/js/jquery-1.6.min.js" type="text/javascript"></script> <script src="${ctxStatic}/formValidator.2.5.2/js/languages/jquery.validationEngine-zh_CN.js" type="text/javascript" charset="utf-8">
</script>
<script src="${ctxStatic}/formValidator.2.5.2/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
</script>
然后在需要验证的表单class加上validate[required] (必填项验证)
<form action="www.baidu.com" id="aaab" method="post">
<input type="text" value="" placeholder="请输入姓名" class="validate[required] validate[email]"/>
<input type="submit" value="提交"/>
</form>
下面是我代码放置位置以及前端页面展示图:
<link rel="stylesheet" href="${ctxStatic}/formValidator.2.5.2/css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" href="${ctxStatic}/formValidator.2.5.2/css/template.css" type="text/css"/>
<script src="${ctxStatic}/jquery/jquery-1.8.3.min.js" type="text/javascript"></script> <script src="${ctxStatic}/formValidator.2.5.2/js/jquery-1.6.min.js" type="text/javascript"></script>
<script>
var jq = $.noConflict();
jq(document).ready(function(){
// binds form submission and fields to the validation engine
jq("#aaab").validationEngine(); });
</script>
<script src="${ctxStatic}/formValidator.2.5.2/js/languages/jquery.validationEngine-zh_CN.js" type="text/javascript" charset="utf-8">
</script>
<script src="${ctxStatic}/formValidator.2.5.2/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
</script>
<link rel="stylesheet" href="${ctxStatic}/formValidator.2.5.2/css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" href="${ctxStatic}/formValidator.2.5.2/css/template.css" type="text/css"/>
<script src="${ctxStatic}/jquery/jquery-1.8.3.min.js" type="text/javascript"></script> <script>
var jq = $.noConflict();
jq(document).ready(function(){
// binds form submission and fields to the validation engine
jq("#aaab").validationEngine(); });
</script>
<script src="${ctxStatic}/formValidator.2.5.2/js/jquery-1.6.min.js" type="text/javascript"></script>
<script src="${ctxStatic}/formValidator.2.5.2/js/languages/jquery.validationEngine-zh_CN.js" type="text/javascript" charset="utf-8">
</script>
<script src="${ctxStatic}/formValidator.2.5.2/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
</script>
可以看到我把定义jq的代码放在1.8.3版jquery下面就完全失去效果了(我的这个validate前端验证框架是不支持1.8.3版jquery的)
下面是我的验证框架传送门:
http://files.cnblogs.com/files/fengwenzhee/formValidator.2.5.2.rar
关于引入多个jquery冲突的问题(附一个很好用的validate前端验证框架及使用方法)的更多相关文章
- jquery前端验证框架
1.validationEngine.jquery.css 样式包 2.jquery.validationEngine-zh_CN.js 中文语言包 3.jquery.validationEngin ...
- jquery.validate.js 验证框架详解
项目中遇到这个js框架 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
- jQuery Validate前端验证
我们经常看到如下效果,那么它是如何实现的呢?看下面: 废话少说,直接上代码,大家直接Copy就能看到上面的效果啦. <html> <head> <title>验证内 ...
- JQuery冲突问题,以及含有jquery的框架与jquery冲突
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- ecshop之transport和jquery冲突之完美解决方案
众所周知:ecshop的transport.js文件和Jquery是冲突的,两个文件不能同时调用,现给出以下完美解决方案:原因分析:在transport.js文件中,大概 580行到590行之间,这个 ...
- Ecshop与Jquery冲突的完美解决方案
ecshop把AJAX事件和JSON解析的模块放在common/transport.js之中,可以说它也有自己封装的一套工具,这其实是很正常的. 但恰恰的,在封装JSON各种方法的同时对objec ...
- ECSHOP中transport.js和jquery冲突的解决方法
jQuery 和global.js 冲突 百度和google多次,根据网上的大多数建议和自己测试,解决办法如下:删除global.js 或者global.js 文件的10-13行屏蔽//Object. ...
- discuz教程:discuz模板js与jQuery冲突的解决方案
今天在做discuz模板的时候,用到jquery的时候和原来主题js冲突.这个主要是Discuz X使用了$(id)作为dom节点的获取方法,而$符号刚好与jQuery的默认符号相冲突. 以下是基于之 ...
- jquery冲突细节
使用jquery报一个错误,之前也遇到过,今天记录下来,方便以后使用 Uncaught TypeError: Object #<Object> has no method 'test' 这 ...
随机推荐
- C#基础知识-编程思想之封装(七)
既然是学习面向对象的编程那自然要了解面向对象中的三大基石,封装.继承和多态. 我觉得要解释这三大基本概念用一篇文档很难解释清楚,想要具体形象的去了解,还是需要每一个概念用一个篇幅来说明,将封装.继承和 ...
- 【CSS入门基础,有需要的看过来哦】心境,心静,不轻言放弃!---致CSS
整理一下近一周学习的有关CSS的基础知识笔记: CSS语法必须写在<style>标签中哦~/*注释*/ [CSS常用背景属性]background background-color:背景色 ...
- 回归-LDA与QDA
作者:桂. 时间:2017-05-23 06:37:31 链接:http://www.cnblogs.com/xingshansi/p/6892317.html 前言 仍然是python库函数sci ...
- Spring MVC和Struts2的比较
Spring MVC PK Struts2 我们用struts2时采用的传统的配置文件的方式,并没有使用传说中的0配置.spring3 mvc可以认为已经100%零配置了(除了配置spring mvc ...
- ES6核心内容精讲--快速实践ES6(一)
前言 本文大量参考了阮一峰老师的开源教程ECMAScript6入门,适合新手入门或者对ES6常用知识点进行全面回顾,目标是以较少的篇幅涵盖ES6及部分ES7在实践中的绝大多数使用场景.更全面.更深入的 ...
- Java IO流之打印流与标准流
一.打印流 1.1打印流特点与构造方法 1)PrintStream和PrintWriter类都提供了一系列重载的print和println方法来输出各种类型的数据. 2)PrintStream和Pri ...
- 玩转nodeJS系列:使用原生API实现简单灵活高效的路由功能(支持nodeJs单机集群),nodeJS本就应该这样轻快
前言: 使用nodeJS原生API实现快速灵活路由,方便与其他库/框架进行整合: 1.原生API,简洁高效的轻度封装,加速路由解析,nodeJS本就应该这样轻快 2.不包含任何第三方库/框架,可以灵活 ...
- 关于table 冻结 标头及列---js控制方法
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- java之真假分页
真分页(要的是什么范围的记录在数据库查的时候就只查这几条记录):select s.* from (select *,row_number() over(order by SLoginId) as ro ...
- Oracle exp/imp数据导入导出工具基本用法
一.获取帮助 exp/imp help=y 二.数据导出 1.将数据库完全导出,设置full选项exp system/manager@orcl file=d:\db.dmp full=y 2.导出数据 ...