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

时间:2018-01-29 17:00:50

标签: javascript forms addeventlistener preventdefault stoppropagation

我是JavaScript的新手,我编写了下面的代码,它应该是一个表单字段的输入(在lastname的情况下),如果它是空的,它将不允许我成为重定向到下一页。但是,它不起作用..有谁知道为什么或如何解决它?提前谢谢!

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;
  }
}
}

2 个答案:

答案 0 :(得分:0)

这是错误的:

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

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

也无需与undefined进行比较,始终定义值。

所以它应该是:

if (field.value == "")

您可能希望首先修剪字段,以防它们只输入一堆空格:

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

答案 1 :(得分:0)

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

因此,您需要进行以下比较: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() === ""
  }
}

请参阅?,现在您的代码更清晰了。

您的代码中有一些要重新格式化,但这是一个良好的开端。