Javascript jQuery：获取所有输入字段值的压缩方法？

我有一个表单，有五个输入字段和一个寄存器按钮（'.register'）

我只想在所有字段至少有一个字符时启用register按钮

下面是我的代码：

$(document).ready(function() {

    // when page loads
    $('.register').addClass('a_unclickable');

    // Input validation
    // Are all fields filled out?
    $('input').on('keyup', function() {

        var un_value = $('#username_operators').val();
        var fn_value = $('#first_name_operators').val();
        var ln_value = $('#last_name_operators').val();
        var e_value = $('#email_operators').val();
        var pw_value = $('#password_operators').val();
        var pw_r_value = $('#password_repeat_operators').val();

        if ((un_value.length > 0) && (fn_value.length > 0) && (ln_value.length > 0) && (e_value.length > 0) && (e_value.indexOf('@') !== -1) && (pw_value.length > 0) && (pw_r_value.length > 0)) {
            $('.register').removeClass('a_unclickable');
        } else {
            $('.register').addClass('a_unclickable');
        }

    })

});

我觉得有一种更简单的方法可以达到同样的效果。你们有什么紧凑的建议吗？

给你们

如果您能够使用选择器读取所有值，则可以传递它们 比如：

---

我想到了几件事。第一:

$('input').on('keyup', function() {
    var valid = true;

    $('#username_operators, #first_name_operators, #last_name_operators, #email_operators, #password_operators, #password_repeat_operators').each(function() {
        if (/^\s*$/.test(this.value)) {
            valid = false;
        }
    });

    if (valid) {
        $('.register').removeClass('a_unclickable');
    }
    else {
        $('.register').addClass('a_unclickable');
    }
});

您可以将所有ID组合到一个CSS选择器中。实际上，最干净的方法是为每个必需的输入添加一个类名，然后利用

event.target.form

查找表单中所有必需的字段

$('input').on('keyup', function(event) {
    var valid = true;

    $(event.target.form).find(".required").each(function() {
        if (/^\s*$/.test(this.value)) {
            valid = false;
        }
    });

    if (valid) {
        $('.register').removeClass('a_unclickable');
    }
    else {
        $('.register').addClass('a_unclickable');
    }
});

---

将输入包装在

默认情况下，将a_不可链接类添加到寄存器字段

然后jquery：

 $('input').on('keyup', function() {
    var emptyField = false;
    $(".verfyLength").find("input").each(function()
    {
      if((this).val().length() <=0)
       emptyField = true;
    });
    if(emptyField)
        $('.register').addClass('a_unclickable');       
    else
        $('.register').removeClass('a_unclickable');
});

$（'input'）。在（'keyup'，function（）上{
var emptyField=false；
$（“.verfyLength”）.find（“输入”）.each（函数（）
{
如果（（this）.val（）.length（）查看以下内容：

这很简单：

$(document).ready(function() {

    // when page loads
    $('.register').addClass('a_unclickable');

    // Input validation
    // Are all fields filled out?
    $('input').on('keyup', function() {
        $('.register').removeClass('a_unclickable');

        $('input').each(function() {
            if ($(this).val() === '') {
                $('.register').addClass('a_unclickable');
            }
        });
    })
});

你能发布HTML以供参考吗？嗯…我不喜欢这里的魔弹数字6。你不应该用实际计算输入数量的东西来代替它吗？吹毛求疵。举个例子，只是展示一些国旗之王。
 $('input').on('keyup', function() {
    var emptyField = false;
    $(".verfyLength").find("input").each(function()
    {
      if((this).val().length() <=0)
       emptyField = true;
    });
    if(emptyField)
        $('.register').addClass('a_unclickable');       
    else
        $('.register').removeClass('a_unclickable');
});

var i = 0, count = 0;
$.each($( ":input" ), function( index, value ) {
    if(value.value.length > 0) {
        count++;
    }
});

if(count === 6) {
    console.log(true);   
} else {
    console.log(false)
}

$(document).ready(function() {

    // when page loads
    $('.register').addClass('a_unclickable');

    // Input validation
    // Are all fields filled out?
    $('input').on('keyup', function() {
        $('.register').removeClass('a_unclickable');

        $('input').each(function() {
            if ($(this).val() === '') {
                $('.register').addClass('a_unclickable');
            }
        });
    })
});