如何使用Bootstrap驗證器來驗證文件大小和文件類型

我使用Bootstrap驗證器（Validator plugin）來驗證我的表單，但我有一個文件輸入，我希望對文件類型和文件大小進行自定義驗證（pdf ，DOCX，DOC ..）。如何使用Bootstrap驗證器來驗證文件大小和文件類型

<div class="form-group"> 
    <div class="input-group"> 
     <label class="input-group-btn"> 
     <span class="btn btn-primary"> 
Browse&hellip; <input type="file" style="display: none;" name="cv" required data-filesize="5242880" data-filesize-error="Max 5MB"> 
     </span> 
    </label> 
    <div class="help-block with-errors"></div> 
     <input type="text" class="form-control" readonly> 
    </div> 
</div>

我需要在後端運行其自己的驗證之前，我應該如何使用這個插件，以驗證我的前端輸入一些方向。

來源

2016-09-14 Daniel

你給的鏈接斷開 – Ish

@Ish固定它。謝謝！ – Daniel

@Daniel我切換到[這個插件]（http://parsleyjs.org），對我來說它更合適。如果你喜歡，這裏是一個自定義驗證的例子：http://parsleyjs.org/doc/examples/customvalidator.html – Victor

例摘自：https://github.com/1000hz/bootstrap-validator/issues/73

$('form[data-toggle="validator"]').validator({ 
 
    custom: { 
 
    filesize: function ($el) { 
 
     var maxKilobytes = $el.data('filesize') * 1024 
 
     if ($el[0].files[0].size > maxKilobytes) { 
 
     return "File must be smaller than " + $el.data('filesize') + " kB." 
 
     } 
 
    }, 
 
    
 
    //custom file type validation 
 
    filetype: function ($el) { 
 
     var acceptableTypes = $el.prop('accept').split(','); 
 
     var fileType = $el[0].files[0].type; 
 
     
 
     if (!$.inArray(fileType, acceptableTypes)) { 
 
     return "Invalid file type" 
 
     } 
 
    
 
    
 
    } 
 
    } 
 
})

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="http://code.jquery.com/jquery.min.js"></script> 
 
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" /> 
 
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script> 
 
<script src="http://1000hz.github.io/bootstrap-validator/dist/validator.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <div class="well"> 
 
    <form data-toggle="validator"> 
 

 
    <div class="form-group form-group-file"> 
 
     <input type="file" id="file1" name="file" class="form-control" data-filesize="5000" 
 
      data-filetype="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/rtf"/> 
 
     <div class="help-block with-errors"></div> 
 
    </div> 
 

 
    <div class="form-group"> 
 
     <button type="submit" class="btn btn-primary">Submit</button> 
 
    </div> 
 
    </form> 
 
</div> 
 
</body> 
 
</html>

來源

2016-09-14 11:12:39 Victor

很好的例子。你有什麼想法，當你試圖選擇一個文件時，窗口將不會顯示其他文件，然後是PDF文件？驗證看起來像通過DOC和DOCX。 'data-filesize =「5000」accept =「application/pdf，application/msword，application/vnd.openxmlformats-officedocument.wordprocessingml.document，application/rtf」/>' – Daniel

@Daniel這是因爲'accept'屬性文件輸入。我剛剛更新了一個自定義文件類型驗證的例子。要構建自定義驗證，請在此處查看（「自定義」選項）：http://1000hz.github.io/bootstrap-validator/#validator-options – Victor

http://jsbin.com/riwajanuxu/1/edit?html ，js，輸出它按預期工作。唯一的問題是，如果您嘗試提交沒有附加文件的表單，那麼它只會發送表單。沒有錯誤 – Daniel

如何使用Bootstrap驗證器來驗證文件大小和文件類型

回答

相關問題