使用 Javascript 表单验证更改 CSS答案

【问题标题】：Changing CSS with Javascript form validation使用 Javascript 表单验证更改 CSS
【发布时间】：2014-12-24 11:40:19
【问题描述】：

我有一个被 div 覆盖的网站。当有人输入正确的密码时，我想让 div 消失。我使用 Javascript 验证表单并成功将该 div 的 CSS 从 display:block 更改为 display:none，但在显示属性更改后它立即再次更改回默认值。我想要它，所以如果密码正确，#overlay 的显示将永远设置为无。

表格。

<form id="overlay-form" name="overlay-form" method="post" onsubmit="validateForm();">
<input id="overlay-password" name="overlay-password" type="password">
<input type="submit" id="overlay-submit" value="Submit">
</form>

Javascript。

<script>
    function validateForm() {
        var x = document.forms["overlay-form"]["overlay-password"].value;
            if (x == "password") {
                document.getElementById('overlay').style.display = "none";
            }
    }
</script>

【问题讨论】：

您要刷新页面还是..？这样，由于表单提交，页面将重新加载...表单正在恢复到初始状态，因为您实际上是通过提交表单来刷新页面，我认为您没有想提交它，但您只想使用常规按钮。 jsfiddle.net/zth0vkzo

标签： javascript html css validation

【解决方案1】：

默认情况下，表单提交会重新加载页面（如果给定，则重定向到操作 url）。如果您想阻止这种默认行为，请将其添加到您的 javascript：

function validateForm(event) { // pass in the event as a parameter, this is the form submit

    var x = document.forms["overlay-form"]["overlay-password"].value;
        if (x == "password") {
            document.getElementById('overlay').style.display = "none";
            event.preventDefault(); // prevent the default behaviour here
        }
}

【讨论】：

【解决方案2】：

当您按下提交按钮时，页面会重新加载，并且 div 再次可见。您需要一个常规按钮，而不是提交按钮。 <input type="button"> 制作一个不提交表单的普通按钮。

密码千万不要写到javascript里，因为每个人都能看到！

【讨论】：

但是如果我不提交表格，我将如何验证表格？
我现在正在使用 Javascript，因为用 js 更改 css 很容易
从表单标签中删除onsubmit="validateForm();"，并将onclick="validateForm();"添加到按钮。