窗口.Onload方法，如何调用多个函数

window.onload method, how to call multiple functions

本文关键字：调用 函数 方法 Onload 何调用 窗口      更新时间：2023-09-26

编写一些JavaScript，这样表单就不会在没有填写的字段中提交，如果用户没有填写，则会弹出"请填写姓名字段"或"请填写电子邮件字段"等消息。我正在为每个字段编写单独的函数(不知道这是否是正确的方式)，当我将每个函数添加到窗口时。加载后，它只会弹出一条消息。有什么建议就太好了。

HTML 

 <form id="frmContact" name="frmContact" method="post" action="thanks.htm">
    <fieldset id="quickSupport">
      <legend><strong>Quick Support</strong></legend>
      <p> If your request isn't urgent, drop us a quick line and we'll get back to you within 24 hours </p>
      <p>
        <label for="name">Name:</label>
        <input type="text" value="Your Name" name="name" id="name" tabindex="10" />
      </p>
      <p>
        <label for="email">Email:</label>
        <input type="text" value="Your Email" name="email" id="email" tabindex="20" />
      </p>
        <label for="comments">Comments </label>
        <br />
        <textarea name="comments" value="Message" id="comments" cols="45" rows="5" tabindex="60" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">Message</textarea>
      </p>
      <p>
        <input type="submit" name="submit" id="submit" value="Send" tabindex="70" />
      </p>
    </fieldset>
  </form>
   <p><span id="errorMessage"></span></p>
   <p><span id="errorMessage1"></span></p>
JavaScript 

function prepareEventHandlers () {
document.getElementById("frmContact").addEventListener("submit", function(event) {
        // Show message
        if (document.getElementById("email").value == "Your Email") {
            document.getElementById("errorMessage").innerHTML = "Please provide at least an email address!";
            // to STOP the form from submitting
            return false;
        } else {
            // reset and allow the form to submit
            document.getElementById("errorMessage").innerHTML = "";
            return true;
        }
        event.preventDefault(); // Prevent form from submitting
    }
});
}
function prepareEventHandlersName () {
document.getElementById("frmContact").addEventListener("submit",         function(event) {
        // Show message
        if (document.getElementById("name").value == "Your Name") {
            document.getElementById("errorMessage1").innerHTML = "Please provide a name!";
            // to STOP the form from submitting
            return false;
        } else {
            // reset and allow the form to submit
            document.getElementById("errorMessage1").innerHTML = "";
            return true;
        }
        event.preventDefault(); // Prevent form from submitting
    }
});
}

function start() {
prepareEventHandlers();
prepareEventHandlersName();
}

窗口。Onload = start;

你应该使用浏览器内置的验证属性。

<form id="frmContact" name="frmContact" method="post" action="thanks.htm">
    <fieldset id="quickSupport">
        <legend><strong>Quick Support</strong></legend>
        <p>If your request isn't urgent, drop us a quick line and we'll 
            get back to you within 24 hours</p>
        <p>
            <label for="name">Name:</label>
            <input type="text" value="Your Name" name="name" id="name" 
                tabindex="10" required />
        </p>
        <p>
            <label for="email">Email:</label>
            <input type="text" value="Your Email" name="email" id="email" 
                tabindex="20" required />
        </p>
        <label for="comments">Comments</label>
        <br />
        <textarea name="comments" value="Message" id="comments" cols="45" 
            rows="5" tabindex="60" 
            placeholder="PLACEHOLDER WHEN NO MESSAGE IS WRITTEN" required>Message</textarea>
        </p>
        <p>
            <input type="submit" name="submit" id="submit" value="Send" 
                tabindex="70" />
        </p>
    </fieldset>
</form>

当您尝试提交表单时，浏览器将自动以用户的语言为您显示错误消息。不需要JavaScript。

你的代码失败的原因，因为

document.getElementById("frmContact").onsubmit = ...

将覆盖您之前添加的任何onsubmit处理程序。

如果您想添加多个函数，则需要使用 .addEventListener() 。

更正确的方法是创建一个函数来完成所有检查，并将其作为处理程序附加一次。

两个函数都在运行，但是您在第二个函数中为frmContact覆盖了onsubmit处理程序。为了避免这种情况，不要以这种方式分配事件处理程序。请使用addEventListener。

document.getElementById("frmContact").addEventListener("submit", function(event) {
    if (document.getElementById("email").value == "Your Email") {
        // Show message
        event.preventDefault(); // Prevent form from submitting
    }
});

注意，当您这样做时，您不能通过简单地返回false来阻止表单提交。相反，您必须使用事件的preventDefault方法

相关文章：