Question

所以我创建了一个简单的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>

Answer 1

浏览器无法清楚地知道要对重置自定义更改执行哪些操作。

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

DEMO

<强> 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';
    });
});

Answer 2

如果要重置表单，就好像用户没有做出任何选择或添加任何输入，只需将所有表单元素值设置为默认值，或为空。

jsFiddle

<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");
    }

}

如何还原DOM所做的更改？

2 个答案: