onsubmit 多个 javascript 函数答案

【问题标题】：onsubmit multiple javascript functionsonsubmit 多个 javascript 函数
【发布时间】：2012-08-02 02:58:18
【问题描述】：

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

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

然而，实际发生的是，计算机从左到右检查代码，下一个函数的结果将替换前一个函数的结果，以此类推，直到结束。因此，即使所有 3 个第一个函数都返回 false，只要最后一个函数为 true，计算机将执行 action="checked.html"，这不是我打算做的......谁能帮我这个，我花了 4 个小时来修复它：S 谢谢！

另外，当我尝试执行<form onsubmit="return verify1() && verify2()"> 之类的操作时，它不起作用，它所做的只是检查 verify1()，而不是以下的... :(

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

【问题讨论】：

您可以直接编写函数而不是使用 OR 和 AND 运算符，如 onsubmit="return validateName();validatePhone();validateAddress();validateEmail();"
@Harry -1;这到底是怎么回事？只要 validateName 返回 true，表单就会提交
@Harry：我认为你做不到。它只会返回第一个函数结果。
布尔运算符 ||和 && 有一个短路机制。对于 ||，如果第一个运算符为真，则整个表达式必须为真。那么为什么要检查第二个运算符呢？对于&&，如果第一个运算符为假，则整个表达式必须为假。

标签： javascript forms function onsubmit

【解决方案1】：

使用& 而不是&&。

&& 使用短路评估，因此如果左侧操作数为假，则不评估右侧操作数。

& 总是计算两个操作数。

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

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

P.S.：这是一个相当笨拙的演示，显示所有四个函数都被调用，但会产生您需要的整体真假结果：http://jsfiddle.net/nnnnnn/svM4h/1/

【讨论】：

为什么需要计算两个操作数？我的意思是，如果至少有一个验证失败，那么表单不会无效吗？
@gion_13 实际上 nnnnnn 可能有一点在这里 OP 可能在每个验证函数中都有一些东西突出显示它检查为无效的输入。也许这是OP想要工作的......
@gion_13 - 我猜他或她希望运行所有验证，以便用户立即了解所有问题 - 也许各个验证功能通过更改背景颜色或其他方式突出显示错误。我只是告诉他或她如何这样做，而不是告诉他或她是否是个好主意，尽管作为用户，我更喜欢一次看到所有错误...
基本上，在每个函数中，它都会检查用户输入的输入是否符合规则，例如validatePhone()，它检查输入是否都是数字，如果不是，它给出一个警报。每个功能都是这样的..
我展示的代码可以做到这一点。但我建议不要显示多个警报，这对用户来说很烦人。（我知道我在我的演示中做到了，但这只是一个 demo 来展示& 如何满足您的要求。）最好在最后显示一个带有所有错误摘要的警报。或者用不同的颜色突出显示无效字段并显示一条消息，要求用户更正这些字段。

【解决方案2】：

更改您的代码以使用 AND 而不是 OR

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

原因是如果您使用 OR 一旦第一个函数返回 true javascript 就不会费心检查其他函数。此外，您不想使用 OR，因为如果第一次检查为假而第二次检查为真，则表单仍将提交，因为您的至少一项检查为 TRUE。

请参阅fiddle 以显示此工作原理，两个检查都执行并显示警告消息，但由于 check2 返回 false 表单不会提交 - 如果您想玩转 checks1 和 check2 函数的返回结果以及使用&& 和 ||

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

onsubmit="return ((validateName() & validatePhone() & validateAddress() & validateEmail()) == 1)"

【讨论】：

我试过了，但它只检查 validateName() 而不是其他的.. :S
@user1561559 见添加的小提琴 - 这行得通！这意味着您的验证功能存在问题...
您的小提琴有效，因为第一个函数返回 true。如果您更改它以使第一个函数返回 false，则不会调用第二个函数。 OP 希望所有函数都被调用，而不管它们单独返回什么，然后返回它们所有单独返回的结果。
有没有人知道如何做到这一点：S 没有答案有效:(
@nnnnnn 我现在看到了问题，所有验证函数也必须执行并返回 true - 作为建议，应该使用单个 &

【解决方案3】：

如果您只需要在继续之前确保所有函数都返回 true，则使用 && 而不是 || 并确保表达式不会被返回函数过早地求值，请放置一些额外的括号

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

【讨论】：

是的，我试过了，但它只检查 validateName() 而不是其他的......：S
您是否尝试添加另一组括号来确保？
如果 ValidateNames() 为 false，则无需验证其余条件。这就是使用 && 的原因。你是说即使其余函数返回 false，但 validateNames() 为 true，那么总体返回为 TRUE？
不，只有最后一个影响整体，因此 validateEmail()。如果 validateEmail() 返回 true，则总体为 true，其余无所谓
@user1561559 如果你只需要最后一个是true，那么把它们分开声明，return只有最后一个结果——onsubmit="validateName(); validatePhone(); validateAddress(); return validateEmail();"

【解决方案4】：

创建一个包装函数，它调用每个函数并检查它们的返回值。在任何时候，如果返回值为 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();">

Here is a working JSFiddle Example.

编辑：在下面做了一个嘘声，更正了。

使用 OR 是不正确的，但 AND 无法按预期工作的原因是 Short-circuit_evaluation。

或：在第一个为真的操作数上停止计算并返回真

AND : 计算在第一个为 false 的操作数处停止并返回 false

【讨论】：

我刚试过这个，它检查了validateForm()中的所有函数后仍然会重定向到action="checked.html"
用稍微改变的示例代码和工作 jsfilddle 示例更新了答案。现在可以测试了吗？
不，这不是懒惰的评估，而是短路。 en.wikipedia.org/wiki/Short-circuit_evaluation
啊，你说得对……看来我学错了，今天学了点

【解决方案5】：

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

使用此代码

【讨论】：

【解决方案6】：

为了验证我的表单，我简单地创建了一个名为 validateForm(){} 的函数，然后在这个函数中我放置了完全验证所需的所有代码。然后使用 onsubmit="validateForm()"。它按顺序检查它，只有在所有条件都为真时才提交。

【讨论】：

【解决方案7】：

以下方法检查第一个 validateName() 函数，如果只有第一个函数为真，它将处理检查下一个函数，同样要触发第三个函数需要返回第一个和第二个函数的 true。所以想象一下，如果所有函数都无效，即使你有不同的错误消息，你也只会看到第一个函数的错误消息。一旦 validateName() 函数通过，您可能会看到 validatePhone() 等的错误消息。

<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; } ">

【讨论】：