如何使用jQuery验证用户是否使用HTML表单上传文件?

时间:2016-10-08 19:09:45

标签: javascript jquery validation jquery-validate

我想验证用户不会留下文件输入字段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 个答案:

答案 0 :(得分: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"
            }
        }
    });
});

将上面的代码与您的代码进行比较,以查看微妙的差异。

验证使用对象来定义其行为。

“规则”,“消息”和“dni”是对象 对象在大括号之间定义:{},由keyvalue对组成。

对象可以包含其他对象...
这是“规则”和“消息”的情况,两者都包括他们自己的“dni”对象。

对象中的昏迷,用作分隔符。

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