javascript - 使用 onsubmit ="return validate()"函数时文件验证不起作用

Question

我的其他验证工作正常，如果我在其中一个输入上放置 onchange() 函数并只放置我的图像文件验证，那么它似乎可以工作，但是当我将相同的代码粘贴到 onsubmit="return validate() 中时“当我按下提交并输入错误值时，它只会提交表单并转到下一页。

我猜有一个错误，我检查了 chrome 中的控制台，但没有显示任何内容，我不太擅长使用 javascript 进行错误处理，所以也许我错过了一些东西。这是我的代码，输入字段验证工作正常。

这是一个 fiddle ，但我无法让它工作，所以不确定 fiddle 是否适合表单，我在浏览器中检查了下面的确切代码，它在 4 个输入字段上进行验证，但是当太图像是不是它刚刚提交的有效图像。 http://jsfiddle.net/FTV5p/4/

<form id="fm-form" name="fm-form" onsubmit="return validate()" method="post" action="#" enctype="multipart/form-data">

<fieldset>
<legend>Personal information</legend>
<label for="fm-username">* Username:</label>
<input name="fm-username" id="fm-username" type="text" />
<label for="fm-email">* Email:</label>
<input id="fm-email" name="fm-email" type="text" />
</fieldset>

<fieldset>
<legend>Information</legend>
<label for="fm-tool_name">* Tool Name:</label>
<input id="fm-tool_name" name="fm-tool_name" type="text" />

<label for="fm-tool_desc">* Description:</label>
  <textarea rows="4" cols="50" id="fm-tool_desc" name="fm-tool_desc" /></textarea>

  <label for="fm-tool_game_type">* Game Type:</label>
  <select id="fm-tool_game_type" name="fm-tool_game_type">
    <option value="All" selected="selected">All Tool Game Types</option>
    <option value="One">One</option>
    <option value="Two">Two</option>
  </select>

  <label for="fm-tool_table_type">* Table Type:</label>
  <select  id="fm-tool_table_type" name="fm-tool_table_type">
    <option value="All" selected="selected">All Table Types</option>
    <option value="Flat">Flat</option>
    <option value="Round">Round</option>
  </select>

  <label for="fm-tool_table_size">* Table Size:</label>
  <select id="fm-tool_table_size" name="fm-tool_table_size">
    <option value="All" selected="selected">All Table Sizes</option>
    <option value="1ft">1 foot</option>
    <option value="3ft">3 foot</option>
    <option value="6ft">6 foot</option>
  </select>

  <label for="fm-tool_file">* Tool File:</label>
  <input id="fm-tool_file" name="fm-tool_file" type="file" />
  <label for="fm-tool_image">* Tool Image:</label>
  <input id="fm-tool_image" name="fm-tool_image" type="file" />
</fieldset>

<div id="sub">
  <input id="upload_tool" name="upload_tool" value="Submit tool" type="submit" />
</div>

Javascript

function validate()
{
   if( document.getElementById('fm-username').value == "" || document.getElementById('fm-username').length < 4 || document.getElementById('fm-username').value > 20){
     alert( "The username should be between 4 and 20 characters!" );
     document.getElementById('fm-username').focus() ;
     return false;
   }

   var str=document.getElementById('fm-email').value;
   var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
   if (!filter.test(str)) {
     alert( "This is not a valid email format" );
     document.getElementById('fm-email').focus() ;
     return false;
   }

   var str=document.getElementById('fm-tool_name').value;
   var regexp = /^[a-zA-Z0-9-_]+$/;
   if (str.search(regexp) == -1){
     alert( "Only alpha numeric values and _ or - are allowed in the tool name" );
     document.getElementById('fm-tool_name').focus() ;
     return false;
   }

   if( document.getElementById('fm-tool_name').value == "" || document.getElementById('fm-tool_name').length < 4 || document.getElementById('fm-tool_name').value > 30){
     alert( "The Tool name should be between 4 and 30 characters" );
     document.getElementById('fm-tool_name').focus() ;
     return false;
   }

   if( document.getElementById('fm-tool_desc').value == "" || document.getElementById('fm-fm-tool_desc').length < 4 || document.getElementById('fm-tool_desc').value > 30){
     alert( "The Description should be between 4 and 65,000 characters" );
     document.getElementById('fm-tool_desc').focus() ;
     return false;
   }

   var file_value = document.getElementById("fm-tool_image").value;
   alert("fup "+ file_value);

    var ext = file_value.substring(file_value.lastIndexOf('.') + 1);
    alert("ext "+ ext);

    if(ext == "gif" || ext == "GIF" || ext == "JPEG" || ext == "jpeg" || ext == "jpg" || ext == "JPG" || ext == "png")
    {
    alert("looks good");
    } else{
    return false;
    }


   return(true);

}

还有CSS

form {
    margin : 0 auto;
    text-align : center;
    width : 450px;
    font-size : 1.2em;
    font : 85.5%/1.5 arial, verdana, helvetica, tahoma, sans-serif;
}

form p {
    text-align : left;
    margin : 0.5em 0;
}

fieldset, #sub {
    margin : 1em 0;
    padding : 0 1em .5em;
    border : 0 none;
    border-top : #cccccc 1px solid;
}

#sub {
    border : 0 none;
}

legend {
    margin : 1em;
    padding : 0 1.5em;
    color : #003366;
    background : transparent;
    font-size : 1.1em;
    font-weight : bold;
}

legend.p {
    text-align : left;
    margin : 0.5em 0;
    padding : 0;
    color : #333333;
    font-size : 1.2em;
    font-weight : normal;
}

label {
    float : left;
    width : 110px;
    padding : 0 1em;
    text-align : right;
}

fieldset input, textarea, select {
    width : 250px;
    border-top : #555555 1px solid;
    border-left : #555555 1px solid;
    border-bottom : #cccccc 1px solid;
    border-right : #cccccc 1px solid;
    padding : 1px;
    color : #333333;
    margin-bottom : 0.5em;
}

.fm-multi {
    margin : 5px 0;
    border : 0 none;
    width : 100%;
}

.fm-multi input {
    width : auto;
    margin-bottom : 0;
    border : 0 none;
}

.fm-multi label {
    display : block;
    width : 200px;
    padding-left : 5em;
    text-align : left;
    margin : 0 auto 0.5em;
}

#fm-submit {
    clear : both;
    text-align : center;
    border : #333333 1px solid;
    padding : 1px;
    background : #555555;
    color : #ffffff;
    width : 7em;
    margin : 1em auto;
}

input:focus, textarea:focus {
    background : #efefef;
    color : #000000;
}

fieldset .fm-req {
    font-weight : bold;
}

Answer 1

您的 JSFiddle 设置为运行 onload 代码，因此您尝试调用的函数不在全局范围内。浏览器抛出错误 Uncaught ReferenceError: validate is not Defined 并提交。

使用 select 方法更改 fiddle 加载 JavaScript 的方式，将代码放入 head 中。