用于多个功能检查的 javascript onsubmit 事件不起作用答案

【问题标题】：javascript onsubmit event for multiple functions check doesn't work用于多个功能检查的 javascript onsubmit 事件不起作用
【发布时间】：2015-12-05 19:24:24
【问题描述】：

在 mi 验证表单中，我有两个输入字段，以便编写电子邮件并进行确认。在提交信息之前，需要两个确认： 1-email 必须看起来像一封电子邮件， 2-电子邮件一必须匹配电子邮件二。我可以使用两个单独的 javascript 函数处理这些语句，但是当我尝试在 onsubmit 事件属性中检查它们时失败了。如果我写了正确的电子邮件地址，即使确认电子邮件不匹配，表单也会到达操作目的地。浏览网络对我没有帮助。这是代码（html/javascript）：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Email Validation</title>

    <script type="text/javascript">

        function isEmail(email, output) {
            var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;        
            var email = document.getElementById(email).value;

            if (regex.test(email)) {
                return true;
            } else {
                document.getElementById(output).innerHTML = 'wrong email';
                return false;
            }
        }


        function compareEmail(email, emailToCompare, output){
            var email = document.getElementById(email).value;
            var emailToCompare = document.getElementById(emailToCompare).value;

            if(emailToCompare == email){
                document.getElementById(output).innerHTML = 'ok!';
                return true;
            }else{
                document.getElementById(output).innerHTML = 'emails dont match!';
                return false;
            }
        }


        function check(){
            return isEmail() && compareEmail();
        }

    </script>

</head>

<body>

    <form action="file.php" method="post" onSubmit="return check()">
        <p>Email</p>
        <input type="text" name="email" maxlength="50" id="email">
        <div id="email_result">
        </div>
        <br/>
        <p>Confirm email</p>
        <input type="text" onpaste="return false;" autocomplete="off" name="email" maxlength="50" id="confirm_email" onKeyUp="return compareEmail('email', 'confirm_email', 'confirm_email_result')">
        <div id="confirm_email_result">
        </div>

        <input type="submit" name="submit" value="Register" onclick="return isEmail('email', 'email_result');">
    </form>

</body>

双重控制也不适用于以下脚本：

function check(){
    if (isEmail() && compareEmail()){
        return true;
    }else{
        return false;
    }
}

如果我使用，什么都不会改变：

onSubmit="return check()"

或

onSubmit="check()"

在表单事件属性中。

【问题讨论】：

标签： javascript html forms email events

【解决方案1】：

您在函数调用中缺少参数：

function check(){
  return isEmail('email', 'email_result') && compareEmail('email', 'confirm_email', 'confirm_email_result');
}

旁注：您在函数中声明了与参数同名的变量。它仍然可以正常工作，但是实际上并没有创建变量而是会覆盖参数值，因此代码有点混乱。

【讨论】：

谢谢古法！它现在可以工作了，感谢关于变量与参数的建议，我重写了没有参数的代码。