Question

我想要做的是同时更改所有输入文本边框的颜色，如果它/它们在单击按钮时为空或没有值，我有一个功能来执行此操作。首先，我将要检查值的输入文本放入数组中，然后调用函数，在其中循环遍历数组并检查空值。单击按钮时，如果我的所有输入文本都为null，则只会更改数组中第一个索引的颜色。

这是我的功能：

function isValid(array){
            for(var x=0;x<array.length;x++){
                if (array[x].value.trim() == ""){
                    $(array[x]).css("border-color","#FF0000");
                    return false;
                }
            }
        }

这就是我调用我的功能的方式：

var array = [document.getElementById('txtLastName'),
            document.getElementById('txtFirstName')
            ];
if (!isValid1(array)) {
return false;
    }

如何使用空值更改数组中所有输入的边框颜色？谢谢！

Answer 1

这是我的两分钱，可能需要调整：

function isValid(selector){
    return ($(selector).filter(function() {
        return (this.value.trim() === "");
    }).css("border-color","#FF0000").length === 0);
}

使用它：

isValid("#txtLastName, #txtFirstName");

我在调用者中构建CSS选择器并将其传递给isValid()，您可以传递数组["txtFirstName", "txtFirstName"]并在isValid()中构建选择器。

有很多方法可以做到这一点，更模块化的方法是使用nullValidate类作为选择器，因此您可以拥有任意数量的验证字段。

编辑：如果找到无效元素则返回

Answer 2

为什么混合使用jQuery和vanilla JS ..可以使用filter方法。

$('#txtLastName, #txtFirstName').filter(function() {
    return $.trim(this.value) === '';
}).css("border-color","#FF0000");

您编写代码的方式也没有任何问题。

您最有可能没有使用正确的ID。

Your Code

<强> JQuery Code

Answer 3

我的价值2美分

<form name="form">
<input type="text" name="firstname" />
<input type="button" name="submit_btn" value="send" />
</form>


$(document).ready(function(){

$('input[type="text"]').keyup(function(){
    var length = $('input[type="text"]').val().length;
    if(length===0){
        $(this).css({"border":"1px solid red"});
    }
    else {
        $(this).css({"border": ""});
    }
});

$('input[type="button"]').click(function(){
   var length = $('input[type="text"]').val().length;
    if(length===0){
        $('input[type="text"]').css({"border":"1px solid red"});
    } else {
        $('input[type="text"]').css({"border":""});
    }
});

}）;

如果输入值为null，则更改边框颜色

3 个答案: