验证 CSS 属性的多个输入答案

【问题标题】：validate multiple inputs for css property验证 CSS 属性的多个输入
【发布时间】：2012-06-19 00:05:39
【问题描述】：

我的页面上有多个输入字段。当输入无效数据时，我用 CSS 红色边框对它们进行正则表达式。

在将数据插入数据库之前，我想简单地检查该类的所有输入字段。以下是我的想法，但失败了。

if($('input').css("border") == "2px solid red"){//1 or more red borders to flag
    alert('yes');
}else{
    alert('no'); // there are no red borders in all inputs 
}

【问题讨论】：

标签： jquery css validation input

【解决方案1】：

我不会检查你的 CSS 类...

在提交之前重新运行您的验证功能。用它来检查一切是否正常。另外，不要忘记验证服务器端！

【讨论】：

那么，在点击时，再次调用所有正则表达式函数，如果有失败则触发标志？似乎它会工作。
是的。通常，我有一个函数可以验证所有内容，在表单上设置适当的 CSS，并返回true/false，无论是否有问题。这是一种有点懒惰的方法，因为最好在用户填写表单时逐个检查字段，但在提交时效果很好。对于您的情况，我只需创建一个 validateAll() 函数来调用您所有的个人验证器并返回 true/false。

【解决方案2】：

如果您想为所有一组输入添加红色边框，您可以这样做

$("input").css('border','1px solid red');

否则，如果你想通过 jquery 检查输入是否有类，你可以使用 .hasClass 方法。

假设您有一个名为 validate() 的验证函数，该函数将在执行时返回 false 或 true，以及具有特定类的特定输入组

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

$(".validate").each(function(){
 if(  !validate( $(this).val() ) ){
 $(this).css('border','1px solid red'); //add red border
 $(this).focus(); //focus the element
 alert("you didn't pass the validation"); //alert message error
 return false; //stops the loop
}

});

这将检查所有带有 validate 类的输入，并显示不满足验证功能的输入的错误消息

【讨论】：