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插件。我知道它很棒，但这不是很难验证，我不想影响表格的其余部分（这是一个模态弹出窗口）。

那就是说 - 任何想法？

修改

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

EDIT2

更新了原始代码，表明我需要显示必填字段标签，如果验证失败，则返回false。

EDIT3

好的，我已经重新考虑了我的解决方案，看起来我需要进行服务器调用，以根据成员资格架构验证电子邮件。所以我可能最终会在更新面板中包装字段或者执行Web服务发布（并在json数组中返回错误）。但是，我会暂时搁置这个问题并选出最多的答案。

ANSWER

所以我已经修改了@ box9的修改版本。我仍然需要对服务器进行AJAX调用以验证电子邮件（正如我上面的编辑建议的那样），但这将确保我只在填写所有字段时才这样做。

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

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

很好，也很容易。

感谢所有答案。

Answer 1

function validate() {
    var fields = ['firstName', 'lastName', 'email', 'password', 'screenName'];
    for(fieldIdx in fields) {
        if($('#fbsignup input.' + fields[fieldIdx]).val().trim()) == '' {
            $('#fbsignup input.' + fields[fieldIdx]).after("*");
            return false;
        }
    }
    return true;
}

这可以满足您的需求，但缺点是会丢失有关哪些字段验证失败的信息（例如，如果您想弹出特定于字段的消息）。

Answer 2

以下代码完全符合您的代码：

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”等类是输入的类属性中的FIRST类时才有效。此限制以及错综复杂的行$('#fbsignup tr').filter('.' + $(this).attr('class').split(' ').slice(0, 1)).find('em').show();仅存在，因为我不知道HTML的结构。如果HTML结构已知，则选择器可以更清晰（使用.sibling()，.children()，.parent()等。

或者，包括输入的所有类名的数组：

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。

Answer 3

如果您想检查所有字段是否已填写，请执行以下操作：

function validate() {
    ret = true;
    $('#fbsignup input').each(function(index) {
      if ($(this).val().trim()) == '') ret = false;
    });    
    return ret;
}

Answer 4

这样的事情对你有用。

var failedElements = $("#fbsignup input").filter(".firstname[value=''], .lastname[value=''], .email[value='']");

以下是一个例子：

http://jsfiddle.net/zfQbz/

编辑：我刚注意到你再次编辑了这个问题。因此，如果您想针对每个失败的项目采取措施，只需使用for循环来迭代集合中的所有项目，并为每个项目执行所需的操作。

Answer 5

我建议您使用此jquery validation plugin，它易于使用且功能强大..

这个jQuery验证可以重构吗？

5 个答案: