2

我终于可以在其他浏览器中测试我的网站了（主要是在 Chrome 中构建的）。不幸的是，很多东西的功能似乎不同。我将从第一个问题开始：登录时，我有一个 JS/jQuery 检查以确保用户名和密码匹配，并且在失败时它应该停止提交。

然而，虽然它在 Chrome 和 Safari 中有效，但在 Mozilla 和 IE 中，提交仍在进行中（点击道歉页面，但我仍然宁愿根本看不到）。

我已经尝试替代event.preventDefault()或e.preventDefault()但evt.preventDefault()它们都不起作用，表单仍然提交（并且对于后两个它使它也可以在 Chrome 中提交）。这是我的代码，希望有任何想法：

function checkLogin()
{
    // get the variables, execute some other checks (eg, things not blank)

    // run ajax code to determine if pieces match
    $.ajax({
    type: "POST",
    url: "check_login.php", 
    data: {'username': username, 'password': password},
    async: false,
    success: function(result) 
    {
      if (result == 1)
      {
        $('#loginoff').html("Invalid username/password");
        e.preventDefault();
        return false;
      } 
      else
      {
        $('#loginoff').html("");
        return true;
      } 
    }
    });
}

请注意，当用户名和密码不匹配时，该函数肯定会通过并返回 1，因为在所有情况下，都会出现“无效的用户名/密码”消息。

此外，如果有人对 HTML 感兴趣：

<form action="login.php" method="post" onsubmit="return checkLogin()">
<!-- code for inputs, eg username -->
<input type="submit" class="btn" value="Log In"/>
</form>
4

5 回答 5

6

我建议先阻止该事件，然后当您希望提交表单时，请使用本机提交方法，因为它绕过了 jQuery。

var form = document.getElementById("formid");
$(form).submit(function(e){
    e.preventDefault();

    $.ajax({
        type: "POST",
        url: "check_login.php",
        data: {
            'username': username,
            'password': password
        },
        //async: false,
        success: function (result) {
            if (result == 1) {
                $('#loginoff').html("Invalid username/password");
            } else {
                $('#loginoff').html("");
                form.submit(); // note, form is a form NODE, not a jQuery object containing a form.
            }
        }
    });

});

这也允许您删除async: false始终是一件好事（网络工作者除外。）

于 2013-01-23T18:21:41.847 回答
2

将控制台设置为保留 console.log。您应该会看到一个 JavaScript 错误

e.preventDefault();  //<--trying to prevent the form from submitting

在哪里e定义？

function checkLogin()  <-- No e defined

您将遇到一个错误，这意味着表单将提交，因为没有任何东西阻止它停止。

function checkLogin(e) {
    e = e || window.event;

并且由于它不是 jQuery 包装的事件对象，因此您需要这样做

$.Event(e).preventDefault();
于 2013-01-23T18:59:25.167 回答
0

我最终想出了如何让它在一般情况下工作：

在该部分中，函数应写为：

请注意“事件”作为 checkLogin 的输入

然后我使用的功能如下。主要更改是 a.) 在开始时阻止默认提交（注意，$.Event(e) 是必需的，否则它在 IE 中不起作用），b.) 使用 getElementById 定义表单，c.) 提交函数使用 form.submit()。希望人们觉得这很有帮助。

function checkLogin(e)
{
var form = document.getElementById("mainloginform");
$.Event(e).preventDefault();

// set error counter
var counter = 0;
var username = $('#loginusername').val();
var password = $('#loginpassword').val();

// check that username is not blank
 if (username==null || username=="")
{
    $('#usernameoff').html("Must enter your username");
    counter++;
}
else
{
    $('#usernameoff').html("");
}

// check that password is not blank
 if (password==null || password=="")
{
    $('#passwordoff').html("Must enter your password");
    counter++;
}
else
{
    $('#passwordoff').html("");
}

// if counter zero at this point, return false, else return true
if (counter > 0)
{
    return false;
}
else
{
    $.post("check_login.php", {'username': username, 'password': password}, function(result)
    {
        if(result == 1)
        {
            $('#loginoff').html("Invalid username/password");
            return false;
        }
        else
        {
            $('#loginoff').html("");
            form.submit();
            return true;
        }
    });
}
}
于 2013-01-23T22:14:25.750 回答
0

除了别人提到的ajax问题，IE8没有做preventDefault()。

IE8的PreventDefault替代品

(event.preventDefault) ? event.preventDefault() : event.returnValue = false;
于 2013-01-23T18:15:04.627 回答
0

不幸的是，我无法像标题中希望的那样做，因为我永远无法成功阻止所有四种浏览器中的提交（Mozilla 一直坚持不懈）。

然后，我最终做了以下事情：

1.) 在我的 HTML 中，我更改了边界，使其仅包含输入，但“提交”按钮位于

2.) 然后，我没有像以前那样将“return checkLogin()”移到提交按钮（现在在表单之外）并将其更改为“onclick”。

3.) 这样，我不需要任何 preventDefault() 因为没有发生默认值。我只是去了ajax请求，在'return true'的情况下，将它设置为 $('#mainform').submit();

注意：通过这样做，我还能够使 ajax 请求不再是异步的，每个人都说这很好（我还是新手，所以不确定它的重要性）。

希望这可以帮助遇到相同问题的任何人。

于 2013-01-23T19:58:59.613 回答