onsubmit多个javascript函数

onsubmit multiple javascript functions

本文关键字：函数 javascript 多个 onsubmit      更新时间：2023-09-26

有人知道如何提交多个函数吗？我想做的是：onsubmit检查是否所有这些函数都返回true，如果所有函数都返回true，那么我执行action="checked.html"

<form id="myForm" name="myForm" action="checked.html" method="post"
onsubmit="return validateName() || validatePhone() || validateAddress() ||
validateEmail()">

然而，实际发生的是，计算机从左到右检查代码，下一个函数的结果将取代上一个函数，以此类推，直到结束。所以，即使前三个函数都返回false，只要最后一个是true，计算机就会执行action="checked.html"，这不是我想要做的……有人能帮我吗，我已经花了4个小时试图修复它了：s谢谢！

此外，当我尝试做类似<form onsubmit="return verify1() && verify2()">的事情时，它不起作用，它所做的只是检查verify1（），而不是以下内容…：（

澄清：在提交时，我希望调用四个验证函数。除非所有四个函数都返回true，否则应阻止提交，但即使其中一些函数返回false，也应始终调用所有四个

使用&而不是&&。

&&使用短路求值，因此如果左侧操作数错误，则不求值右侧操作数。

&总是计算两个操作数。

onsubmit="return !!(validateName() & validatePhone()
                      & validateAddress() & validateEmail());"

编辑：对不起，我忘了&不会返回实际的布尔值。将表达式括在括号中，并使用双!将其转换为（现在）所示。（如果在if测试中使用结果，则无需担心，但事件处理程序的返回值应该是实际的布尔值。）

附言：这里有一个相当笨拙的演示，展示了所有四个函数都被调用，但会产生所需的整体正确或错误结果：http://jsfiddle.net/nnnnnn/svM4h/1/

将代码更改为使用AND而不是OR

onsubmit="return validateName（）&&validatePhone（）&validateAddress（） validateEmail（）"

原因是，如果您使用OR一次，那么第一个函数将返回true，javascript将不会检查其他函数。此外，你不想使用OR，因为如果第一个检查为假，第二个为真，那么表单仍然会提交，因为你的至少一个检查为真。

请参阅fiddle来展示它的工作原理，两个检查都会执行并显示一条警告消息，但由于check2返回false，表单不会提交——如果你想利用check1和check2函数的返回结果以及&amp；和||

在更好地理解问题之后，你需要使用一个&，但是因为true & true返回1而不是true，所以需要像这样写

onsubmit="return（（validateName（）&validatePhone

如果您只需要确保所有函数在继续之前都返回true，那么使用&&而不是||，并且为了确保返回函数不会提前评估表达式，请加上一些额外的括号

<form id="myForm" name="myForm" action="checked.html" method="post"
onsubmit="return (validateName() && validatePhone() && validateAddress() &&
validateEmail() )">

创建一个包装函数，该函数调用每个函数并检查其返回值。在任何时候，如果返回值为false，您可以通过在该时间返回false来停止表单提交，或者评估其余内容并最终返回false。

所以JS是一个可以做你想做的事情的代码：

function validateForm() {
    var isFormValid = true;
    isFormValid &= validateName();
    isFormValid &= validatePhone();
    isFormValid &= validateAddress();
    isFormValid &= validateEmail();
    return isFormValid? true:false;
}

现在只需在表单中使用：

<form id="myForm" name="myForm" action="checked.html" method="post" onsubmit="return validateForm();">

下面是一个正在工作的JSFiddle示例。

编辑：纠正了下面的错误。

使用OR是不正确的，但AND不能像您预期的那样工作的原因是由于Short-ciruit_evaluation。

  • OR：在第一个操作数为true时停止求值，返回true
  • AND：在第一个操作数为false时停止求值，返回false

    使用这个代码

    • 为了验证我的表单，我只创建了一个名为validateForm（）的函数｛｝，然后在这个函数中放入完全验证所需的所有代码。然后使用onsubmit="validateForm（）"。它按顺序检查它，并且只有在所有条件都成立的情况下才提交。

    下面的方法检查第一个validateName（）函数，如果只有第一个函数为true，它将处理检查下一个函数，并且要激发第三个函数，需要返回first&第二个功能。所以想象一下，如果所有的函数都是无效的&即使您有不同的错误消息，您也只能看到第一个函数的错误消息。validateName（）函数通过后，您可能会看到validatePhone（）ect的错误消息。

    <form id="myForm" name="myForm" action="checked.html" method="post"
onsubmit="return (validateName() && validatePhone() && validateAddress() &&
validateEmail() )">

    如果你要在第一次提交时根据以上所有验证显示错误消息，你就不能使用以上内容；若要在提交时激发所有函数（或显示所有验证错误），可以使用以下方法。

    <form id="myForm" name="myForm" action="checked.html" method="post"
onsubmit=" if( ( validateName() && validatePhone() && validateAddress() &&
validateEmail() ) == false) { return false; } ">
    相关文章：