jquery - 循环遍历表格内的所有文本框并检查值

Question

我有一个包含两个文本框(textbox1，textbox2)的表。这两个文本框都是强制性的。如果我不在 textbox1 中输入值并在 textbox2 中输入值，反之亦然，我应该收到一条错误消息。我们如何使用 jQuery 来实现这一点？

Answer 1

我发现执行此操作的最简单方法是向文本框添加一个类，例如“requiredField”。

<input type="text" class="requiredField" />

然后，您可以使用“查找”功能获取表中的所有必填字段。

textboxes = $('#tableid').find('.requiredField');

然后使用“each”函数迭代它们

textboxes.each(function() {
    if(this.value.length==0){
        //do something here
    }
}

对于这样的事情，我通常将文本框的边框涂成红色，并添加一个警报来告诉用户他们必须填写所有必填字段。

这是最终的代码。

requiredFields = $('#tableid').find('.requiredField');
var allFieldsComplete = true;
requiredFields.each(function(index) {
    if (this.value.length == 0) {
        $(this).addClass('requiredIncomplete');
        allFieldsComplete = false;
    } else {
        $(this).removeClass('requiredIncomplete');
    }
});
if(!allFieldsComplete){
    alert('Please complete all required fields');
}
return allFieldsComplete;

您还需要在 CSS 中指定“requiredIncomplete”样式。其作用是检查表中的所有文本框以查看它们是否包含数据。如果文本框不包含数据，则会向其中添加“requiredIncomplete”类(其中包含一些样式以将其与其他文本框区分开来)，否则它将删除该类。如果所有字段都包含数据，则返回 true；如果其中一个字段缺少数据，则返回 false。