如何调用 HTML DOM 事件对象（例如：onclick、onblur 等）嵌套函数？答案

【问题标题】：How can I call to HTML DOM Event Object (for example: onclick, onblur, etc..) nested functions?如何调用 HTML DOM 事件对象（例如：onclick、onblur 等）嵌套函数？
【发布时间】：2015-07-08 09:38:15
【问题描述】：

美好的一天！假设我的页面中有一组文本字段，每个文本字段在 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 事件上调用函数内部的函数？有没有可能和更简单的方法来做到这一点？提前谢谢！

【问题讨论】：

标签： javascript html events dom nested-function

【解决方案1】：

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

您可以查看以下几个库。

http://jqueryvalidation.org

https://angularjs.org

【讨论】：

【解决方案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>

【讨论】：