Question

我有一个带有字段元素的表单，其中包含类，如required，class1，class2，class3等。现在我需要迭代所有元素并显示错误消息，如果不满足上述任何类。我已根据需要编写了以下jquery。现在我需要级联其他类。任何人都可以指导我吗？

<input class="required allowalphanum allownospace" type="text" id="first_name" name="first_name" title="First name is required or the data entered was invalid" value=""/>
<input class="required allowalphanum allownospace" type="password" id="password" name="password" title="Password is required or the data entered was invalid" value=""/>
<input class="required confmpasswrd" type="password" id="cnfmPassword" name="cnfmPassword" title="Password needs to match the above field" value=""/>

jQuery fn

$('#submit_form .required').filter(':visible').each(function () {
var input = $(this);
input.next('ul.errormessages').remove();
input.removeClass('highlight');
if (!input.val()) {
    input.addClass('highlight');
    var msg = $(this).attr('title');
    input.after('<ul class="errormessages"><li>'+msg+'</li></ul>');
    returnVal = false;
}
});

现在我需要先检查是否满足所需的类。然后我需要检查其他类是否允许使用字母数字，allownospace，cnfmPassword等。

有人可以指导我吗？

Answer 1

通过这个你可以检查elem是否有你的类：

if ($('elem').hasClass('yourClass')) {
    // do stuff
}

使用$ .each，您可以传入当前索引和元素：

$('selector').each(function(i, e){
    if ($(e).hasClass('yourClass')) {   // e becomes each elem in the $('selector') object
        // do stuff with $(e)
    }
})

您可以检查多个班级：

$('selector').each(function(i, e){
    if ($(e).hasClass('yourClass') && $(e).hasClass('yourOtherClass') && $(e).hasClass('yourStuffOverHere')) {
        // do stuff
    }
})

Answer 2

与jQuery的验证器插件类似的解决方案：

// List of validating functions for each class
var validators = {
    allowalphanum: function(val) {
        return /^[a-z0-9]+$/i.test(val);
    },
    allownospace: function(val) {
        return !/\s/.test(val);
    }
};

$('#submit_form .required').filter(':visible').each(function () {
    var input = $(this);
    input.next('ul.errormessages').remove();
    input.removeClass('highlight');
    if (!input.val()) {
        input.addClass('highlight');
        var msg = $(this).attr('title');
        input.after('<ul class="errormessages"><li>'+msg+'</li></ul>');
        returnVal = false;
    }

    // Get all the classes of the current input
    if(this.className) {
        var classes = this.className.split(/\s+/);
        for(var p in classes) {
            if(classes[p] in validators) {
                returnVal = returnVal & validators[classes[p]] (input.val());
            }
        }
    }

});

编辑：添加了检查是否已定义className

在jquery中的每个循环内部

2 个答案: