Javascript检查多个输入为空,返回一个值

Question

好吧,在我继续之前,我知道我想要做的事情可以通过众多变量来完成等等.但我必须想象我正在做的事情可以更简单地完成.所以我所拥有的是一个包含4个字段的表单,我想检查这四个字段中是否有空白.然后每个空白,我想添加一个类并使用jquery UI效果'shake'来通知.然后我想得到一个真实或错误的回应,真实的是所有人都不是空白而且假的是4中的任何一个都是空白的.所以我拥有的是.. HTML ...

<form name = "regin" id = "regin">
  <div id = "form_hold">
  <div><label>Username</label><input type="text" id = "Rusername" name = "Rusername" /><div class = 'verdiv' id = 'rvuname'></div></div>
  <div><label>Email</label><input type="text" id = "Remail" name = "Remail" /><div class = 'verdiv' id = 'rvemail'></div></div>
  <div><label>Password</label><input type="password" id = "Rpassword" name = "Rpassword" /><div class = 'verdiv' id = 'rvpass1'></div></div>
  <div><label>Confirm</label><input type="password" id = "Rpassword2" name = "Rpassword2" /><div class = 'verdiv' id = 'rvpass2'></div></div>
  </div>
  <button type="button" class = "thoughtbot" id = "registerButton">Register</button>
  </form>

和javascript/jquery ......

if($username == ''){
    $('#Rusername').parent().find('.verdiv').addClass('error');
    $('#Rusername').parent().effect("shake", { times:3 }, 50);
}
if($email == ''){
    $('#Remail').parent().find('.verdiv').addClass('error');
    $('#Remail').parent().effect("shake", { times:3 }, 50);
}   
if($password == ''){
    $('#Rpassword').parent().find('.verdiv').addClass('error');
    $('#Rpassword').parent().effect("shake", { times:3 }, 50);
}
if($checkval == ''){
    $('#Rpassword2').parent().find('.verdiv').addClass('error');
    $('#Rpassword2').parent().effect("shake", { times:3 }, 50); 
}

现在是否有一个顶级函数来"测试"这些陈述中的每一个,看它们是否真实？谢谢.

Answer 1

你可以循环:

$('#Rusername, #Remail, #Rpassword, #Rpassword2').each(function() {
  if ($(this).val() == '') {
    $(this).parent().effect('shake', {times: 3}, 50).find('.verdiv').addClass('error');
  }
});

但理想情况下,我会在其父元素中添加一个类,并将选择器简化为:

$('.parent_class input');

编辑:代码不完整 - 我删除了左大括号.