Question

我有一个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检查显示元素，并且如果检查所有字段不正确，也尝试不让用户发送信息。

我错过了什么？

由于

Answer 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;
    }
}

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

1 个答案: