jQuery 在一种情况下有效，但在 JSFiddle 中的另一种情况下无效答案

【问题标题】：jQuery works in one case, but doesn't work in the other case in JSFiddlejQuery 在一种情况下有效，但在 JSFiddle 中的另一种情况下无效
【发布时间】：2016-06-23 02:05:29
【问题描述】：

我在带有 jQuery 验证的 JSFiddle 中为我找到了一个很好的例子。但是当我在工作代码的相似性上制作另一个代码时 - 它不起作用。我做错了什么？

<form method="POST" action="contact-form-submission.php" class="form-horizontal" id="contact-form">

        <div class="control-group">
            <label class="control-label" for="email">Email Address</label>
            <div class="controls">
                <input type="text" name="email" id="email" placeholder="Email">
            </div>
        </div>
         <div class="control-group">
            <div class="controls">
                <input type="password" name="password" id="password" placeholder="Password">
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <input type="password" name="confPassword" id="confPassword" placeholder="Confirm Password">
            </div>
        </div>
        <div class="form-actions">
            <input type="hidden" name="save" value="contact">
</div>
</form>


$(document).ready(function () {

    $('#contact-form').validate({
        rules: {

            email: {
                required: true,
                email: true
            },
            password: {
                minlength: 2,
                required: true
            },
            confPassword: {
                    minlenth: 2,
                equalTo : "#password"
            }
        },
        highlight: function (element) {
            $(element).closest('.control-group').removeClass('success').addClass('error');
        },
        success: function (element) {
            element.text('OK!').addClass('valid')
                .closest('.control-group').removeClass('error').addClass('success');
        }
    });

});

并连接了这些 plagins：

jquery.validate.js 附加方法.js bootstrap-combined.min.css bootstrap.min.js

working code, my code

【问题讨论】：

如果您检查控制台，您会发现为什么您的版本不起作用；您不包括 jQuery，并且您添加的外部资源是通过 http:// URL 加载的。要让他们在 jsFiddle 中工作，您需要使用 https://。一旦解决了这些配置问题，理论上它应该可以工作。
我冒昧地假设你的 jQuery sn-p 没有用<script> 标签封装。
@jmsweb jsfiddle 自动将 Javascript 代码放入 <script>。
Rory McCrossan，在外部资源的工作代码中添加了http://
工作代码中的@jmsweb <script> 标签也丢失了

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

关于访问协议要记住一点，您的 JSFiddle 是通过 HTTPS 协议访问的。

你的 JSFiddle

您的 JSFiddle 有使用 HTTP 协议的外部资源。我建议更新资源以使用 HTTPS 而不是 HTTP 协议，因为 JSFiddle 的控制台输出显示 Blocked loading mixed active content 错误。
确保您的 JSFiddle JavaScript 选项应该加载 jQuery。您可以选择符合您要求的选项。

或者，您可以通过 HTTP 协议访问您的 JSFiddle：http://jsfiddle.net/5WMff/。

本地服务器

要在本地服务器上工作，我建议下载每个外部资源的副本并保存在 Web 应用程序可访问的文件夹中，如屏幕截图所示，并更新 <head> 标签以包含 <script> 和 <link/> 标签用于加载外部资源。

<head>
    <script type="text/javascript" src="/test-web/scripts/jquery/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="/test-web/scripts/jquery/jquery.validate-1.11.1.js"></script>
    <script type="text/javascript" src="/test-web/scripts/jquery/additional-methods-1.11.1.js"></script>
    <link rel="stylesheet" type="text/css" href="/test-web/scripts/jquery/bootstrap-combined.min-2.3.2.css"/>
    <script type="text/javascript" src="/test-web/scripts/jquery/bootstrap.min-2.3.2.js"></script>
</head>

或者，您可以使用用于src 或href 属性的URL 从Internet 获取外部资源。

这在我的本地服务器上有效，如下所示。请让我们知道这是否对您有用。

错误的电子邮件

正确的电子邮件

【讨论】：

如何使用 HTTP 协议添加引导程序？当我在 Plunker 中找到 bootstrap-combined.min.css 时，我访问了网站 netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/…
尝试通过 HTTP 协议访问您的 JSFiddle，即jsfiddle.net/5WMff。它应该可以工作。
是的，它在那里工作，但是当我在我的应用程序中添加代码时 - 它不起作用。我想了解该示例中的 in 工作原理
我已经更新了对您问题的回答。请让我们知道这是否对您有用。
无需任何操作即可工作 - aaa@aa - 有效的电子邮件，但在示例中只有 aaa@aa.a - 正确的电子邮件