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

     
  • 相关阅读:
    项目架构
    RoadFlow Asp.Net Core工作流配置文件说明
    RoadFlowCore 解决方案介绍及开发概述
    RoadFlow2.7.5 MyController.cs
    RoadFlow开源工作流源码-项目架构分析
    ORACLE EXP-00011:表不存在的分析和解决方案
    Caused by: java.sql.SQLSyntaxErrorException: ORA-00932: 数据类型不一致: 应为 NUMBER, 但却获得 BINARY
    OpenCV4Android释疑: 透析Android以JNI调OpenCV的三种方式(让OpenCVManager永不困扰)
    Swift字典
    [iOS翻译]《iOS7 by Tutorials》在Xcode 5里使用单元測试(上)
  • 原文地址:https://www.cnblogs.com/fengwenzhee/p/6961675.html
Copyright © 2011-2022 走看看