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');

編輯：代碼不完整 - 我刪除了左大括號。

Answer 2

關於什么：

$("form input:text").each(function() {
    if ($(this).val() == "") {
       $(this).parents().find('.verdiv').addClass('error');
       $(this).parent().effect("shake", { times:3 }, 50);
    }
});

- 編輯 -

要回答您的其他問題，您可以在字段中添加屬性，例如data-type =“email”等，然后修改javascript：

$("form input:text").each(function() {
    var isValid = new Function("value", "validate" + $(this).attr("data-type") + "(value);");
    if ($(this).val() == "" && !isValid($(this).val())) {
       $(this).parents().find('.verdiv').addClass('error');
       $(this).parent().effect("shake", { times:3 }, 50);
    }
});

您需要為“validateemail”，“validatetext”等添加函數，這些函數對於有效字段返回true，對於無效字段返回false。

Answer 3

您可以為每個輸入添加data-validate=true屬性，然后執行以下操作：

function validate() {
var valid = true;
$("[data-validate]").each(function () {
    var el = $(this);
    if(el.val() == "") {
        el.parent().find('.verdiv').addClass('error');
        el.parent().effect("shake", { times:3 }, 50);
        valid = false;
    }
});

return valid
}

Answer 4

在要驗證的每個輸入字段上放置相同的類，例如validatefield 。

然后假設$username和$email是每個輸入字段的值，這應該工作：

var valid = true;
$(".validatefield").each(function() {
    if ($(this).val() == "") {
        $(this).parent().find('.verdiv').addClass('error');
        $(this).parent().effect("shake", { times:3 }, 50);
        valid = false;
    }
});

Answer 5

    $('input [type=text]').each(function(event){
    if($(this).val()=='')
    {
    //Do here shaking and error showing.
    }
    });

Answer 6

有點復雜和骯臟，但可能有效。

var items = { 'username':'Rusername', 'email':'Remail', 'password':'Rpassword', 'checkval':'Rpassword2' };
$.each( items, function( val, id ) {
    eval('if($'+val+' == \'\') { ....copy your codes here... }');
});