javascript - 代码可以在 JSfiddle 上运行，但不能在我的网站上运行

Question

jsfiddle上的以下代码:http://jsfiddle.net/mppcb/1/在那里工作得很好，但是当我在我的网站上复制相同的代码(http://www.tuivel.com/upload/index.html)时，它就不起作用了:

HTML:

<form id="myform" novalidate="novalidate">
    <input type="text" name="field1[]">
    <br>
    <input type="text" name="field2[]">
    <br>
    <input type="text" name="field3[]">
    <br>
    <input type="file" name="field4[]" id="filename">
    <br>
    <input type="submit">
</form>

JS 和 jQuery:

<script type="text/javascript">
$(document).ready(function() {

    function Checksize(){
    var iSize = ($("#filename")[0].files[0].size);
       alert(iSize);
     if (iSize < 2097152.00) 
         { 
        alert("Es menor a 2 megabytes!!!!");
         return true;
         }
       else{
           alert("Es mayor a 2mb!!");
           return false;
           }
    }


function Checkfiles() {
        var fup = document.getElementById('filename');
        var fileName = fup.value;
        var ext = fileName.substring(fileName.lastIndexOf('.') + 1);
        var chkext = ext.toLowerCase();
        //var fileSize = fup.size;

    if(chkext=="gif" || chkext=="jpg" || chkext=="jpeg" || chkext=="png") {
        alert("Successfully Uploaded!");
        return true;
    }
    else {
        alert("Upload GIF, PNG, JPG Images only");
        return false;
    }
} 

    $('#myform').validate({
        rules: {
            "field1[]": {
                required: true,
                minlength: 5
            },
            "field2[]": {
                required: true,
                url: true
            },
            "field3[]": {
                required: true,
                email: true
            },
            "field4[]": {
                required: true,
                minlength: 5
            }
        },
        submitHandler: function(form) { // for demo
            var result=Checkfiles();
            var size=Checksize();
            alert(size);
            alert(result);
            if(size==true && result==true) {
                alert("Ya se subió!!!");
                return true;
            } else {
                alert("Por algo no pasó!!!");
                return false;
            }

        }
    });

});
</script>

我还包括 jQuery 库:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

想知道为什么不适合我吗？提前致谢。

Answer 1

$('#myform').validate({

您没有在网站上使用 validate 插件，但 jsFiddle 的作者却使用了:

要解决此问题，只需下载 validate 插件，然后将其添加到 HTML 中的脚本之前:

<script type="text/javascript" src="path/to/validate/plugin.js"></script>

为了将来引用，您可以通过单击 jsFiddle 左侧边栏的“外部资源”来查看所有包含的插件。