Question

我希望简化验证代码。

if($('#textbox1').val() != '' && $('#textbox2').val() != '' && $('#textbox3').val() != ''){
   $('#myModal').modal('show');
}else {
   alert ('textboxes must be empty');
}

我已经为每个required添加了textbox属性，但在显示模态之前我想要另一个验证。还有其他简化方法吗？我试过这种方式，

if($('#textbox1, #textbox2, #textbox3'){
   $('#myModal').modal('show');
}else {
   alert ('textboxes must be empty');
}

但它只识别第一个id（textbox1）。如果其他textboxes为空，则仍会显示模态。

Answer 1

您可以按类选择并过滤

if ($("[required]").filter(function() { return !this.value.length; }).length) { 
    //stuff is not filled in
} else {
   //filled in
}

或者您可以使用任何jQuery验证库。

HTML：

<input type="text" required />
<input type="text" required />
<input type="text" required />

JavaScript：

$("[required]").on("change", function() {
    var color;
    if ($("[required]").filter(function() { return !this.value.length; }).length) { 
        color = "red";
    } else {
       color = "green";
    }
    $("body").css("background-color", color);
}).eq(0).trigger("change");

Answer 2

<input type="text" id="textbox1" value="0"/>
<input type="text" id="textbox2" value="2"/>
<input type="text" id="textbox3" value="  "/>

jquery

var array = $("input[id^=textbox]").filter(function (index, element) {
    return element.value.trim().length != 0;
});

if (array.length === 3) {
    $('#myModal').modal('show');
} else {
    alert('textboxes must be empty');
}

简化Jquery中不同id的验证

2 个答案: