Javascript 表单验证不返回任何内容答案

【问题标题】：Javascript form validation doesn't return anythingJavascript 表单验证不返回任何内容
【发布时间】：2016-09-04 18:58:03
【问题描述】：

我有一个带有一些字段的 HTML 表单和一个检查它们的 javascript 验证，我的问题是 js 不返回任何内容，尽管这些字段没有正确填写提交发送。

这是我的代码示例：

HTML

<form method="post" action="action.php" onsubmit="return validate_form();">
       <table>
          <tr>
             <td>
                <label class="standard_text">
                   E-mail
                </label>
             </td>
             <td><input class="textarea" required type="email" name="mail" id="mail" placeholder="E-mail"></label></td>
             <td><div class="check_icon icon_yes" style="display:none" id="mail_ok_icon"></div></td>
             <td><div class="check_icon icon_no" style="display:none" id="mail_no_icon"></div></label></td>
             <td><div class="check_message" style="display:none" id="mail_message"><label class="important_text">The email format is not correct!</label></div></td>
          </tr>
       </table>
       <input class="button_submit" type="submit" name="send_form" value="Register"/>
</form>

Javascript

function validate_form(){

    //email var
    var mail = document.getElementById("mail").value;
    var mail_ok_icon = document.getElementById("mail_ok_icon");
    var mail_no_icon = document.getElementById("mail_no_icon");
    var mail_message = document.getElementById("mail_message");

    //email format check
    if ((/(.+)@(.+){2,}\.(.+){2,}/.test(mail)) || mail=="" || mail==null) {
        mail_no_icon.style.display="block";
        mail_message.style.display="block"; 
        return(false);

    } else {
        mail_ok_icon.style.display="block";
    }
}

因此，我尝试根据 javascript 检查显示元素，并且如果所有字段的检查都不正确，也尝试不让用户发送信息。

我错过了什么？

谢谢

【问题讨论】：

else 部分不返回任何内容。这将使函数隐式返回undefined。

标签： javascript html forms validation

【解决方案1】：

我得到了它使用以下代码 - ：

在原始代码中，电子邮件输入具有required 和type="email"，它们在第一个实例中从未调用过javascript 代码。

<html>
<head>
    <script type="text/javascript" src="test.js"></script>
</head>
<body>
    <form method="post" action="action.php" onsubmit="return validate_form();">
       <table>
          <tr>
            <td>
              <label class="standard_text">
               E-mail
              </label>
            </td>
            <td><input class="textarea"  name="mail" id="mail" placeholder="E-mail"></label></td>
            <td><div class="check_icon icon_yes" style="display:none" id="mail_ok_icon"></div></td>
            <td><div class="check_icon icon_no" style="display:none" id="mail_no_icon"></div></label></td>
            <td><div class="check_message" style="display:none" id="mail_message"><label class="important_text">The email format is not correct!</label></div></td>
         </tr>
       </table>
       <input class="button_submit" type="submit" name="send_form" value="Register"/>
    </form>
</body>
</html>

现在是js代码-:

 function validate_form() {
    //email var
    var mail = document.getElementById("mail").value;
    var mail_ok_icon = document.getElementById("mail_ok_icon");
    var mail_no_icon = document.getElementById("mail_no_icon");
    var mail_message = document.getElementById("mail_message");

    //email format check
    if (!(/(.+)@(.+){2,}\.(.+){2,}/.test(mail)) || mail=="" || mail==null) {
        mail_no_icon.style.display="block";
        mail_message.style.display="block"; 
        console.log('hi');        
        return false;
    } else {
        mail_ok_icon.style.display="block";
        return true;
    }
}

【讨论】：

@AleixGalletSegarra @nitin 不建议删除 type="email" 或 required，因为这些是 HTML 标准，即使禁用了 javascript，也可以按预期进行验证。您只需要在正则表达式检查和return语句之前更改!的js逻辑即可更正您的代码。
@AleixGalletSegarra 如果有效，那么您可能会接受答案。
谢谢，会试试这个 ;) @Nitin Misra “！声望低于 15 人的投票将被记录，但不要更改公开显示的帖子得分”