在页面加载开始时调用的函数-javascript

我有个问题；由于某些原因，我的函数在网页加载时在Web应用程序的开始处被调用

我的代码如下

function validateName(element) {
        var len = element.value.length;

        //checks if the code is than 6 characters
        if (len == 0) { 
            element.style.backgroundColor="red";     
            if (element.id == "firstname")
            {
                document.getElementById('firstNameError').style.display = "block"; 
            }
            else if (element.id == "lastname") {
                document.getElementById('lastNameError').style.display = "block";                 
            }
            return true;
        } //if == 0
        else {
            element.style.backgroundColor="green";    
            if (element.id == "firstname")
            {
                document.getElementById('firstNameError').style.display = "none"; 
            }
            else if (element.id == "lastname") {
                document.getElementById('lastNameError').style.display = "none";                 
            }
        return false;
        } // if != 0
}

此函数的逻辑是验证用户输入姓名的文本框。基本上，我面临的问题是，一旦我打开我的网页，文本框是红色的，并且说“你的名字不能是空的！”（这是

第一个名称错误

）。然后，一旦我在文本框中输入文本，它不会改变，它仍然保持红色，并显示错误

以下是我调用函数的方式：

function init() {
    var firstName = initToolTip("firstname", "firstnameTip");
    var lastName = initToolTip("lastname", "lastnameTip");
    var promoCode = initToolTip("promocode", "promocodeTip");
    //opens the TOS window when you click 'terms and conditions' link
    document.getElementById("clickedTOS").onclick = function() { sAlert(document.getElementById("TOS").innerHTML) };
    //checks the length of the promo code
    promoCode.onblur = validatePromoCode(promoCode);
    //checks the validity of a name (is not blank)
    firstName.onblur = validateName(firstName);
    lastName.onblur = validateName(lastName);
    //document.getElementById('submitButton').onmousedown = validateForm();
}

我不明白为什么页面一加载就调用它，因为它被设置为

onblur

。

---

有人能提出解决方法吗？

您没有在init中将函数传递给onblur；您正在传递函数的结果

请参见以下示例：

var Afuntion=function(){
  console.log("hello from function");
  return 22;
}
Element.onblur=Afunction("something");//Element.onblur is now 22 and 
  // "hello from function" is logged
Element.onblur=Afunction; //now onblur has a reference to the function
Element.onblur();//this will log "hello from function" and return 22

您没有使用像jQuery这样的库来轻松附加/添加事件侦听器，因此使用纯JS设置事件侦听器并读取函数中的事件有点麻烦。必须有一些信息，所以如何做这已经无论如何

在您的情况下，您可以尝试以下方法：

promoCode.onblur = function(){ validatePromoCode.call(promoCode,promCode);};

---

您需要将函数引用传递给

onblur

，而不是立即调用函数的结果。更改为：

function init() {
    var firstName = initToolTip("firstname", "firstnameTip");
    var lastName = initToolTip("lastname", "lastnameTip");
    var promoCode = initToolTip("promocode", "promocodeTip");
    //opens the TOS window when you click 'terms and conditions' link
    document.getElementById("clickedTOS").onclick = function() { sAlert(document.getElementById("TOS").innerHTML) };
    //checks the length of the promo code
    promoCode.onblur = function() {validatePromoCode(promoCode);};
    //checks the validity of a name (is not blank)
    firstName.onblur = function() {validateName(firstName);};
    lastName.onblur = function() {validateName(lastName);{;
    //document.getElementById('submitButton').onmousedown = validateForm();
}

---

这将更改每个onblur赋值，使其接受一个匿名函数引用，该引用将在以后发生

onblur

事件时执行，而不是像当前代码那样立即执行。

您能在JSFIDLE中描述它吗？