我如何调用HTML DOM事件对象（例如：onclick，onblur等）的嵌套函数？

Question

美好的一天！ 假设我的页面中有一组文本字段，每个文本字段在onblur期间都有自己的验证，例如，数量文本字段。如果我删除焦点，它将检查它是否大于100,000。

<input type = "text" id = "amount" placeholder="Amount" onblur="validateAmount()">

function validateAmount(){
  var amount = document.getElementById("amount").value;
  if (amount > 100000){
      document.getElementById("errormessage").innerHTML = "Invalid! Enter a number less than 100,000!"; //Let's just assume that I have a label for the error message
  }
}

糟糕！ 这只是具有验证的文本字段之一，如果我有5个，我们假设单击按钮以处理验证中存在3个问题的数据，因此由于这些错误，将不会处理数据。 在我的情况下，我将使用onclick事件，请看以下示例：

<button onclick = "checkData()"> Apply </button>

function checkData(){
//Here in checkData() method/function, I want to put the validateAmount() function above and other functions of validation during onblur to count and state the number of errors before submitting the data. 
    var numberOfErrors = 0;
    function validateAmount(){
      var amount = document.getElementById("amount").value;
      if (amount > 100000){
          document.getElementById("errormessage").innerHTML = "Invalid! Enter a number less than 100,000!"; //Let's just assume that I have a label for the error message
          numberOfErrors++;
      }
    }
    /* And more validating functions here
    */

    // After validating all the textfields.
    if(numberOfErrors == 0){
    alert("Congrats! You already submitted the loan");
    } else {
    alert("Error! Check your inputs!");
    }
}

所以我的问题是，如何在HTML DOM事件的函数内部调用函数？ 有没有可能更简单的方法来做到这一点？ 先感谢您！

Answer 1

有很多解决方法，但是我建议使用验证库。 自己动手是一个非常冒险的提议，并且会导致难以管理的“意大利面条代码”。

您可以查看以下两个库。

http://jqueryvalidation.org

https://angularjs.org

Answer 2

您可以将“ this”传递给事件处理程序，以便它知道应该验证哪个字段。 提交表单时，我会再次运行所有验证功能，而不是保留一个计数，因为如果人们更正错误或将错误添加到先前更正的字段中，这可能会变得混乱。
我添加了一个虚拟验证器作为示例。

 function checkData(field){ if (!field){ var numberOfErrors = 0; if (!validateAmount()) numberOfErrors++; if (!validateOther()) numberOfErrors++; if (!numberOfErrors){ alert("Congrats! You already submitted the loan"); } else { alert("Error! Check your inputs!"); } } else if (field.id == "amount") validateAmount() else if (field.id == "other") validateOther(); function validateAmount(){ var amount = parseFloat(document.getElementById("amount").value); if (isNaN(amount) || amount > 100000){ document.getElementById("errormessage").innerHTML = "Invalid! Amount must be less than 100,000!"; return(false); } return(true); } function validateOther(){ var other = parseFloat(document.getElementById("other").value); if (isNaN(other) || other > 100){ document.getElementById("errormessage").innerHTML = "Invalid! Other must be less than 100!"; return(false); } return(true); } } 

 <form> <input type = "text" id = "amount" placeholder="Amount" onblur="checkData(this);"> <input type = "text" id = "other" placeholder="Other" onblur="checkData(this);"> <button onclick = "checkData()"> Apply </button> </form> <div id="errormessage"></div>