Question

我有一个带有一些文本输入和一个文件类型输入的表单，我试图验证所选文件是否为PDF。我是这样做的：

$("#myform").bind("submit", function() {
    var ext = $('#file_input').val().split('.').pop().toLowerCase();
    if($.inArray(ext, ['pdf']) == -1) {
        alert('ERROR!');
    }
});

但是在上面的代码部分中缺少一个 - 如果除文件输入之外的所有输入（让文件称为DOC）都是有效的（=＆gt;文件输入无效）并且我点击了SUBMIT按钮，然后显示警告信息错误！，但表格已发送。

如果文件类型无效，我如何“停止”发送表单？

Answer 1

试试这个：

$("#myform").bind("submit", function(e) {
    var ext = $('#file_input').val().split('.').pop().toLowerCase();
    if($.inArray(ext, ['pdf']) == -1) {
      e.preventDefault(); //Prevents the default action which is form submit
      alert('ERROR!');
    }
});

Answer 2

您可以通过以下方式缩短代码：

if (!(/\.pdf$/i).test($('#file_input').val())) {
  // not valid, do what you like here
  // return false to prevent submit
  return false;

通过返回false来阻止表单提交;表单提交事件上的preventDefault在IE 7/8中不起作用，返回false表示该作业。

Answer 3

在绑定到事件的jQuery回调函数中，您有两个选项。

您可以将对该事件的引用传递给匿名函数并调用e.preventDefault()：

$('#myform').bind('submit', function(e) {
    e.preventDefault();

    // Your code
});

e.preventDefault()会阻止默认功能（在这种情况下，提交表单）。

或者您可以return false同时阻止默认功能和阻止事件冒泡;与调用e.preventDefault(); e.stopPropagation()相同。

Answer 4

您有两种方式：

保持您的代码不变并添加return false：

$("#myform").bind("submit", function() {
var ext = $('#file_input').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['pdf']) == -1) {
    alert('ERROR!');
    return false;
}
});

更改函数签名以接受事件并使用preventDefault（）：

 $("#myform").bind("submit", function(e) {       
var ext = $('#file_input').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['pdf']) == -1) {         
  alert('ERROR!');
  e.preventDefault();
}
});

Javascript - 如何正确验证表单数据？

4 个答案: