我有 13 个输入文本框,只是为了收集用户信息。我试图添加一点逻辑,当用户单击“下一步”按钮时,检查输入字段是否为空,如果是,则在文本框后面放置一个 X 图像。我要起床的地方是,如果我将文本放入框中,那么它不会用红色勾勒出框的轮廓,但仍会在表单后面放置一个 X。
我尝试过使用 $.each() 和 $.filter()
这是js:
var invalid = '<img src="css/Filtration/img/x.png" /> ';
$('.btn').click(function () {
var inputs = $(":input").filter(function () {
return this.value === "";
});
if (inputs.length) {
$(inputs).css('border-color', 'red').after(invalid);
console.log(inputs.length);
}
});
以下是一些输入文本框,并非全部:
<label>First Name:</label>
<input type="text" name="First Name" class="txtbox" id="firstName" />
<label>Last Name:</label>
<input type="text" name="Last Name" class="txtbox" id="lastName" />
<label>Email Address:</label>
<input type="text" name="Email Address" class="txtbox" id="email" />
<label>Company:</label>
<input type="text" name="Company" class="txtbox" id="company" />
最佳答案
试试这个:
var invalid = '<img src="css/Filtration/img/x.png" /> ';
$('.btn').click(function () {
$(":input").each(function () {
if($(this).val() == '' ){
$(this).css({borderColor: 'red'}).after(invalid);
}
});
});
请注意,如果您之前没有设置其他边框 css 参数,则 color
可能不起作用。所以这个模式可以在这种情况下解决这个问题:
.css({border: '1px solid red'})
现在,:input
有点宽泛,因此效率低下。因此,最好说:
$(':text', '#container').each(...
其中#container
当然是所有输入的容器。
关于javascript - 使用图像验证输入文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31009729/