Question

我正在设计一个网页，用于检查指定的电子邮件是否可用。如果有，那么我必须停止提交表格。

我使用ajax实时检查电子邮件，并将响应更新为span消息。如果我单击“提交”按钮，即使数据库中已经提供了电子邮件，表单仍将提交并被重定向到另一个页面。请帮助我摆脱困境。预先感谢。

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        function checkemail() {
            var email=document.getElementById( "UserEmail" ).value;

            if(email) {
                $.ajax({
                    type: 'post',
                    url: 'check.php',
                    data: {
                        user_email:email,
                    },
                    success: function (response) {
                        $( '#email_status' ).html(response);
                    }
                });
            }
        }

        function validateForm(){
        var a=document.getElementById("email_status").innerHTML;
        var b="Email Already Exist";
        if(a==b)
        alert('Yes');
        else
        alert('No');
        }
    </script>
</head>
<body>

<form method="POST" action="insertdata.php" onsubmit="return validateForm();">
    <input type="text" name="useremail" id="UserEmail" onkeyup="checkemail();">
    <span id="email_status"></span><br>
    <input type="submit" name="submit_form" value="Submit">
</form>

当我给出已经在db中的电子邮件时的预期结果：是。实际结果：不

Answer 1

您的代码存在设计问题。 1.最大的一个是您在用户键入时发出ajax调用请求，这可能会给您带来很大的开销。 2.相同的设计导致验证无法正常工作。

允许我提出建议。

 <form method="POST" action="insertdata.php" id="form" onsubmit="return false;">
    <input type="text" name="useremail" id="UserEmail" >
    <span id="email_status"></span><br>
    <input type="submit" name="submit_form" value="Submit" onClick="checkemail();">
    </form>

通过这种方法，我从输入中删除了keyup事件，并在单击按钮时添加了功能checkemail（）。

var emails = [];
function checkemail() {
    var email = document.getElementById('UserEmail').value;
    if (email) {
        if (!emails.includes(email)) {
            $.ajax({
                type: 'post',
                url: 'check.php',
                data: {
                    user_email: email,
                },
                success: function (response) {
                    $('#email_status').html(response);
                    if (response == 'Email Already Exist') {
                        console.log("email "+email+" is a spam")
                        emails.push(email);
                    } else {
                        document.getElementById('form').setAttribute('onsubmit', 'return true;');
                        document.getElementById('form').submit;
                    }
                }
            });
        }else{
            console.log("email "+email+" is a spam")
        }
    }

}

在这种设计方法中，代码确实 1.单击按钮执行检查电子邮件功能 2.checkemail函数检查电子邮件数组是否包含来自文本输入的电子邮件，如果电子邮件在数组中，则在控制台中写入日志，如果没有，则完成ajax requset。 3.如果电子邮件在数据库中，则创建另一个日志，否则提交表单。

此方法提供了保留用户可能写的每封电子邮件的功能。我还建议您使用ajax脚本而不是返回文本消息来返回代码（可能为0或1），这样比较安全。

最后但并非最不重要的一点，尽管我不知道您打算在哪里使用该代码，但请记住，一个机器人可能会绕过此Java脚本代码，直接击中您的服务器端脚本。因此，您还应该考虑服务器端检查。如果您需要更多帮助或澄清，请随时询问。

如果innerHTML值等于指定值，则停止提交

1 个答案: