Question

我有一个带有以下代码的示例表单（为JSFiddle剥离）

<input type="text" id="i1" />
<input type="text" id="i2" />
<input type="text" id="i3" />

<input type="text" id="e1"/>
<input type="text" id="e2" />
<input type="text" id="e3" />
<input type="button" id="submit" value="Submit">

jQuery代码如下（为JSFiddle剥离）

$("#e1").hide();
$("#e2").hide();
$("#e3").hide();
$("#submit").click(function(){
var a = $("#i1").val();
var b = $("#i2").val();
var c = $("#i3").val();

if (a == "" && b !== "" && c!=="") {
   $("#e1").show();
} else if (a !== "" && b == "" && c=="") {
   $("#e2").show();
   $("#e3").show();
} else if (a !== "" && b !== "" && c=="") {
   $("#e3").show();
}else if (a == "" && b == "" && c=="") {
$("#e1").show();
$("#e2").show();
$("#e3").show();
}
});

我正在尝试使用可能的组合验证字段。如果字段为空白，它将相应地显示或隐藏最后三个文本字段（带有id e *）。例如，如果第一个字段为空而其他字段为空，则应显示e1，其他字段为隐藏字段。与典型表格字段相同的其他字段都是强制性的。如果我写上面的代码，它太长而复杂。对于这种情况，有没有简单的解决方案？

由于

Answer 1

这会做你想要的......

$(document).ready(function(){

$("#e1").hide();
$("#e2").hide();
$("#e3").hide();

$("#submit").click(function(){

   $("input[id*=i]").each(function(i){
        if($(this).val()=="") $("#e"+(i+1)).show();
        else $("#e"+(i+1)).hide();
   });

});
});

Answer 2

＆＃13;

$(function(){
$("#e1").hide();
$("#e2").hide();
$("#e3").hide();
$("#submit").click(function(){
var a = $("#i1").val();
var b = $("#i2").val();
var c = $("#i3").val();

if (a == "") {
   $("#e1").show();
}if (b == "") {
   $("#e2").show();
   
}if (c == "") {
  
   $("#e3").show();
}

});
})

＆＃13;

<input type="text" id="i1" />
<input type="text" id="i2" />
<input type="text" id="i3" />

<input type="text" id="e1"/>
<input type="text" id="e2" />
<input type="text" id="e3" />
<input type="button" id="submit" value="Submit">

＆＃13;

Demo

使用jQuery验证表单字段组合的更好方法

2 个答案: