javascript - 这个 jQuery 验证可以重构吗？

Question

我正在使用 jQuery 进行一些简单的客户端验证。

var passedValidation = new Boolean(true);

// Required Field Validators.
if ($('#fbsignup input.firstName').val().trim() == '') {
    $('#fbsignup tr.firstName em').show();
    passedValidation = false;
}
if ($('#fbsignup input.lastName').val().trim() == '') {
    $('#fbsignup tr.lastName em').show();
    passedValidation = false;
}
if ($('#fbsignup input.email').val().trim() == '') {
    $('#fbsignup tr.email em').show();
    passedValidation = false;
}
if ($('#fbsignup input.password').val().trim() == '') {
    $('#fbsignup tr.password em').show();
    passedValidation = false;
}
if ($('#fbsignup input.screenName').val().trim() == '') {
    $('#fbsignup tr.screenName em').show();
    passedValidation = false;
}


if (passedValidation == true) {
    // All validation passed. Hide the modal signup dialog and post back to signup user.
    $('#fbcSignupModal').jqmHide();
    return true;
} else {
    return false;
}

本质上，我想确保所有字段都已填写。如果没有填写，则返回 false，否则返回 true。简单。

可以将其重构为一行吗？ (也许通过将一个类应用于所有元素？)。

关于答案的警告，我不想使用 jquery-validate 插件。我知道它很棒，但这并不是很难的验证，我不想影响表单的其余部分(这是一个模式弹出窗口)。

那么，话虽如此 - 有什么想法吗？

编辑

为了澄清，我确实需要知道哪个字段没有填写，这样我就可以在它旁边显示一个*。

编辑2

更新了原始代码以指示我需要显示必填字段标签并在验证失败时返回 false。

编辑3

好吧，我已经重新考虑了我的解决方案，看起来我需要进行服务器调用来根据成员资格架构验证电子邮件。因此，我可能最终要么将字段包装在更新面板中，要么执行 Web 服务发布(并在 json 数组中返回错误)。不过，我会暂时保留这个问题，然后选择得票最多的答案。

回答

所以我采用了 @box9 答案的修改版本。我仍然需要对服务器进行 AJAX 调用来验证电子邮件(正如我上面的编辑所建议的那样)，但这将确保我仅在填写所有字段时才执行此操作。

$('#fbsignup input.required').each(function (index) {
        if ($(this).val().trim() == '') {
            $(this).next('em').show();
            passedValidation = false;
        }
    });

我在必需的输入字段后面直接有一个 em 元素，因此我可以轻松使用 .next([selector]) jQuery 选择器。

又好又简单。

感谢您的所有回答。

Answer 1

以下代码的作用与您的代码的作用完全相同:

var passedValidation = true;

$('#fbsignup input').each(function(index) {
    if ($(this).val().trim() == '') {
        $('#fbsignup tr').filter('.' + $(this).attr('class').split(' ').slice(0, 1)).find('em').show();
        passedValidation = false;
    }
});

if (passedValidation) $('#fbcSignupModal').jqmHide();

return passedValidation;

...除了一个警告:只有当类“firstName”、“lastName”等...是输入的类属性中的第一个类时，它才有效。这个限制，以及复杂的行 $('#fbsignup tr').filter('.' + $(this).attr('class').split(' ').slice(0, 1)) .find('em').show();，仅存在，因为我不知道您的 HTML 结构。选择器可以更加简洁(使用 .sibling()、.children()、.parent() 等，如果 HTML结构已知。

或者，包含输入的所有类名的数组:

var inputClasses = ['firstName', 'lastName', 'email', 'password', 'screenName'];

并迭代这些:

var passedValidation = true;

$.each(inputClasses, function(index, className) {
    if ($('#fbsignup').find('input.' + className).val().trim() == '') {
        $('#fbsignup').find('tr.' + className + ' em').show();
        passedValidation = false;
    }
});

if (passedValidation) $('#fbcSignupModal').jqmHide();

return passedValidation;

这样做的缺点是，如果更改/添加输入，则必须手动更新数组。您最好的选择可能是使用已知的 HTML 结构修改我的第一个解决方案，甚至将类转换为 ID。