jQuery多元件上的元素可能具有相同的類嗎？

Question

我創建了一個驗證jQuery小部件來驗證表單域。我希望能夠附加兩個（或更多）驗證規則的一些字段，例如

$('#textField').validation({type: 'minLength', extraParameters: {length: '4',},}); 
$('#textField').validation({type: 'maxLength', extraParameters: {length: '20',},}); 

它在字段'textField'上設置最小和最大長度規則。

看起來，將多個小部件附加到同一個類中會使對象被覆蓋。即，具有以下與頁面警報的代碼創建對象時： 由的minLength 製成的最大長度

但然後當「Validation.validateAll（）;」被調用的頁面警報：

驗證類型是：最大長度 驗證類型是：最大長度

即第二物體已經重寫的第一對象的選項。

是否可以在同一個對象上創建同一個窗口小部件的多個實例，我只是做錯了？ 或者這是不可能的，我應該使用不同的方法？

歡呼 丹

的驗證類的代碼是：

var Validation = { 

pageValidations: [], 

validateAll: function(){  
    for(var i=0; i<Validation.pageValidations.length ; i++){ 
     validation = Validation.pageValidations[i]; 
     validation.validate(); 
    } 
}, 

setErrorMessage: function(errorString, parameters){ 
    var errorElementID = "" + this.element.context.name + "Error"; 
    $("#" + errorElementID).show(); 
    $("#" + errorElementID).text(errorString); 
}, 

clearErrorMessage: function() { 
    var errorElementID = "" + this.element.context.name + "Error"; 

    $("#" + errorElementID).hide(); 
}, 

validateMaxLength: function() { 
    try{ 
     var stringFromInput = this.element.context.value; 
     var maxLength = this.options.extraParameters.length; 

     if(stringFromInput.length > maxLength){ 
      this.setErrorMessage("Length of field is too long."); 
      return false; 
     } 
    } 
    catch(error){ 
     alert("Exception in validateMinLength, " + error); 
    } 
    return true; 
}, 

validateMinLength: function() { 

    try{ 
     var stringFromInput = this.element.context.value; 
     var minLength = this.options.extraParameters.length; 

     if(stringFromInput.length < minLength){ 
      this.setErrorMessage("Length of field is too short."); 
      return false; 
     } 
    } 
    catch(error){ 
    alert("Exception in validateMinLength, " + error); 
    } 

    return true; 
}, 

validate: function(){ 

    var validationResult = false; 

    alert("Validating type is: " + this.options.type); 

    switch(this.options.type){ 
     case('minLength'): 
      validationResult = this.validateMinLength(); 
     break; 

     case('maxLength'): 
      validationResult = this.validateMaxLength(); 
     break; 
    } 

    if(validationResult == false){ 
     this.options.isFailed = true; 
    } 

    return validationResult; 
}, 

valueChanged: function (event){ 
    try{ 
     if(this.options.isFailed != false){ 
      var isValid = this.validate(); 

    if(isValid == true){ 
     this.clearErrorMessage(); 
    } 
     } 
    } 
    catch(error){ 
     alert("Exception in valuechanged " + error); 
    } 
}, 

_create: function() { 
     //alert("create called"); 
}, 

_init: function() { 
    this.element.bind('change', jQuery.proxy(this, 'valueChanged')); 

    $(this.element).addClass('validation'); 

    if(this.options.type == 'minLength'){ 
     alert("made a minLength "); 
    } 

    if(this.options.type == 'maxLength'){ 
     alert("made a maxLength "); 
    } 

    Validation.pageValidations.push(this); 
}, 

options: { 
    type: false, 
    isFailed: false, 
    extraParameters: {} 
} 
}; 

$.widget("dialogue.validation", Validation); // create the widget 

function setupValidationFields(){ 
    var object1 = $('#someMaxLength').validation({type: 'minLength', extraParameters: {length: '4',},}); 
var object2 = $('#someMaxLength').validation({type: 'maxLength', extraParameters: {length: '20',},}); 

Answer 1

你可以使用是有你的驗證小部件收到的規則列表中的初始化器，類似如下的另一種方法：

$('#textfield').validation({ 
    rules: [ 
     {type: "minLength", …}, 
     {type: "maxLength", …} 
    ] 
}); 

這就是說，我認爲你應該只使用已經存在的優秀validation plugin。