2013-05-01 46 views
4

即時通訊上傳圖像,並嘗試使用jquery驗證它。這裏是我的代碼:jQuery驗證 - 需要工作,但不接受

<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script> 

<script type='text/javascript'> 
$(document).ready(function(){ 
    $("#form").validate({ 
     errorLabelContainer: "#message_box", wrapper: "li", 

     rules: { 
      image: {required: true, accept: "jpg|jpeg|png|gif"} 
     }, 
     messages: { 
      image: {required: 'Required!', accept: 'Not an image!'} 
     } 
    }) 
}); 
</script> 

必需的工作 - 如果我插入沒有圖像我得到一個錯誤。但接受不工作(任何我插入通行證),我不知道爲什麼。有任何想法嗎? :)

+0

就像你正在使用99.9%的代碼,你不需要jQuery..seems如果文件類型,如果有效,你不需要只是爲了做一個簡單的測試,看看一個字段是「必需的」和。只是這樣做。此外,如果文件是實際圖像,也可以使用JS檢查 - http://stackoverflow.com/q/71944/104380也讀取此:http://stackoverflow.com/q/181214/104380 – vsync 2013-05-01 16:28:24

回答

18

你需要兩件事。

(1)使用有效的語法來使用accept方法,因爲它需要您提供用逗號分隔的mimetypes列表。

$(document).ready(function(){ 
    $("#form").validate({ 
     errorLabelContainer: "#message_box", wrapper: "li", 

     rules: { 
      image: {required: true, accept: "image/jpg,image/jpeg,image/png,image/gif"} 
     }, 
     messages: { 
      image: {required: 'Required!', accept: 'Not an image!'} 
     } 
    }) 
}); 

(2)你必須包括additional-methods.js因爲accept方法不包括在覈心驗證插件。所以,你包括驗證插件

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script> 

這裏的link to jsfiddle後添加下列內容<head>。請注意,它包括debug: true以防止在小提琴中發佈表單。

+0

謝謝很多! :) – user1985273 2013-05-01 17:04:38

+1

這個答案沒有錯。然而,最簡單的解決方法是將'accept'改爲'extension'。請參閱['extension'](http://docs.jquery.com/Plugins/Validation/CustomMethods/extension#extension)規則。 – Sparky 2013-05-02 03:34:36

+0

jquery驗證錯誤「<<未捕獲typeerror:無法讀取未定義的屬性」調用「>>」...我得到這個錯誤感謝您的答案... – HaRsH 2015-04-23 09:42:26

2

documentation指出accept規則只接受mime類型作爲參數。

如果您想接受所有圖像,請使用image/*

如果你只想接受特定的圖像類型,那麼你可以指定多個MIME類型,用逗號分隔它們。 image/pjpeg,image/jpeg,image/png,image/gif

4

1)如前所述,您需要包含additional-methods.js文件。

2)對於文件擴展名,請使用the extension ruleaccept規則適用於MIME類型。

$(document).ready(function(){ 

    $("#form").validate({ 
     errorLabelContainer: "#message_box", wrapper: "li", 
     rules: { 
      image: { 
       required: true, 
       extension: "jpg|jpeg|png|gif" 
      } 
     }, 
     ... 
    }) 

});