HTML 和 JavaScript。 onSubmit 从不阻止表单被发布

Question

我正在建立一个网页，让人们注册一个帐户。作为网页的要求，我需要使用 JavaScript 来验证他们的帐户信息（用户名和密码必须与特定密码匹配）。如果注册通过测试，我会将他们重定向到一个 php 页面，该页面将存储他们的信息。如果注册没有通过 JavaScript 测试，我希望用户留在同一页面上。

我已经修改我的代码几个小时了，我不明白为什么它不起作用。我删除了代码中所有非必要的内容，直到我可以模拟当 JavaScript returns 值为 false 时是否发布表单。我搜索了类似的问题，发现问题往往是人们忘记在他们的表格中输入 onsubmit="return function();" 。给出的另一个常见提示是使用我所做的 event.preventDefault(); 函数。这显然不是这里的问题。

<!Doctype html>
<html>
<head>
<script> 

function registrationCheck(){
    if(event.preventDefault){
        event.preventDefault();      
 }
    else{
        event.returnValue = false;
    }
    return false;
}

</script>
</head>
<body>

<form action="test1.html" onSubmit="return registrationCheck();" method="post" id="registration">
    Username: 
    <input type="text" name="username"> <br />
    <br />
    <input type="submit" value="Submit"> 
</form>

</body>
</html>

这段代码在我使用 Edge 进行测试时工作正常，但在 chrome 49.0.2623.110 m 和 firefox 45.0.1

下却惨遭失败

我做错了什么？

Answer 1

不要将 onsubmit 内嵌在表单标签中。

启动时通过JS绑定

如果您正在使用 jquery：

$('#registration').submit(function() { registrationCheck(); });

然后摆脱所有事件的东西，只是 return false。您目前永远不会到达 return 错误行，因为您正在尝试访问您未在函数声明中明确声明的事件对象，例如：

function registrationCheck(event) { }

如果你不需要事件对象来做你当前正在使用的其他任何事情，那么就去掉那些东西，因为你不需要防止默认或设置 return 值如果您使用的是 jquery.

Answer 2

如果您查看控制台，您可能会看到一些关于 'event' 未定义的错误。原因是虽然 IE（和 Edge）使用属性 window.event、Chrome 而大多数其他浏览器将 event 作为参数传递给事件处理程序。

所以行

function registrationCheck(){

应该换成这两行：

function registrationCheck(event){
  var event = event || window.event;

这将声明一个名为 'event' 的新局部变量，它获取事件参数或（如果为空）window 对象的事件属性的值.

Answer 3

尝试将事件传递给您的 registrationCheck() 函数：

function registrationCheck(event){
    if(event.preventDefault){
        event.preventDefault();      
    }
    else{
        event.returnValue = false;
    }
    return false;
}

HTML 和 JavaScript。 onSubmit 从不阻止表单被发布

HTML and JavaScript. onSubmit never blocks the form from being posted

javascript

html

forms

validation

onsubmit