jQuery 多个小部件可以在一个元素上具有相同的类吗？

Question

我创建了一个验证 jQuery 小部件来验证表单字段。我希望能够在某些字段上附加两个（或多个）验证规则，例如

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

在字段“textField”上设置最小和最大长度规则。

似乎将多个小部件附加到同一类会使对象被覆盖。即使用页面下方的代码创建对象时会发出以下警报： 做了一个minLength 设置了 maxLength

但当“Validation.validateAll();”时称为页面警报：

验证类型为：maxLength 验证类型为：maxLength

，即第二个对象已覆盖第一个对象的选项。

是否可以在同一个对象上创建同一个小部件的多个实例，而我只是做错了？ 或者这是不可能的，我应该使用不同的方法？

干杯 Dan

验证类的代码是：

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", …}
    ]
});

也就是说，我认为您应该使用优秀的 验证插件 已经存在。