jQuery 验证，只接受一个乳胶文件

Question

我正在使用 jQuery 中的表单并使用 jQuery 验证，我希望表单只接受乳胶文件，我浏览了文档并尝试使用接受方法 https://jqueryvalidation.org/accept-method/。

据我了解https://www.freeformatter.com/mime-types-list.html

Accept需要一个mime类型，latex的mime类型是"application/x-latex"

所以我的表单设置如下

$('#adminLatexUpload').validate({
  rules: {
    file: {
      required: true,
      accept: "application/x-latex"
    },
    version: {
      required: true,
      pattern: /^[a-zA-Z0-9_.\/]*$/
    }
  },

  messages: {
    file: {
      accept: "Unsupported file type, you must upload a .latex file"
    },
    version: {
      pattern: "Invalid naming convention, no whitespaces or special characters"
    }
  },

  errorElement: "span", // error tag name

  errorPlacement: function(error, element) { // rules for placement of error tag
    element.parent().parent().addClass('has-error');
    error.addClass('help-block');
    error.appendTo(element.parent());
  },

  success: function(error, element) { // rules for placement of success tag
    error.removeClass('help-block');
    error.parents('.form-group').removeClass('has-error');
    error.remove();
  },

  submitHandler: function(form, e) {
    document.write('Good');
  },

  invalidHandler: function(e, validator) {
    var errorCount = validator.numberOfInvalids();
    if (errorCount) {
      var errMessage = errorCount === 1 ? "You have 1 error." : "You have " + errorCount + " errors."
      window.confirm(errMessage);
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script>

<div class="col-md-4 latex-container">
  <h4>Upload new Latex File</h4>
  <form class="form-vertical" id="adminLatexUpload">
    <div class="form-group">
      <label class="control-label">
                                        Attach Latex File:
                                        <input class="form-control" type="file" name="file" id="adminLatexUpload_File" accept=".tex" required />
                                    </label>
    </div>
    <div class="form-group">
      <label class="control-label">
                                        Version Name:
                                        <input class="form-control" type="text" name="version" id="adminLatexUpload_Version" required />
                                    </label>
    </div>
    <button class="btn btn-success btn-sm" id="adminLatexUpload_Submit" type="submit"><span class="glyphicon glyphicon-share"></span> Upload</button>
  </form>
</div>

目前，如果我填写了两个字段，则当我单击提交按钮时页面会刷新。文本字段按预期进行验证。但是输入字段表现出相当多的未定义行为。

目前我的测试显示以下内容： - 添加非乳胶文件（.jpg 和 .gif）不会触发任何验证 回复

• 提交带有非tex文件的文件会刷新

• 尝试在没有文件的情况下提交表单会导致需要错误，
  上传错误的文件应该会给我一个不同的错误消息和
  它没有，所需的错误仍然存​​在

其中 2 个指向接受方法失败的事实，但任何场景都不应强制刷新页面。

我的验证方法有什么问题？是什么导致此页面刷新？

编辑 在接受添加debug:true 的建议后，我在提交无效文件时收到以下控制台错误

Answer 1

基本问题是accept 验证器在附加方法文件中，而不是在核心中。所以你需要包含https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/additional-methods.min.js 文件。

不过，我执行的测试将.tex 的类型作为空字符串，而如果我通过.latex 文件，它被正确识别为application/x-latex，根据您发布的链接，这似乎是正确的扩展名.

因此您可能希望将输入上的 accept 属性也更改为 accept=".latex"

$('#adminLatexUpload').validate({
  rules: {
    file: {
      required: true,
      accept: "application/x-latex"
    },
    version: {
      required: true,
      pattern: /^[a-zA-Z0-9_.\/]*$/
    }
  },

  messages: {
    file: {
      accept: "Unsupported file type, you must upload a .latex file"
    },
    version: {
      pattern: "Invalid naming convention, no whitespaces or special characters"
    }
  },

  errorElement: "span", // error tag name

  errorPlacement: function(error, element) { // rules for placement of error tag
    element.parent().parent().addClass('has-error');
    error.addClass('help-block');
    error.appendTo(element.parent());
  },

  success: function(error, element) { // rules for placement of success tag
    error.removeClass('help-block');
    error.parents('.form-group').removeClass('has-error');
    error.remove();
  },

  submitHandler: function(form, e) {
    document.write('Good');
  },

  invalidHandler: function(e, validator) {
    var errorCount = validator.numberOfInvalids();
    if (errorCount) {
      var errMessage = errorCount === 1 ? "You have 1 error." : "You have " + errorCount + " errors."
      window.confirm(errMessage);
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/additional-methods.min.js"></script>

<div class="col-md-4 latex-container">
  <h4>Upload new Latex File</h4>
  <form class="form-vertical" id="adminLatexUpload">
    <div class="form-group">
      <label class="control-label">
                                        Attach Latex File:
                                        <input class="form-control" type="file" name="file" id="adminLatexUpload_File" accept=".latex" required />
                                    </label>
    </div>
    <div class="form-group">
      <label class="control-label">
                                        Version Name:
                                        <input class="form-control" type="text" name="version" id="adminLatexUpload_Version" required />
                                    </label>
    </div>
    <button class="btn btn-success btn-sm" id="adminLatexUpload_Submit" type="submit"><span class="glyphicon glyphicon-share"></span> Upload</button>
  </form>
</div>