我正在尝试进行表单验证,但似乎无法正常工作,我的元素上没有ID,因此我要通过getElementsByName和getElementsByClass函数(由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。

最佳答案

方法getElementsByClassNamegetElementsByName返回元素数组,因此您应该使用索引来使用特定元素。

关于javascript - JavaScript表单验证+根据没有ID的输入名称获取表单值,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/7006985/

10-09 08:16
查看更多