表单字段验证-JavaScript-空字段 [英] Form Field Validation- JavaScript- Empty field

问题描述

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

I am new to JavaScript and I have written the code below, which is supposed to be taking the input of a form field (in that case of the lastname) and in case it is empty, it will not allow me to be redirected to next page. However, it doesnt work.. Does anybody know why or how I could fix it? Thank you in advance!

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

推荐答案

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

The main problem is making a comparison against ' ' space. That's not correct because you want to validate whether that value is empty.

因此，您需要进行如下比较： field.value.trim（ ）===

So, you need to compare as follow: field.value.trim() === ""

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

Good, I think your code could be reformatted, for example you don't need to compare boolean values, they are already a boolean, so you can use them directly in your conditions, i.e:

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

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

And finally, this code doesn't need that global variable invalid, so you can remove the invalid variable:

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() === ""
  }
}

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

See?, now your code is cleaner.

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

There are some pieces of your code to be reformatted, but this is a good start.

这篇关于表单字段验证-JavaScript-空字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！