Question

学习JS。到目前为止有这种形式（下面的代码）......

因此，正如您可以从“formy”元素中看到的那样，它从表单的数组中收集所有元素。有没有一种简单的方法来遍历表单，并选择哪些元素进行“错误检查”？例如，我想确保只需要名字和电子邮件，而不是姓氏。有没有办法以简单的方式做到这一点，而不是通过表格上的每一个单独的？

请保持任何解释简单，因为我正在努力学习一口大小的JS。

谢谢。

澄清

不尝试使用HTML5属性或JS验证框架，而是在纯JS中理解这一点。

   <!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form id="testyForm" method="post" action="">
            <div id="validation"></div>
            <p><label>First Name<br /><input type="text" name="first_name" id="first_name"></label></p>
            <p><label>Last Name</br /><input type="text" name="last_name" id="last_name"></label></p>
            <p><label>Email<br /><input type="text" name="email" id="email"></label></p>
            <p><input type="submit" value="Submit"></p>
        </form>
        <script>
            var formy = document.getElementById("testyForm");

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

Answer 1

您可以使用列出所需元素的数组。

        var required_inputs = ['first_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";
                }
            }
        }

Answer 2

您只需将required添加到表单元素即可。这将触发浏览器执行表单验证。当然，如果需要表单元素，您也可以检查javascript来设置样式。

顺便说一下。 javascript存在许多验证框架。只需阅读文档，您就可以了解验证表单的最佳实践。他们为你解决问题，你现在甚至都不知道它们存在了^^

Parsley.js可能是最受欢迎的验证框架。我可以建议你去看看！

如何只检查表单的某些元素？

2 个答案: