Javascript 有史以来最奇怪的函数重复调用_Javascript_Function_Validation

Javascript 有史以来最奇怪的函数重复调用

javascript function validation

Javascript 有史以来最奇怪的函数重复调用,javascript,function,validation,Javascript,Function,Validation,我做了一份问卷表，但在验证方面有问题。单击submit按钮时会调用几个验证函数。但是第一个验证函数会被调用两次。为了说明这个问题，我制作了一个具有相同问题的裸体版本。这是全部源代码： <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Demo Double Call</title> </head> <body> &l

我做了一份问卷表，但在验证方面有问题。单击submit按钮时会调用几个验证函数。但是第一个验证函数会被调用两次。为了说明这个问题，我制作了一个具有相同问题的裸体版本。这是全部源代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo Double Call</title>
</head>
<body>
<form name="upssForm" action="submit.php" method="POST" onsubmit="return validateForm()">
    A1 <input type="radio" name="A" value="1">
    A2 <input type="radio" name="A" value="2"><br>
    B1 <input type="radio" name="B" value="1">
    B2 <input type="radio" name="B" value="2"><br>
    <button type="button" onclick="validateForm()">Validate and submit button</button><br>
    <input type="submit" value="Validate and submit input">
</form>
<script>
function checkA() {
    var radioA = upssForm.elements['A'];
    if (radioA[0].checked == false) {
        alert('A1 not checked');
        return false;
    }
    else return true;
}

function checkB() {
    var radioB = upssForm.elements['B'];
    if (radioB[0].checked == false) {
        alert('B1 not checked');
        return false;
    }
    else return true;
}

function validateForm() {
    checkA();
    checkB();
    if ((checkA() == false) || (checkB() == false))
        return false;
    else
        upssForm.submit();
        // return true; /* doesn't work either with the submit input */
}
</script>
</body>
</html>


演示双人通话
A1
A2

地下一层
B2

验证和提交按钮

函数checkA（）{
var radioA=上升形式的元素['A']；
if（radioA[0]。选中==false）{
警报（“A1未选中”）；
返回false；
}
否则返回true；
}
函数检查b（）{
var radioB=上升形式的元素['B']；
if（radioB[0]。选中==false）{
警报（“B1未检查”）；
返回false；
}
否则返回true；
}
函数validateForm（）{
checkA（）；
检查b（）；
如果（（checkA（）==false）| |（checkB（）==false））
返回false；
其他的
upsform.submit（）；
//返回true；/*对提交输入也不起作用*/
}

只需单击submit按钮或submit输入，就会看到警报“A1 not checked”出现两次，第二次是在执行函数checkB（）之后。这是什么原因造成的，我该如何解决

您要调用两次

checkA（）

，一次在

validateForm（）

的开头，一次在

if（）

语句中

将结果存储在变量中，然后在

if（）

语句中检查：

var aResult = checkA();
if(aResult == false) {
}

您将调用两次

checkA（）

，一次在

validateForm（）

的开头，一次在

if（）

语句中

将结果存储在变量中，然后在

if（）

语句中检查：

var aResult = checkA();
if(aResult == false) {
}

野生甲壳类动物给出的答案确实解决了这个问题。为了记录和将来的参考，我将给出整个函数的应该是什么：

function validateForm() {
    var aResult = checkA();
    var bResult = checkB();
    if ((aResult == false) || (bResult == false))
        return false;
    else
        upssForm.submit();
}

谢谢，兄弟

野生甲壳类动物给出的答案确实解决了这个问题。为了记录和将来的参考，我将给出整个函数的应该是什么：

function validateForm() {
    var aResult = checkA();
    var bResult = checkB();
    if ((aResult == false) || (bResult == false))
        return false;
    else
        upssForm.submit();
}

谢谢，兄弟

还有另一种方法：

function validateForm() {
    if ((result = (checkA() && checkB()))){
        upssForm.submit();
    }

    return result;
}

这样，您的函数总是返回有关它是否成功的信息。这里需要注意的另一件事是：在JavaScript中，赋值语句返回赋值的值。我们不必单独分配结果值，因为我们可以在

if

条件中调用它

要记住一件事：

checkB（）

只有在

checkA（）

成功时才会运行。如果需要两者都执行，请将它们的值赋给一个变量，然后检查这些变量。

还有另一种方法：

function validateForm() {
    if ((result = (checkA() && checkB()))){
        upssForm.submit();
    }

    return result;
}

if

条件中调用它

要记住一件事：

checkB（）

只有在

checkA（）

成功时才会运行。如果您需要它们都执行，请将它们的值赋给一个变量，然后检查这些变量。

野生甲壳类动物的答案是正确的，所以我已经编辑了我的答案。仅供参考，您可能需要重构

if

语句。例如，

if（foo==false）

与

if（！foo）

相同（但有趣的是，

if（foo==false）

不是）。所以，结合Wildcarplacean的答案，去掉一些多余的代码：

function checkA() {
    var radioA = upssForm.elements['A'];
    if (!radioA[0].checked) {
        alert('A1 not checked');
    }
    return radioA[0].checked;
}

//function checkB() { ...

function validateForm() {
    var a = checkA();
    var b = checkB();
    if (a && b) {
        upssForm.submit();
    } 
    return false;
}

validateForm

总是返回

false

，这没关系，因为影响任何事情的唯一时间是用户在表单无效时单击输入（而不是按钮）

演示：

事实上，如果您不介意奇怪的代码，您可以利用布尔短路来进一步缩减代码：

function checkA() {
    var radioA = upssForm.elements['A'];
    return radioA[0].checked || alert('A1 not checked');
}

function checkB() {
    var radioB = upssForm.elements['B'];
    return radioB[0].checked || alert('B1 not checked');
}

function validateForm() {
    var a = checkA(),
        b = checkB();
    return a && b && upssForm.submit();
}

演示：