JavaScript 表单验证 - 这段代码有什么问题

JavaScript Form Validation - What is wrong with this code?

本文关键字：代码 什么 问题 验证 表单 段代码 JavaScript      更新时间：2023-09-26

我只是在输入字段中添加文本以进行练习。似乎当我按提交时，文本会在输入字段中出现一小秒钟，然后消失。有人可以告诉我为什么会这样吗？我怎样才能让消息留下来？

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="EventUtil.js"></script>
</head>
<body>
    <form>
        <input type="text" name="poop1"> <br>
        <input type="text" name="poop1"> <br>
        <input type="text" name="poop1"> <br>
        <input type="text" name="poop1"> <br>
        <input type="submit" value="submit" id="btn">
    </form>
    <script type="text/javascript">
        EventUtil.addHandler(window,"load", function() {
            var btn = document.getElementById("btn");
            EventUtil.addHandler(btn,"click",function(){
                var i;
                for (i=0; i<document.forms[0].elements.length-1; i++){
                    if (document.forms[0].elements[i].value == ""){
                        document.forms[0].elements[i].value = "fill this poop in";
                    }
                }
            })
        })
    </script>
</body>
</html>

问题是您正在提交表单，这会重新加载当前页面。这就是为什么你只看到片刻的值。

要修复它，请使用 <button type="button"> 而不是 <input type="submit"> 。

您应该将侦听器放在表单的提交处理程序上，而不是提交按钮上，因为无需单击该按钮即可提交表单。向表单添加 ID，或使用文档的表单集合：

var form = document.forms[0];

或

var form = document.getElementById('formID');

如其他答案中所述，表单正在提交，因此页面会刷新。要取消提交，请从侦听器返回 false。

在侦听器中，这应该引用以下形式：

EventUtil.addHandler(form, 'submit', function(){
    var control, controls = this.elements;
    for (var i=0, iLen=controls.length; i<iLen; i++) {
      control = controls[i];
      if (control.type == 'input' && control.type == 'text' && control.value == '') {
        control.value = 'fill this shit in';
        return false;
      }
    }
});

为什么不在表单元素上使用必需的属性

相关文章：