window.onload方法,如何调用多个函数

帕特里克·麦克德莫特

编写一些JavaScript,使表单不会在填写的字段较少的情况下提交,如果用户未填写,则会弹出一条消息,提示“请填写名称字段”或“请填写电子邮件字段”等。我正在为每个字段编写一个单独的函数(不知道这是否是正确的方法),当我将每个函数添加到window.onload时,它只会弹出其中一条消息。任何建议都很好。

的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();
}

window.onload =开始;

马达拉的幽灵

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

<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()如果要添加多个功能,则需要使用

一种更正确的方法是创建一个可以执行所有检查的函数,并将其作为处理程序附加一次。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何设置更多window.onload事件?

来自分类Dev

window.onload = function(){..} / window.onload = function(){..}();之间的区别

来自分类Dev

JavaScript window.onload

来自分类Dev

window.onload = someFunctionName与window.onload = someFunctionName()

来自分类Dev

JavaScript window.onload

来自分类Dev

jQuery .ready()与window.onload

来自分类Dev

如何从Java代码调用window.atob()JavaScript函数?

来自分类Dev

在iframe中两次调用window.onload

来自分类Dev

实时$(window).resize函数

来自分类Dev

Window.onload与脚本延迟

来自分类Dev

window.onload不调用函数

来自分类Dev

window.onload工作正常,但Chrome控制台显示:Uncaught TypeError:window.onload不是函数

来自分类Dev

具有多个window.onload功能

来自分类Dev

重新运行window.onload函数

来自分类Dev

如何在不使用window的情况下使用javascript中的变量调用函数?

来自分类Dev

从window.EventListener外部调用函数

来自分类Dev

如何设置更多window.onload事件?

来自分类Dev

如何使用window.resize()调用函数

来自分类Dev

如果多个脚本设置window.onload会发生什么?

来自分类Dev

在单独的文件中使用多个window.onload事件

来自分类Dev

jQuery $(window).load与window.onload之间的区别

来自分类Dev

获取调用$(window).bind(“ mousewheel”)函数的元素

来自分类Dev

window.onload如何工作?在其上调用函数和为其分配值之间的区别是什么

来自分类Dev

Window.onload和订购

来自分类Dev

如何启动window.onload的“ onload”?

来自分类Dev

如何从window2调用window1中的函数

来自分类Dev

FIFO或链中是否有多个window.onload事件?

来自分类Dev

在 window.onload 中定义函数和调用

来自分类Dev

JSP 中的 Window.onload 是如何工作的?

Related 相关文章

  1. 1

    如何设置更多window.onload事件?

  2. 2

    window.onload = function(){..} / window.onload = function(){..}();之间的区别

  3. 3

    JavaScript window.onload

  4. 4

    window.onload = someFunctionName与window.onload = someFunctionName()

  5. 5

    JavaScript window.onload

  6. 6

    jQuery .ready()与window.onload

  7. 7

    如何从Java代码调用window.atob()JavaScript函数?

  8. 8

    在iframe中两次调用window.onload

  9. 9

    实时$(window).resize函数

  10. 10

    Window.onload与脚本延迟

  11. 11

    window.onload不调用函数

  12. 12

    window.onload工作正常,但Chrome控制台显示:Uncaught TypeError:window.onload不是函数

  13. 13

    具有多个window.onload功能

  14. 14

    重新运行window.onload函数

  15. 15

    如何在不使用window的情况下使用javascript中的变量调用函数?

  16. 16

    从window.EventListener外部调用函数

  17. 17

    如何设置更多window.onload事件?

  18. 18

    如何使用window.resize()调用函数

  19. 19

    如果多个脚本设置window.onload会发生什么?

  20. 20

    在单独的文件中使用多个window.onload事件

  21. 21

    jQuery $(window).load与window.onload之间的区别

  22. 22

    获取调用$(window).bind(“ mousewheel”)函数的元素

  23. 23

    window.onload如何工作?在其上调用函数和为其分配值之间的区别是什么

  24. 24

    Window.onload和订购

  25. 25

    如何启动window.onload的“ onload”?

  26. 26

    如何从window2调用window1中的函数

  27. 27

    FIFO或链中是否有多个window.onload事件?

  28. 28

    在 window.onload 中定义函数和调用

  29. 29

    JSP 中的 Window.onload 是如何工作的?

热门标签

归档