Question

当表单没有任何值时，这可以正常工作。但是，一旦我在文本框中输入了值，它仍会提醒相同的消息，即省略“你必须为两种情况输入值”，请参阅if else语句。以下代码有什么错误？

<!doctype html>
<html>
    <head>
        <title>A Basic Example</title>
    </head>
    <body>
        <p>A Basic Form Example</p>
        <form action="#">
            <p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
            <p><input id="submitbutton1" type="submit" /></p>
            <script type="text/javascript">
                var item = document.getElementById("textbox1").value.length;
                var item1 = document.forms[0].textname;
                function formValid() {

                    if (item == 0) {
                        alert("You must enter value");
                    }
                    else {
                        alert(item1);
                    }
                }

                var formEl = document.getElementById("submitbutton1");
                formEl.addEventListener("click", formValid());

            </script>
        </form>
    </body>
</html>

Answer 1

您在页面加载时获取值的长度，而不是在函数运行时获取。

移动

var item = document.getElementById("textbox1").value.length

在函数内部。

Answer 2

在addEventListener formEl.addEventListener("click", formValid,false);中使用此语法同样替换函数item中的var formValid()。

以下是fiddle

Answer 3

try this

<!doctype html>
    <html>
        <head>
            <title>A Basic Example</title>
        </head>
        <body>
            <p>A Basic Form Example</p>
            <form action="#">
                <p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
                <p><input id="submitbutton1" type="submit" /></p>
                <script type="text/javascript">
                    var item1 = document.forms[0].textname;
                    var formEl = document.getElementById("submitbutton1");
                    function init() {
                         formEl.addEventListener("click", formValid());
                    }
                    function formValid() {
                    var item = document.getElementById("textbox1").value.length;
                        if (item == 0) {
                            alert("You must enter value");
                        }
                        else if {
                            alert(item1);
                        }
                    }


                </script>
            </form>
        </body>
    </html>

输入文本框的值时不显示值

3 个答案: