Question

好的，我想做的是几件事：

列出表单上方的错误
如果它们为空白，则以红色突出显示
一旦用户尝试修复它，即填充空白字段，让红色高光消失......就像你用焦点，onblur这样做？

（我也是一个JS新手，所以我仍然在努力实现如何实现这一功能......你确实使用了一个函数，对吗？

这是我早期的一种形式......我真的很难实现上面列出的这三个特征......我如何在下面的代码中实现这些？提前致谢。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Testy Form</title>
    </head>
    <body>
        <h4>Learning to Validate Forms</h4>
        <div id="validationErrors"></div>
        <form action="" method="post" id="testyForm">
            <label>Name
                <input type="text" name="name" value="" id="name">
            </label>
            <br /><br />
            <label>Email
                <input type="text" name="email" value="" id="email">
            </label>
            <br /><br />
            <input type="submit" value="Submit">
        </form>

        <script>

            var formy = document.getElementById('testyForm');

             var required_inputs = ['name', 'email'];
        formy.onsubmit = function(event) {
            for (var i = 0; i < required_inputs.length; i++) {
                var input = this[required_inputs[i]];
                if (input.value.length == 0) {
                    event.preventDefault(); 
                    input.style.border = "1px solid red";
                    input.style.backgroundColor = "#FFCCCC";
                }
            }
        }
        </script>
    </body>
    </html>

Answer 1

如果您只是想让事情变得有效，我建议您使用验证库而不是编写自己的验证库。

如果你正在学习Javascript，那么这就是代码中的错误：

更新

var input = this[required_inputs[i]];

到

var input = document.getElementById(required_inputs[i]);

编辑 - 解释

您将required_inputs声明为数组：

var required_inputs = ['name', 'email'];

当您循环播放时，required_inputs[i]将返回'name'和'email'，以便可以将其用作getElementById()的参数。

如何使用javascript验证简单的表单

1 个答案:

编辑 - 解释