如何还原 DOM 所做的更改

How to revert change made by DOM?

本文关键字：DOM 何还原 还原      更新时间：2023-09-26

所以我做了一个简单的javascript表单验证器，它使用DOM创建一个带有错误消息的框。但是当我使用 重置表单时，我想不出如何重置所有这些更改的方法 <button type="reset">

我想知道它是怎么做到的。

谢谢。

《守则》 

<html>
    <head>
        <script type="text/javascript">
                   function validate(){
            var fname = document.getElementById("fname");
            var surname = document.getElementById("surname");
            if(fname.value === "" || fname.value === null){ 
                document.getElementById("sbody").style.display = "block";
                document.getElementById("fname").style.display = "block";               
                return false;   
            }
            //Verify Last Name
            if(surname.value === "" || surname.value === null){
                document.getElementById("sbody").style.display = "block";
                document.getElementById("surname").style.display = "block";
                return false;
            }
                   }//End Validate Function
        </script>

        <style type="text/css">
            #sbody{
                width: 100px;
                height: 100px;
                background-color: #f3f3f3;
                display:none;
            }
            .vis{
                display: none;
                font-size: 12px;
            }
        </style>
    </head>
    <body>
        <section id="sbody">
            <span id="fner" class="vis">First Name is missing.</span>
            <span id="lner" class="vis">Surame is missing.</span>
        </section>              
        <form id="registerForm" method="POST" action="register.php" onsubmit="return validate()">
            <label for="fname" class="labelStyle">First Name: </label>
            <input id="fname" name="fname" type="text" value="">
            <label for="surname" class="labelStyle">Surname: </label>
            <input id="surname" name="surname" type="text" value="">    
            <button type="submit">Sign Up</button>
            <button type="reset">Reset</button>
        </form> 
    </body>
</html>

浏览器无法神奇地弄清楚重置自定义更改必须执行的操作。

但是，您可以使用 element.addEventListener 侦听表单的reset事件。

演示

.HTML 

<form id="test">
    <div id="errors-ct">The form has errors</div>
    <button type="reset">Reset</button>
</form>

.JS

//wait for the DOM to be ready
document.addEventListener('DOMContentLoaded', function () {
    //store a reference to the errors container div
    var errorsCt = document.getElementById('errors-ct');
    //listen to the reset event of the form
    document.getElementById('test').addEventListener('reset', function (e) {
        var form = e.target; //this is how you could access the form
        //hide the errors container
        errorsCt.style.display = 'none';
    });
});
如果要

重置表单，就好像用户没有进行任何选择或添加任何输入一样，则只需将所有表单元素值设置为默认值或为空即可。

js小提琴

<div>
    <form action="/echo/html" method="get">
        <input type="text" placeholder="username" />
        <br/>
        <input type="password" placeholder="password" />
        <br/>
        <input type="checkbox" value="test" data-default="checked" checked="checked"/>
        <br/>
        <button type="reset" value="reset" onclick="resetForm()">reset</button>
        <br/>
    </form>
    <div id="err">Some error message</div>
</div>

window.resetForm = function () {
    var fields = $('input'),
        uname, pass, check;
    uname = $(fields.get(0));
    pass = $(fields.get(1));
    check = $(fields.get(2));
    $("#err").text("");
    uname.val('');
    pass.val('');
    if (check.attr("data-default") == "checked") {
        check.attr("checked", "checked");
    } else {
        check.removeAttr("checked");
    }
}
相关文章：