Question

我正在使用Bootstrap验证器（Validator plugin）来验证我的表单，但我有一个文件输入，我想对filetype和filesize进行自定义验证（pdf，docx，doc ..）。

<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>

我需要一些关于如何使用此插件的指示，以便在后端运行自己的验证之前验证前端的输入。

Answer 1

摘自：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>

Answer 2

here中的代码对我有用：

<form id="fileForm" class="form-horizontal" enctype="multipart/form-data">
    <div class="form-group">
        <label class="col-sm-3 control-label">Avatar</label>
        <div class="col-sm-4">
            <input type="file" class="form-control" name="avatar" />
        </div>
    </div>
</form>

<script type="text/javascript">
$(document).ready(function() {
    $('#fileForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            avatar: {
                validators: {
                    file: {
                        extension: 'jpeg,png',
                        type: 'image/jpeg,image/png',
                        maxSize: 2048 * 1024,
                        message: 'The selected file is not valid'
                    }
                }
            }
        }
    });
});
</script>

如何使用Bootstrap验证程序验证文件大小和文件类型

2 个答案: