jQuery驗證優雅的條件邏輯

我使用jQuery驗證插件驗證窗體（使用插件是必需的，因爲我有其他需要插件的功能）。它具有以下字段：jQuery驗證優雅的條件邏輯

phoneNumber firstName lastName city zip

的形式被認爲是有效的，當下面的語句之一爲真：

phoneNumber有效
firstNamelastNamecity都是有效的
firstNamelastNamezip都是有效的

我知道如何要求每個字段，並使用其他驗證方法（我甚至有自己的郵編），但我試圖找出一個優雅的解決方案來實現我上面描述的邏輯。自定義方法或驗證組是處理此問題的最佳方法嗎？

來源

2011-08-15 Austyn Mahoney

優雅是在旁觀者的眼睛...

我薦最終制定一個自定義驗證器來處理您擁有的三種情況。

我花了一段時間瞭解Validate可以做什麼...我想出了這個來驗證我的表單。我用一個異步調用servlet來做我的用戶名檢查......但你可以把你想要的任何東西放在它裏面。

我發現堆棧溢出在另一個帖子裏更大出製造自定義驗證... 我特別喜歡這行jQuery.validator.methods['date'].call(this,value,element)，因爲它似乎你可以使用內置的驗證您的自定義代碼中。 jQuery Validate Plugin - How to create a simple custom rule?

這些都是我在學習有關驗證所使用的資源： http://www.ferdychristant.com/blog//articles/DOMM-7LZJN7 //文章詳細介紹瞭如何真正使用驗證。 http://www.ferdychristant.com/blog//pages/jQuery%20validation%20code
http://randomactsofcoding.blogspot.com/2008/10/starting-with-jquery-how-to-write.html
http://docs.jquery.com/Plugins/Validation/Methods/required#dependency-expression

還有信息只是在http://docs.jquery.com/Plugins/Validation一個驚人的深度......你只是愛通過點擊這一切！

下面你也會看到，你可以把JavaScript放到規則部分。

$(document).ready(function() { 

$("#EmailUserEditFormId").validate({ 

    debug: true, //this lets it hit firebug 
    onkeyup:false, //keep the traffic down for my async call 

    rules: { 

     username: { 
      required: (jQuery('input#username:disabled').length==1)?false:true, //example of JS in a rule 
      usernameCheck: (jQuery('input#username:disabled').length==1)?false:true //example of a JS rule with a custom validator 
     } 
    }, 

    messages: { 
     username: { 
      required: "Please enter a unique username.", 
      usernameCheck: "Username is already in use. Choose another." 
     } 
    } 

});

}）;

...這是我簡單的自定義驗證程序。

jQuery.validator.addMethod('usernameCheck', function(username) { 
var postURL = "CheckUsername"; 
$.ajax({ 
    cache: false, 
    async: false, 
    type: 'POST', 
    data: 'username=' + username, 
    datatype: 'xml', 
    url: postURL, 
    success: function(xml) { 
     unique = (jQuery(xml).find('unique').text() == "true") ? true : false; 
    } 
}); 
return unique;

}，''）;

來源

2011-08-15 21:01:48

接受你的建議後，我決定使用依賴回調來實現我的邏輯。感謝所有的鏈接。 –

phoneNumberValid, firstNameValid, lastNameValid, cityValid, zipValid; 
if ((phoneNumberValid) || (firstNameValid && lastNameValid && (cityValid || zipValid)) { 
    //Form Is Valid 
}

每個變量代表一個布爾值，您應該在檢查每個字段後設置它。

我不認爲這樣複雜的檢查可以單獨使用jQuery驗證插件。

來源

2011-08-15 20:52:00

我需要使用插件的原因是它支持錯誤消息和類型驗證。滾動我自己的解決方案對於所需的輸入會很簡單，但它需要使用插件，所以我的輸入衛生和屏蔽與它一起工作。 –

function formIsValid(){ 
    if(phoneNumberIsValid) { return true; } 
    if(firstNameIsValid && lastNameIsValid) { 
    return (cityIsValid || zipIsValid); 
    } 
    return false; 
}

如果你喜歡的俏皮話和不關心的可讀性：

return (phoneNumberIsValid || (firstNameIsValid && lastNameIsValid && (cityIsValid || zipIsValid)));

如果你有一個插件，conditional pattern matching，如果你習慣了這樣的事情可能是更具可讀性它

return match([phoneNumberValid, firstNameValid, lastNameValid, cityValid, zipValid], 
[true, _], true, 
[_, true, true, true, _], true, 
[_, true, true, _, true], true, 
_, false);

來源

2011-08-15 20:52:16

jQuery驗證優雅的條件邏輯

回答

相關問題