0

Internet Explorer のフォーム検証で問題が発生しています。

次のスクリプトでは、 でフォームを作成し、フォームをHTML送信する前にフォームの検証を実行する JavaScript ロジックを記述しています。

このスクリプトはフォームを適切に検証し、Chrome と Firefox でのみ警告を発しますが、Internet Explorer では警告を発しません。

http://jsfiddle.net/PKLQn/121/

var error="";

function Checkfiles() {
    var fup = document.getElementById('flUpload');
    var fileName = fup.value;
    var ext = fileName.substring(fileName.lastIndexOf('.') + 1);
    var chkext = ext.toLowerCase();
    //var mime = fup.type;
    //if (mime=='image/png' || mime=='image/jpeg' || mime=='image/gif') {
    if(chkext=="gif" || chkext=="jpg" || chkext=="jpeg" || chkext=="png") { 
        return true;
    } else { return false; }
} // Checkfiles

function Checksize() { 
    var iSize;
    if ($("#flUpload")[0].files[0]){
        iSize = ($("#flUpload")[0].files[0].size / 1024);
    }
    if(Checkfiles()==true) {
        if (iSize < 51200.00) { 
            return true;
        }
        else{
            return false;
        }
    } else { error += "- Upload GIF, PNG, JPG images only, smaller than 50 KB."; return false; }
} //Checksize

function Checkfields() {
    // Validate Email
    var email = $("#email").val();
    if (/(.+)@(.+){2,}\.(.+){2,}/.test(email)) { } else { error += "- Please enter a valid email address (eg. http://youwebsite.com)\n"; }
    // Validate Title
    var title = $("#title").val();
    if (title=="" || title==null) { error += "- Please enter a valid title for your advertisement (Max. 60 chars.)\n"; }    
    // Validate URL
    var url = $("#url").val();
    if (/^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/.test(url)) { } else { error += "- Please enter a valid URL.\n"; }
}// Checkfields

function newfuncion() {
        var fields = Checkfields();
        var size = Checksize();
        var files = Checkfiles();
        if(fields==true && size==true && files==true) {
            return true;
        } else {
            if(error!=""){alert(error); error=""; return false;} else {return true;}
            return false;
        }
} //Juntar todas las funciones
input[type="text"] {
  display: inline-block;
  padding: 3px 8px;
  margin: 5px 0px 5px 10px;
}
label {
  font-weight: bold;
  cursor: pointer;
}
.submit-btn {
  background: #4CAF50;
  border: none;
  color: #fff;
  padding: 8px 15px;
  text-align: center;
  font-size: 13px;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="fff1" onsubmit="return newfuncion();">
    <label for="email">Email: </label> <input type="text" placeholder="Email" id="email" /><br/>
    <label for="title">Title: </label> <input type="text" placeholder="Title" id="title" /><br/>
    <label for="url">URL: </label> <input type="text" placeholder="URL" id="url" /><br><br>
    <input type="file" id="flUpload" /><br/><br>
    <input type="submit" class="submit-btn" value="CONTINUE" />
</form>

私のコードが Internet Explorer 8、9 で動作しないのはなぜですか?

4

1 に答える 1

2

IE 8/9 は「マルチファイル」アップロードをサポートしていないため、 の.filesプロパティ<input type="file">は null を返します。配列を返すかのように最初のインデックスにアクセスしようとすると、エラーが発生します"Unable to get property '0' of undefined or null reference。また、この.sizeプロパティは HTML5 より前には使用できなかったため、コードでそれも確認する必要があることに注意してください。古いブラウザではJavaScriptのみではファイルサイズを確認できません。

マルチファイル アップロードを使用していないため (少なくともコード例では)、アップロードするファイルの存在を で確認できますinput.value。.files[0]ファイル サイズ チェックのtoを変更し、ロジックを変更してみてください。これにより.value、すべてのブラウザで問題が解決するはずです。

于 2013-04-28T21:58:48.980 に答える