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

Javascript - how to correctly verify form data?

本文关键字：表单 数据 验证 何正确 Javascript-      更新时间：2023-09-26

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

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

但在上面的代码部分缺少一个-如果除了文件输入（让sat文件是DOC）之外的所有输入都是有效的（=>文件输入无效），并且我点击了提交按钮，则显示警告消息ERROR，但表单已发送。

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

试试这个：

$("#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!');
    }
});

您可以通过以下操作缩短代码：

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

该表格因返回虚假信息而无法提交；表单提交事件上的preventDefault在IE 7/8中不起作用，返回false即可。

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

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

$('#myform').bind('submit', function(e) {
    e.preventDefault();
    // Your code
});

e.preventDefault()阻止默认功能（在本例中，提交表单）。

或者您可以return false来防止默认功能和防止事件冒泡；与调用CCD_ 4相同。

您有两种方法：

  1. 保持代码原样并添加return false:

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

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

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