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

Question

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

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

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

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

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

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

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

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

干杯 丹

验证类的代码是：

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。