提交多个javascript函数

IT技术 javascript forms function onsubmit
2021-03-15 09:40:31

有谁知道如何提交多个函数?我打算做的是: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(),而不是以下那些...... :(

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

6个回答

使用&代替&&

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

& 总是计算两个操作数。

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

编辑:抱歉,我忘记了&不会返回实际的布尔值。将表达式括在括号中并使用 double!将其转换为(现在)所示。(如果在if测试中使用结果,您无需担心,但事件处理程序的返回值应该是实际的布尔值。)

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

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

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

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

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

请参阅小提琴以显示此作品,两个检查都执行并显示警报消息,但由于 check2 返回 false,因此表单不会提交 - 如果您想玩弄检查 1 和 check2 函数的返回结果以及 && 和 || 的使用

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

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

@nnnnnn 我现在看到了问题,所有验证函数都必须执行并返回 true - 作为建议,应该使用单个 &
2021-05-07 09:40:31
您的小提琴有效,因为第一个函数返回 true。如果您更改它以使第一个函数返回 false,则不会调用第二个函数。OP 想要调用所有函数,而不管它们单独返回什么,然后返回对所有单独返回进行 AND 运算的结果。
2021-05-09 09:40:31
@user1561559 请参阅添加的小提琴 - 这有效!这意味着您的验证功能存在问题...
2021-05-10 09:40:31
有没有人有任何其他想法如何做到这一点:S 没有答案是有效的 :(
2021-05-10 09:40:31
我试过这个,但它只检查 validateName() 而不是其他的 .. :S
2021-05-13 09:40:31

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

<form id="myForm" name="myForm" action="checked.html" method="post"
onsubmit="return (validateName() && validatePhone() && validateAddress() &&
validateEmail() )">
您是否尝试添加另一组括号以确保?
2021-04-22 09:40:31
是的,我试过了,但它只检查 validateName() 而不是其他的 .. :S
2021-05-04 09:40:31
如果 ValidateNames() 为 false,则无需验证其余条件。这就是使用 && 的原因。您是说即使其余函数返回 false,但 validateNames() 为 true,那么总体返回为 TRUE?
2021-05-04 09:40:31
不,只有最后一个影响整体,因此validateEmail()。如果validateEmail() 返回true,则总体为true,其余无所谓
2021-05-05 09:40:31
@user1561559 如果您只需要最后一个true,那么将它们分开声明并且return只需要最后一个结果-onsubmit="validateName(); validatePhone(); validateAddress(); return validateEmail();"
2021-05-18 09:40:31

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

  • OR:评估在第一个为真的操作数上停止,并返回真
  • AND :评估在第一个为假的操作数上停止,并返回假
  • 使用稍微更改的示例代码和工作 jsfilddle 示例更新了答案。你现在可以测试吗?
    2021-04-28 09:40:31
    不,这不是懒惰的评估,而是短路。en.wikipedia.org/wiki/Short-circuit_evaluation
    2021-04-29 09:40:31
    我刚试过这个,在检查 validateForm() 中的所有函数后,它仍然会重定向到 action="checked.html"
    2021-05-18 09:40:31
    啊,你说得对...看来我学错了,今天学到的东西
    2021-05-20 09:40:31

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

    使用此代码