Javascript 表单验证-如何跟踪多个字段以防止提交-全局变量？

我有一个包含多个字段的表单（本例中为4）

我在每个字段上使用javascript函数来验证它们，生成一个错误指示——一个红色框，或者框旁边的文本提示

就这样

<input
    ...
    onkeyup="validateName()"
    onblur="checkDuplicateName(); validateName()"
>

或

（…虽然试图避免Jquery）以阻止提交

我应该如何跟踪4个字段的状况

我是否应该创建一个全局变量，比如-window.validFields，这样我就可以从我的每个验证函数中访问它-为每个有效字段添加一个变量，在无效时减去一个？（window.validFields==4允许提交）

不确定实现这一目标的最佳方式

---

感谢您的帮助。

您可以使用表单提交活动，如下所示：

HTML：

<form method="post" onsubmit="return MyValidation(); " ...

(function() {
    var field1Valid = false;
    var field2Valid = false;

    window.validateField1 = function(elmnt) {
        // do some validation...

        if(everything == OK) {
            field1Valid = true;
            setButtonDisabled(false);
        }
        else {
            field1Valid = false;
            setButtonDisabled(true);
        }
    }

    window.validateField2 = function(elmnt) {
        // do some validation...

        if(everything == OK) {
            field2Valid = true;
            setButtonDisabled(false);
        }
        else {
            field2Valid = false;
            setButtonDisabled(true);
        }
    }

    window.checkDuplicateName = function() {
        // do some more validation...
    }

    window.setButtonDisabled = function(disabled) {
        document.getElementById('submit').disabled = disabled;
    }

    window.MyValidation = function() {
        return field1Valid  && field2Valid;
    }
}());

上面的示例还检查是否禁用submit按钮

另一种方法是处理表单提交事件中的所有验证逻辑，但立即验证输入总是更好

---

如果您感兴趣的话，还有很多验证插件可用于jQuery。如果您有多个字段需要以多种方式进行验证，那么您自己构建此字段可能会很快变得混乱…

假设这样的表单

<form class="is-invalid" id="form" method="post">
  <input type="text" id="lorem">
  <input type="text" id="ipsum">
  <input type="text" id="dolor">
  <input type="text" id="amet">
  <button id="submit">Submit</button>
</form>

有一个对象，其ID为保存每个验证状态的相关输入字段。在

keyup

和

blur

上，检查每个输入字段。如果通过验证，则

字段

-对象中的相应值设置为

真

。此外，在输入元素上的每个事件上检查表单的状态

checkState

-函数迭代

字段

-对象。如果它找到一个属性，即

false

，则在表单元素上设置“is invalid”-类（如果尚未设置），将

isValid

-标志设置为

false

，并中止函数

否则-所有输入字段都有效-

isValid

-标志设置为true，并且“is invalid”-类将从表单元素中删除。现在，表格可以提交了

这一切都可以在没有单个全局变量的情况下工作。任务完成了

我做了一个测试，你可以测试这个

PS：请记住，

addEventListener

-方法仅受版本9之前的IEs支持。如果您必须支持版本8及以下，则需要一个

---

我希望这对您有所帮助。

我认为全局变量是不好的做法，这就是我问这个问题的原因。我想似乎没有别的办法了。此外，我还试图避免使用Jquery，到目前为止我已经使用了Jquery，但最终使用Jquery似乎是不可避免的。感谢您的回复。如果您对使用全局变量感到不舒服，您可以使用不同的设置，正如我在上面显示的那样……不要忘记，您也可以对某些元素使用HTML5验证。@nOrakat:如果您想避免使用全局变量，您应该省略内联事件处理程序，因为它们也会污染全局命名空间。大家好，谢谢你的帮助。我仍在努力理解这些新概念中的许多，以便评论或选择答案；如果有人还在的话，我会回去的。我还在努力理解代码。本周工作时间太长。。我只是想对你的帮助表示感谢。谢谢你的回答。这个例子教会了我很多东西。我实现了这一点，只是没有使用for-in循环将js函数绑定到事件。我还省略了任何与更改类名有关的内容，因为这不是必需的。

(function() {
    var field1Valid = false;
    var field2Valid = false;

    window.validateField1 = function(elmnt) {
        // do some validation...

        if(everything == OK) {
            field1Valid = true;
            setButtonDisabled(false);
        }
        else {
            field1Valid = false;
            setButtonDisabled(true);
        }
    }

    window.validateField2 = function(elmnt) {
        // do some validation...

        if(everything == OK) {
            field2Valid = true;
            setButtonDisabled(false);
        }
        else {
            field2Valid = false;
            setButtonDisabled(true);
        }
    }

    window.checkDuplicateName = function() {
        // do some more validation...
    }

    window.setButtonDisabled = function(disabled) {
        document.getElementById('submit').disabled = disabled;
    }

    window.MyValidation = function() {
        return field1Valid  && field2Valid;
    }
}());

<form class="is-invalid" id="form" method="post">
  <input type="text" id="lorem">
  <input type="text" id="ipsum">
  <input type="text" id="dolor">
  <input type="text" id="amet">
  <button id="submit">Submit</button>
</form>

(function () {

  var fields = {
        lorem: false,
        ipsum: false,
        dolor: false,
        amet: false
      },
      isValid = false,
      form = document.getElementById('form'),
      i,
      tmpInput;

  // Binding submit-event to prevent form-submit
  form.addEventListener('submit', onSubmit, false);

  // Binding events on input-elements (keyup & blur)
  for ( i in fields ) {
    tmpInput = document.getElementById(i);
    tmpInput.addEventListener('keyup', checkInput, false);
    tmpInput.addEventListener('blur', checkInput, false);
  }

  // Checking form state by iterating over the fields object;
  // Adding/removing 'is-valid'-class and setting `isValid`-flag
  function checkFormState() {
    for ( var j in fields ) {
      if ( !fields[j] ) {
        isValid = false;
        form.className += /\bis-invalid\b/i.test(form.className)
          ? ''
          : 'is-invalid';
        return;
      }
    }
    form.className = form.className.replace(/\bis-invalid\b/i, '');
    isValid = true;
  }

  // Abort the submit, if the `isValid`-flag is `false`
  function onSubmit(evnt) {
    if ( !isValid ) {
      evnt.preventDefault();
      return false;
    }
  }

  // Setting the corresponding value in the `fields`-object;
  // Checking the form state
  function checkInput() {
    fields[this.id] = this.value.length > 5; // or any other validation rule
    checkFormState();
  }

})();