0

抱歉标题中没有描述，很难解释。

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

问题是，如果用户输入的错误不止一个，它只会在底部显示一个错误。

这里是 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。但是当有多个错误时，只显示一个。修复该错误并按下按钮后，它将显示下一个错误。我希望它们都显示在列表中。

4

2 回答 2

1

做你想做的事有两个问题。

if首先，由于您的嵌套语句，您仅在第一个通过时才继续检查。

其次，您正在用#answer消息替换 html，这意味着即使您进行每次检查，您也只会看到最后一次的结果。

一个简单的解决方法是取消嵌套 if 语句，并保留一个跟踪整体通过状态的变量。其次，不要使用.html(), 使用.append()，但请确保#answer在开始检查之前清除。

correct &= checkFilled();
correct &= userLength();
correct &= passwordCheck();
correct &= validateForm();

if (correct) {
    // ...
}

小提琴：http: //jsfiddle.net/jtbowden/9cFKW/

注意：我填写了您的表格，检查它自己的功能，以便更好地使用此方法。

您可以做一些更花哨的事情，例如在数组上推送错误消息，然后在最后检查数组是否有错误并附加所有消息，但这应该可以帮助您入门。

于 2013-03-07T19:47:54.010 回答
1

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

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

当您逐步完成验证时，每次遇到错误时，您只需push将错误字符串添加到数组中。当您完成验证时，您需要将这些错误编译成 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）。

于 2013-03-07T19:35:21.170 回答