Javascript檢查多個輸入的空白​​，返回一個值

Question

好吧，在繼續之前，我知道我想要做的事情可以用很多變量來完成，但我必須想象我可以做什麼更簡單。所以我所擁有的是一個有4個字段的表格，我想檢查這四個字段中的任何一個是否爲空。然後，每一個是空白的，我想添加一個類，並使用jQuery UI效果'搖'來通知。然後我想得到一個真實的或虛假的回答，真正的存在並非空白，假如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

你可以一個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 3

把同一類的每個輸入字段進行驗證，例如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 4

什麼：

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

- 編輯 -

要回答你的附加問題，你可以添加一個屬性的字段，例如數據類型=「電子郵件」，等等，那麼這樣修改的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」，等返回一個真正的有效的領域，對於無效字段爲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... }'); 
});