如何使用 jQuery 验证用户正在使用 HTML 表单上传文件？

Question

我想验证用户不会将文件输入字段留空。

我正在使用 jQuery 插件 validation。在那 link 中有一个插件应该如何工作的演示。

我已将文件添加到页面的页脚（并检查它们是否确实存在）：

<!-- jQuery y Bootstrap minificados -->
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- validacion de los campos de los formularios -->
<script src="/js/validate/jquery.validate.min.js"></script>
<script src="/js/validate/additional-methods.min.js"></script>
<!-- My file -->
<script src="/js/formularios.js"></script>

在我的 formularios.js 文件中，我添加了这个：

//validación de la data en el formulario de carga de documentación
$().ready(function {

  $("#cargarDoc").validate({
    rules: {
              dni: {
                required: true,
                extension: "gif|jpeg|jpg|png"
              },
    messages:{
              dni: {
                required: "No puedes dejar este campo en blanco",
                extension: "Solamente puedes cargar archivos del tipo: gif, jpeg, jpg o png"
              }
    }
    }
  })
})

这是我的 HTML 表格：

<form id="cargarDoc" method="POST" action ="cargarDoc.php" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="1000000">
<div class="form-group">
<label for="dni">Cargá acá tu DNI</label>
<input type="file" id="dni" name="dni">
</div>          
<button type="submit">Cargar Documentación</button>
</form>

现在，当我提交表单时，即使是空的，它也能让我。我做错了什么？

Answer 1

问题是语法错误，可能是由于代码 indentation 错误造成的。

/validación de la data en el formulario de carga de documentación
$().ready(function {

  $("#cargarDoc").validate({
        rules: {
            dni: {
                required: true,
                extension: "gif|jpeg|jpg|png"
            }
        },
        messages:{
            dni: {
                required: "No puedes dejar este campo en blanco",
                extension: "Solamente puedes cargar archivos del tipo: gif, jpeg, jpg o png"
            }
        }
    });
});

将上面的代码与您的代码进行比较，以查看细微差别。

Validate 使用对象来定义其行为。

"rules"、"message" 和 "dni" 是对象。
对象定义在花括号之间：{ 和 }，由 key 和 value 对组成。

一个对象可以包含其他对象...
这是 "rules" 和 "message" 的情况，它们都包含自己的 "dni" 对象。

对象中的逗号 , 用作分隔符。

分号 ; 用于分隔许多编码语言中的语句。

如何使用 jQuery 验证用户正在使用 HTML 表单上传文件？

How to validate with jQuery that the user is uploading a file using an HTML form?

javascript

validation

jquery

jquery-validate