当它不应该提交时，Mousedown 仍在提交表单

Question

您好，我有一个登录验证表单，它使用 jquery 和 ajax 的组合进行验证...如果值正常，则表单应提交，如果值不正常，则表单不应提交...但是在我的情况下，即使值不正确，表单也会提交（我正在使用 mousedown 功能）请参阅下面的代码..

<form method="post" name="loginform" action="models/login.php">
    <input type="email" class="homepage" name="user_email2" id="user_email2" placeholder="Email" maxlength="50" />
    <div class="errormsg" id="errormsg6"></div>
    <input type="password" class="homepage" name="user_password2" id="user_password2" placeholder="Password" maxlength="20" />
    <div class="errormsg" id="errormsg7"></div>
    <input type="submit" name="login" id="login" value="Submit">
    <div class="errormsglast" id="errormsg8"></div>
</form>

jquery 和 ajax

$(document).ready(function()
{
    /* ----------------- Login Validations Global Variables -----------------   */
    var user_email2 = "";
    var user_emailajax2 = "";
    var user_password2 = "";
    var user_passwordajax2 = "";
    var emailformat = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);

    /* ----------------- Define Validate Email */
    var validate_email_login = function()
    {
        var item5 = $("#user_email2").val().toLowerCase();
        if (item5.length < 6 || item5.length > 50)
        {
            $("#errormsg6").html("Email : 6 - 50 Characters");
            user_email2 = "";
        }
        else
        {
            $("#errormsg6").html("");
            user_email2 = item5;
            if (!emailformat.test(item5))
            {
                $("#errormsg6").html("Wrong Email Format");
                user_email2 = "";
            }
            else
            {
                $("#errormsg6").html("");
                user_email2 = item5;
                $.ajax(
                {
                    type: 'POST',
                    url: 'classes/validatelogin.php?f=1',
                    data: "user_email2=" + item5,
                    success: function(msg)
                    {
                        if (msg == "ok")
                        {
                            user_emailajax2 = "";
                            $("#errormsg6").html("Email Does Not Exist");
                        }
                        else if (msg == "exists")
                        {
                            user_emailajax2 = item5;
                            $("#errormsg6").html("");
                        }
                    }
                });
            }
        }
    }

    /* ----------------- Define Validate Password */
    var validate_password_login = function()
    {
        var item5 = $("#user_email2").val().toLowerCase();
        var item6 = $("#user_password2").val();

        if (item6.length < 8 || item6.length > 20)
        {
            $("#errormsg7").html("Password : 8-20 Characters");
            user_password2 = "";
        }
        else
        {
            $("#errormsg7").html("");
            user_password2 = item6;
            if (user_email2 != "" && user_emailajax2 != "")
            {
                $.ajax(
                {
                    method: "POST",
                    url: "classes/validatelogin.php?f=2",
                    data: "user_email2=" + item5 + "&user_password2=" + item6,
                    success: function(msg)
                    {
                        if (msg == "WrongPw")
                        {
                            user_passwordajax2 = "";
                            $("#errormsg7").html("Wrong Password - See Forgot Password");
                        }
                        else if (msg == "CorrectPw")
                        {
                            user_passwordajax2 = item6;
                            $("#errormsg7").html("");
                            /* window.location.href="manage-properties"; */
                        }
                    }
                });
            }
        }
    }




    /* ----------------- Run Functions */
    $("#user_email2").on('focusout', validate_email_login);
    $("#user_password2").on('focusout', validate_password_login);


    /* ----------------- Stop on Submit */
    $( "#login" ).mousedown(function() 
    {
        validate_email_login();
        validate_password_login();


        if (user_email2 == "" || user_emailajax2 == "" || user_password2 == "" || user_passwordajax2 == "")
        {
            $("#errormsg8").html("Please Fill All Fields (Correctly)");
            console.log("submit false");
            return false;
        }
        else
        {
            $("#errormsg8").html("");
            console.log("submit true");
            return true;
        }
    });
});

已尝试的解决方案 - 问题是当用户输入错误的事件时，这很好，但如果用户输入正确的值，提交第一次返回 false，然后第二次返回 true。 .. 它应该在第一次运行时返回 true

<input type="button" name="login" id="login" value="Submit">

    $( "#login" ).mousedown(function() 
    {
        validate_email_login();
        validate_password_login();


        if (user_email2 == "" || user_emailajax2 == "" || user_password2 == "" || user_passwordajax2 == "")
        {
            $("#errormsg8").html("Please Fill All Fields (Correctly)");
            console.log("submit false");
            return false;
        }
        else
        {
            $("#errormsg8").html("");
            console.log("submit true");
            $('[name=loginform]').submit();
        }
    });
});

Answer 1

没有 type="submit" 按钮，只有一个普通按钮，例如<input type="button" name="login" id="login" value="Submit">。然后，当您完成检查值并高兴它应该发送时，只需调用：

$('[name=loginform]').submit();

因为当前发生的是当您单击按钮时表单提交，因为您并没有阻止该事件的发生。

如果您想阻止表单提交，我建议您不要使用该按钮并像上面提到的那样自己启动提交，或者您可以在表单元素方式上使用 onsubmit="someFunction()"如果不应该提交则返回 false，如果应该提交则返回 true。

Answer 2

我会说您的代码存在一些问题和一些不良做法。 我看到您正在尝试学习 JS，所以请原谅我没有直接解决您的问题，而是给您一些指导并指出一些最佳实践。

1. 逻辑-

   您好像在做一个登录表单。我想说大多数检查不应该发生在客户端，而应该发生在服务器上。 当用户注册时，最好检查客户端上的用户名长度，并提示用户他不能使用他想注册的用户名，但是在登录期间，所有的客户服务都是我是否可以登录。

2. 安全性 -

   您的代码似乎有两个严重的安全问题

   1. 您允许使用“classes/validatelogin.php?f=1”测试电子邮件/用户是否存在。一般来说，如果用户和密码存在并且匹配用户应该能够登录，您应该始终一起测试它们，否则登录应该失败。您不应通知用户失败的原因（如果用户名不存在或存在但密码错误）。
   2. 您似乎没有在数据库中散列密码。我通过限制密码最大长度来假设它。让用户根据需要选择尽可能长的密码并使用安全的散列算法对其进行散列（我建议使用 bcrypt，但谷歌搜索并找到合适的）。我知道您只是在学习，但这非常重要我认为哈希是您在处理用户登录时需要学习的第一件事

3. 使用 DOM。

   你应该缓存你的 DOM 元素 所以不要在主函数范围集中一直调用 $('#id')

   var emailInput = $("#user_email2");  
   function submitForm() {
       var email = emailInput.val().toLowerCase();
       ...
   }
   

   您还应该设置元素的 text 值，而不是 html 现在无关紧要，但由于您正在设置文本值，因此这是一种很好的做法，将帮助您避免意外注入和错误。

4. 由于您使用 ajax，即使验证成功，也不应让表单自行提交。

5. 公共逻辑应该打包到函数中并重用。

   有很多地方可以将您的原始代码拆分为更短且可重用的函数

6. 更好地处理异步代码

   jQuery 在使用 ajax 请求时支持 Promise API，我宁愿使用它。如果您需要在它们之间进行同步，您的原始代码有一些异步调用，使用普通回调会很痛苦（这可能是首先导致您出现问题的原因）

这是一个使用我的建议的简化解决方案 -

$(document).ready(function() {
    "use strict";
    var emailInput = $("#user_email2"),
        emailError = $("#errormsg6"),
        passwordInput = $("#user_password2"),
        passwordError = $("#errormsg7");  

    function required (value) {
        if (value) {
            return true;
        } else {
            return false;
        }
        //this is just to make the code clear you could use 
        //`return value ? true : false` or  `return !!value`
    }

    $('form:eq(0)').on('submit', function (e) {
        var valid = true,
            email = emailInput.val(),
            password = passwordInput.val();

        e.preventDefault();

        if ( !required(email) ) {
            emailError.text('Email is required');
            valid = false;
        }

        if ( !required(password) ) {
            passwordError.text('Password is required');
            valid = false;
        }

        if ( valid ) {

            $.ajax({
                method: "POST",
                url: "login.php",
                data: {
                    email: email,
                    password: password
                }
            }).done(function (data, textStatus, jqXHR) {
                //redirect user to main page
            }).fail(function (jqXHR, textStatus, errorThrown) {
                //show the user the error
            })

        }
    });
});