javascript - 在 Javascript 中显示全部 ().html

Question

抱歉，标题中缺少描述，很难解释。

所以我有一个简单的注册页面，我在代码中创建了一堆函数来检查用户名长度、确保密码匹配等内容。

问题是，如果用户输入中有多个错误，它只会在底部显示一个错误。

这里是 JSfiddle:http://jsfiddle.net/LCBradley3k/xqcJS/19/

Javascript:

$('#join').on('click', function () {

    var correct = true;

    $('input[type="text"], input[type="password"]').each(function (indx) {
        var $currentField = $(this);
        if ($currentField.val() === '') {
            $currentField.addClass('empty');
            correct = false;
            $currentField.one('keydown', function () {
                $currentField.removeClass('empty');
            });
        } else {
            $currentField.removeClass('empty');
        }


    });

    function userLength() {
        var x = $('input[name="user"]').val();
        if (x.length < 6) {
            $('#answer').html('Less than six characters.');
            $('input[name="user"]').addClass('empty');
            return false;
        } else {
            return true;
        }
    }

    function passwordCheck() {
        var x = $('input[name="password"]').val();
        var y = $('input[name="passwordcheck"]').val();
        if (x === y) {
            return true;
        } else {
            $('#answer').html('Two different passwords');
            $('input[name="password"], input[name="passwordcheck"]').addClass('empty');
            return false;
        }

    }


    function validateForm() {
        var x = $('input[name="email"]').val();
        if (x.indexOf('@') !== -1 && x.lastIndexOf(".") !== -1) {
            return true;
        } else {
            $('#answer').html('Not a valid email');
            $('input[name="email"]').addClass('empty');
            return false;
        }
    }

    if (correct) {
        if (userLength()) {
            if (passwordCheck()) {
                if (validateForm()) {

                    $('#answer').html('Thank You!');
                    setTimeout(function () {
                        $('.inputs').hide("slide", {
                            direction: "up"
                        }, 1000);
                    }, 2000);
                }
            }
        }
    } else {
        $('#answer').html('Please fill highlighted fields.');
    }
});

你可以看到他们都用.html()编辑#('#answer') div。但当存在多个错误时，仅显示一个。一旦该错误被修复并按下按钮，它将显示下一个错误。我希望它们全部显示在列表中。

Answer 1

我创建了一个fiddle这可能会有一些帮助。这个想法是创建一个包含错误的数组，如下所示:

var errors = [];
errors.push("Error 1");
errors.push("Error 2");

当您逐步进行验证时，每次遇到错误时，您只需将错误字符串推送到数组中即可。当您完成验证时，您需要将这些错误编译为 html，就像可以附加到您的 $('#answer') 元素中一样。在这种情况下，项目被编译成无序列表。您可以更改此设置以满足您的需要。

var content = "<ul>";
for(var a = 0, len = errors.length; a < len; a++) {
    content += "<li>" + errors[a] + "</li>";   
}
content += "</ul>";
$('#answer').html(content);

html 是动态构建的并存储在变量 content 中。然后将 content 附加到显示错误的 html 元素(在您的情况下为 answer)。