表单字段验证-JavaScript-空字段

Question

我是JavaScript的新手，并且下面编写了代码，该代码应采用表单字段的输入（在姓氏的情况下），如果为空，则不允许我重定向到下一个页。 但是，它不起作用。有人知道为什么或如何解决它吗？ 先感谢您！

window.addEventListener("DOMContentLoaded", init, false);

function init() {
  var form = document.querySelector("form");
  form.addEventListener("submit",
    function(e) {
      validate(e);
      e.stopPropagation();
      if (invalid == true) e.preventDefault();
    },
    false);
  var invalid = false;

  function validate(e) {
    var lname = document.getElementById("lastName");
    invalid = testField(lname);
    return invalid;
  }

  function testField(field) {
    if (field.value == undefined || field.value == " ")
      invalid = true;
    else
      invalid = false;
    return invalid;
  }
}
}

Answer 1

这是错误的：

if (field.value == undefined || field.value == " ")

您正在将值与包含单个空格的字符串进行比较。 如果该字段为空，则不会与此匹配。

也无需与undefined进行比较，该值始终是已定义的。

因此应该是：

if (field.value == "")

您可能要先修剪该字段，以防它们只是键入一堆空格：

if (field.value.trim() == "")

Answer 2

主要问题是与' '空间进行比较。 这是不正确的，因为您要验证该值是否为空。

因此，您需要进行如下比较： field.value.trim() === ""

很好，我认为您的代码可以重新格式化，例如，您不需要比较布尔值，它们已经是布尔值，因此您可以在自己的条件下直接使用它们，即：

if (invalid == true) //See? the invalid variable is a boolean.

因此，请按以下方式使用它：

if (invalid)

另一个可能需要重新格式化的代码：

//Here you want to evaluate and assign a boolean, well you just have to assign the result of that condition.
function testField(field) {
    if (field.value == undefined || field.value == " ")
        invalid = true;
    else
        invalid = false;
    return invalid;
}

请执行下列操作：

function testField(field) {
    return invalid = field.value == undefined || field.value == " ";
}

最后，此代码不需要该全局变量invalid ，因此您可以删除invalid变量：

function(e) {
    validate(e);
    e.stopPropagation();
    if (invalid == true) e.preventDefault();
}

如下访问该功能：

function(e) {
    e.stopPropagation();
    if (validate(e)) e.preventDefault();
}

重新格式化后的代码：

window.addEventListener("DOMContentLoaded", init, false);

function init() {
  var form = document.querySelector("form");
  form.addEventListener("submit",
    function(e) {
      e.stopPropagation();
      if (validate(e)) e.preventDefault();
    },
    false);

  function validate(e) {
    var lname = document.getElementById("lastName");
    return testField(lname);
  }

  function testField(field) {
    return field.value === undefined || field.value.trim() === ""
  }
}

看到了吗，现在您的代码更干净了。

您的代码中有一些部分需要重新格式化，但这是一个好的开始。