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

Posted 2023-05-09

【中文标题】如何使用 jQuery 验证用户正在使用 HTML 表单上传文件？

【英文标题】：How to validate with jQuery that the user is uploading a file using an HTML form?

【发布时间】：2017-02-17 13:53:29

【问题描述】：

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

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

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

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

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

【参考方案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 对组成。

一个对象可以包含其他对象... 这就是“规则”和“消息”都包含自己的“dni”对象的情况。

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

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