Javascript 提交多个javascript函数

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11806253/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 07:10:33  来源:igfitidea点击:

onsubmit multiple javascript functions

javascriptformsfunctiononsubmit

提问by Maria

Does anyone know how to onsubmit multiple functions? What I intented to do was: onsubmit checks if all these functions return true, if all of them return true, then I do the action="checked.html"

有谁知道如何提交多个功能?我打算做的是:onsubmit 检查所有这些函数是否都返回 true,如果它们都返回 true,那么我执行 action="checked.html"

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

However, what actually happened was, the computer checks the code from left to right, and the result of the next function will replace the previous one, and so on, until the end. So, even if all the 3 first functions return false, as long as the last one is true, the computer will execute action="checked.html", which is not what I intented to do... can anyone please help me on this, it's been like 4 hours I'm trying to fix it :S Thanks!

然而,实际发生的事情是,计算机从左到右检查代码,下一个函数的结果会替换上一个,依此类推,直到结束。因此,即使所有 3 个第一个函数都返回 false,只要最后一个函数为 true,计算机就会执行 action="checked.html",这不是我打算做的……任何人都可以帮助我这个,我试图修复它已经有 4 个小时了:S 谢谢!

Also, when I tried to do something like <form onsubmit="return verify1() && verify2()">, it doesn't work, all it does is to check verify1(), and not the following ones... :(

另外,当我尝试做类似的事情时<form onsubmit="return verify1() && verify2()">,它不起作用,它所做的只是检查verify1(),而不是以下那些...... :(

CLARIFCATION: On submit, I want four validation functions to be called. Submit should be prevented unless all four functions return true, but all four should always be called even if some of them return false.

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

回答by nnnnnn

Use &instead of &&.

使用&代替&&

&&uses short-circuit evaluation and so doesn't evaluate the right-hand operand if the left-hand operand is falsy.

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

&always evaluates both operands.

&总是计算两个操作数。

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

EDIT: Sorry, I forgot that &won't return an actual boolean. Wrap the expression in parentheses and use a double !to convert it as (now) shown. (You wouldn't need to worry if using the result in an iftest, but the return value from the event handler should be an actual boolean.)

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

P.S.: Here's a rather clunky demo to show that all four functions get called but produce the overall true or false result that you need: http://jsfiddle.net/nnnnnn/svM4h/1/

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

回答by Chris Moutray

Change your code to use AND instead of OR

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

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

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

The reason being that if you use OR once that first function returns true javascript won't bother to check the other functions. Also you don't want to use OR because if the first check was false and second is true the form will still submit since at least one of your checks is TRUE.

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

See fiddleto show this works, both checks execute and show an alert message but because check2 returns false the form doesn't submit - if you want play around with the return results of checks1 and check2 functions and the use of && and ||

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

After understanding the problem better, you need to use a single &, but because true & truereturns 1 and not trueyou need to write it like this

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

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

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

回答by Ahmad

if all you need is make sure all functions return true before proceeding, then use &&not ||and to insure that the expression does not get evaluated pre-maturally by the return function put some extra brackets

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

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

回答by Akshet

Create a wrapper function, which call each function and checks their return value. At any time if the return value is false you can either stop the form submit by returning false at that time or evaluate the rest of the things and finally return false.

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

So JS a code that will do what you want is :

所以 JS 一个可以做你想做的代码是:

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

Now in the form simply use :

现在在表格中简单地使用:

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

Here is a working JSFiddle Example.

这是一个有效的 JSFiddle 示例。

EDIT : Made a boo boo below, corrected.

编辑:在下面发出嘘声,更正了。

Using OR was incorrect, but the reason AND is not working how you are expecting is because of Short-circuit_evaluation.

使用 OR 是不正确的,但是 AND 没有按照您的预期工作的原因是因为Short-circuit_evaluation

  • OR : Evaluation stops on first operand which is true and true is returned
  • OR:评估在第一个为真的操作数上停止,并返回真
  • AND : Evaluation stops on first operand which is false and false is returned
  • AND :评估在第一个为假的操作数上停止,并返回假
  • 回答by Akram Ali

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

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

    use this code

    使用此代码

    回答by Conor

    To validate my form I simply created a function called validateForm(){} then inside this function I put all the code which is needed for full validation. Then used onsubmit="validateForm()". It checks through it in order and only submits if all conditions are true.

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

    回答by Prasad Gayan

    Following method check first validateName() function and it will process to check next function if only first function is true, also to fire third function need to return true of first & second function. So just imagine if all function are invalid & even you have different error message, you will see only error message of first function. Once validateName() function pass, you may see the error message of validatePhone() ect.

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

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

    You can't use above if you going to show error messages according to above all validations on first submit & you can use following method if you want to fire all function (or display all validation errors) on submit.

    如果要在第一次提交时根据上述所有验证显示错误消息,则不能使用上面的方法,如果要在提交时触发所有函数(或显示所有验证错误),则可以使用以下方法。

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