JavaScript 表单验证 + 根据没有 ID 的输入名称获取表单值

Question

我正在尝试进行表单验证，但它似乎不起作用，我的元素上没有 ID，因此我通过 getElementsByName 和 getElementsByClass function （由Robert Nyman编写）获取它们

我的 JS：

        window.onload = function() {    
        var feedbackForm = getElementsByClassName("formBuilder"),
            feedbackName = document.getElementsByName("form-name")[0],
            feedbackLocation = document.getElementsByName("form-location")[0],
            feedbackEmail = document.getElementsByName("form-email")[0],
            feedbackComment = document.getElementsByName("form-comment")[0];

        feedbackForm.onsubmit = function () {

            var errors, errorDiv, errorUL = [];

            // check all the fields
            if (!feedbackName.value.match(/\b\w+\b/)) { errors.push("Please enter your full name"); }
            if (!feedbackLocation.value.match(/\b\w+\b/)) { errors.push("Please enter your location"); }
            if (!feedbackEmail.value.match(/^([0-9a-zA-Z]+[\-._+&])*[0-9a-zA-Z_]+@([\-0-9a-zA-Z]+[.])+[a-zA-Z]{2,6}$/)) { errors.push("Please enter a correct email address"); }
            if (!feedbackComment.value.match(/\b\w+\b/)) { errors.push("Please make a comment"); }

            // if there are errors, display them and cancel submit
            if (errors.length) {
                errorDiv = document.querySelector('#feedback-errors') || appendDiv(feedbackForm, {id: 'feedback-errors', innerHTML: '<ul></ul>'});
                errorUL = errorDiv.querySelector('ul');
                errorUL.innerHTML = errors.map(function (v) {
                    return "<li>#{v}</li>";
                }).join('');
                return false;
            }
            // submit the form
            return true;    
        };          
    }

这是我的小提琴显示我的标记和js： http://jsfiddle.net/calebo/rBnwh/

也欢迎任何关于如何更好地编写 js 的建议。

ps：不允许使用 jQuery。

Answer 1

getElementsByClassName和getElementsByName方法返回一个元素数组，因此您应该使用索引来使用特定元素。