zoukankan      html  css  js  c++  java
  • 关于引入多个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

     
  • 相关阅读:
    HOJ 2139 Spiderman's workout(动态规划)
    FZU 2107 Hua Rong Dao(dfs)
    Java 第十一届 蓝桥杯 省模拟赛 计算机存储中有多少字节
    Java 第十一届 蓝桥杯 省模拟赛 计算机存储中有多少字节
    Java 第十一届 蓝桥杯 省模拟赛 计算机存储中有多少字节
    Java 第十一届 蓝桥杯 省模拟赛 合法括号序列
    Java 第十一届 蓝桥杯 省模拟赛 合法括号序列
    Java 第十一届 蓝桥杯 省模拟赛 合法括号序列
    Java 第十一届 蓝桥杯 省模拟赛 无向连通图最少包含多少条边
    Java 第十一届 蓝桥杯 省模拟赛 无向连通图最少包含多少条边
  • 原文地址:https://www.cnblogs.com/fengwenzhee/p/6961675.html
Copyright © 2011-2022 走看看