HTML 表单操作和提交问题

Posted 2023-02-16

【中文标题】HTML 表单操作和提交问题

【英文标题】：HTML form action and onsubmit issues

【发布时间】：2013-04-22 04:24:33

【问题描述】：

我想对一些文本框条目运行 javascript 用户验证。

我遇到的问题是我的表单具有转到我们网站内新页面的操作，而 onsubmit 属性从不运行 JavaScript 函数。

有没有更好的解决方案，或者可以使用以下代码的解决方案：注意：如果您将操作切换到checkRegistration()，JavaScript 文件编写正确并且可以工作。

这只是运行动作和 JavaScript 的问题。

<form name="registerForm" action="validate.html" onsubmit="checkRegistration()" method="post">
    <!-- Textboxes are here -->
    <!-- And the submit button -->
</form>

【问题讨论】：

你也可以分享checkRegistration吗

它有效，它只是检查用户名文本框是否是电子邮件等等。这不是 javascript 中的错误问题。

【参考方案1】：

试试：

onsubmit="checkRegistration(event.preventDefault())"

【讨论】：

为什么？有没有理由认为checkRegistration 会消耗event.preventDefault() 的结果？

@NicoHaase：我需要防止表单提交页面刷新并使用event.preventDefault() 提供函数checkRegistration()（或我使用的任何函数）@ 不会破坏脚本并且完全符合我的需要。

【参考方案2】：

您应该通过在 onsubmit 回调上返回 false 来停止提交过程。

<script>
    function checkRegistration()
        if(!form_valid)
            alert('Given data is not correct');
            return false;
        
        return true;
    
</script>

<form onsubmit="return checkRegistration()"...

这里有一个完整的示例。表单只有在输入google时才会提交，否则会返回错误：

<script>
    function checkRegistration()
        var form_valid = (document.getElementById('some_input').value == 'google');
        if(!form_valid)
            alert('Given data is incorrect');
            return false;
        
        return true;
    
</script>

<form onsubmit="return checkRegistration()" method="get" action="http://google.com">
    Write google to go to google...<br/>
    <input type="text" id="some_input" value=""/>
    <input type="submit" value="google it"/>
</form>

【讨论】：

所以在我的 js 文件中，如果没有错误，我将返回 true，否则返回 false，它不会提交并重定向到验证 html 页面？对吗？

不完全是。如果您返回 true 表单将被提交并且浏览器将发出请求。如果您返回 false 浏览器将停止，一切都在您手中如何处理。最简单的方法是警告验证问题，例如示例。

它正在工作，但我得到的是 304 响应，而不是 200。这将如何导致？

表单提交到 validate.html 后？你收到服务器的任何响应了吗？

重要的变化似乎是在onsubmit=""中包含return。

【参考方案3】：

试试

onsubmit="return checkRegistration()"

【讨论】：

为什么验证功能需要return？