代码适用于JSfiddle,但不适用于我的网站

时间:2013-04-23 00:17:00

标签: javascript jquery html

关于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&amp; 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>

难怪为什么不为我工作? 提前谢谢。

1 个答案:

答案 0 :(得分:3)

$('#myform').validate({

您没有在您的网站上使用validate插件,但jsFiddle的作者确实:

jsfiddle validate plugin

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

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

为了将来参考,您可以通过点击&#34;外部资源&#34;来查看所有包含的插件。在jsFiddle的左侧边栏。