javascript - 在表单验证中，如果字段中没有单词，它会返回错误但仍会提交 cgi 文件？

Question

更具体地说，当我们提交应该包含信息的空表单时，应该提交一个警告说“请输入一个值”，它会这样做，但是在警告上选择好之后，它仍然会在提交时发送电子邮件。我希望如果出现错误，他们必须先满足表格的要求，然后才能发送提交的电子邮件。代码是:

检查字段中是否有任何值

function notEmpty(elem, helperMsg) {
    if (elem.value.length >= 2) {
        return true;
        alert(helperMsg);
        elem.focus();
        return false;
    }
    return true;
}

表单的开始:

<form method="get" onsubmit="notEmpty();" action="http://www.censoredgaming.co.uk/cgi-bin/mailer.pl">

提交按钮:

<input type="submit" name='Submit' value="Send" onClick='notEmpty();'>

欢迎任何对我们问题的见解!

Answer 1

失败的原因有多种。

您将遇到的第一个问题是，因为您在调用 notEmpty 时没有传递任何参数。 , 变量 elem将是 undefined .当您尝试访问其上的属性 ( value) 时，将抛出异常并且函数将停止。

让我们从头开始。

首先，我们将使用更现代的方法来应用事件处理程序。

提供一种方法来识别您要处理的表单。 id 属性是一个很好的通用选择(但使用比我更有意义的名称):

<form id="myForm"
      method="get"
      action="http://www.censoredgaming.co.uk/cgi-bin/mailer.pl">

接下来，获取对 DOM 中表单的引用并向其添加事件监听器:

document.getElementById('myForm').addEventListener('submit', notEmpty);

请注意，您必须在将表单添加到 DOM 后执行此操作。实现此目的的最简单方法是将您的 <script>在</form>之后(就在 </body> 之前是一个受欢迎的地方)。您还可以使用在 DOM 准备就绪或文档已加载时触发的事件处理程序。

旧版本的 Internet Explorer 不支持 addEventListerner ，如果您想支持他们，请参阅 the MDN documentation which has a compatibility routine .

接下来，更新 notEmpty功能。由于它是一个事件处理程序，因此它将获得一个参数——一个事件对象。它还将在绑定(bind)到的元素(表单)的上下文中调用。

function notEmpty(event) {
    var aForm = this;
}

您想检查某个元素是否具有特定长度的值，但您的问题中没有此类元素的迹象。让我们来处理这个例子:

<label> Some data <input name="example"></label>

您可以通过表单的元素集合来引用该元素:

function notEmpty(event) {
    var aForm = this;
    var input = aForm.elements.example;
}

现在您可以添加测试了:

function notEmpty(event) {
    var aForm = this;
    var input = aForm.elements.example;
    if (input.length >= 2) {

    } else {

    }
}

如果您不想提交表单，则阻止对事件的默认操作:

function notEmpty(event) {
    var aForm = this;
    var input = aForm.elements.example;
    if (input.length >= 2) {
        // At least two characters, all is well
    } else {
       alert("An error");
       input.focus();
       event.preventDefault();
    }
}