javascript - 如何使用 jquery 验证器在提交表单之前验证是否选择上传文件

Question

我的网络应用程序中有一个页面，其中有一个上传文件的选项。我正在尝试在提交表单之前验证是否选择了要上传的文件。我用jQuery form validator我的表单验证插件。

我的文件输入标记的 html 代码是:

<div class="form-group">
 <label for="exampleInputFile">New File</label>
 <input type="file" id="file_add" name="file">                                         
</div>

我正在尝试使用以下代码检查是否选择了任何文件:

$.formUtils.addValidator({
      name : 'file_check',
      validatorFunction : function(value, $el, config, language, $form) 
      {
      if($('#addFile').val() == "")
        return $('#file_add').val() == "" == 0;
      },
      errorMessage : 'Please choose a file',
      errorMessageKey: 'notConfirmed'
    });

但是即使没有选择上传文件，表单提交仍然会发生。有什么方法可以在提交之前检查是否选择了文件......

Answer 1

从您提供的链接中，该页面的右侧 Pane 中有专用的文件验证部分:http://formvalidator.net/#file-validators

我以前没有使用过这个验证器插件。话虽这么说，基于 this example ，我相信你的代码应该是这样的:

HTML:

<div class="form-group">
 <label for="file_add">New File</label>
 <input type="file" id="file_add" name="file" data-validation="file_check">                                         
</div>

也就是说，我向其中添加了 data-validation 属性以及我们的自定义验证名称。

jQuery:

$.formUtils.addValidator({
      name : 'file_check',
      validatorFunction : function(value, $el, config, language, $form) 
      {
        if(value.trim() == "") // the "value" variable will have the value
          return false;
        else
          return true;
      },
      errorMessage : 'Please choose a file',
      errorMessageKey: 'notConfirmed'
});

我只是根据示例手写了此代码，因此未经测试。我想这会有帮助。