Question

我希望当 textfields 为空时它会突出显示它。以下是我的代码，它一次只突出显示一个字段。如果两个字段都为空，则会突出显示一个字段

<script>
function ValidateForm(){

    var summary=document.getElementById("<%=summary.ClientID%>");
    if (summary.value == "" && txtTest.value == "") {
        summary.style.backgroundColor = "Yellow";
        return false;
    }
    var txtTest = document.getElementById("<%=txtTest.ClientID%>");
    if (txtTest.value == "" ) {

        txtTest.style.backgroundColor = "Yellow";
        return false;
    }

   return true;

}
</script>

请帮我解决这个问题。我不想使用默认验证器。

Answer 1

这是因为在检查第二个输入之前你返回false。只有在检查完所有输入后，您才需要返回true或false。此外，您必须先检查txtTest，然后再检查其值。你可以这样做：

<script>
function ValidateForm(){

    var validate = true;

    var summary=document.getElementById("<%=summary.ClientID%>");
    if (summary.value == "") {
        summary.style.backgroundColor = "Yellow";
        validate = false;
    }
    var txtTest = document.getElementById("<%=txtTest.ClientID%>");
    if (txtTest.value == "" ) {

        txtTest.style.backgroundColor = "Yellow";
        validate = false;
    }

   return validate;

}
</script>

Answer 2

而不是在错误条件中返回false使用标志来指示错误。

默认标志为true，如果有错误，则应设置为false。

最后返回错误标志。

 <script>
 function ValidateForm(){
var flag=true;
var summary=document.getElementById("<%=summary.ClientID%>");

if (summary.value == "" && txtTest.value == "") {
    summary.style.backgroundColor = "Yellow";
    flag=false;
}
var txtTest = document.getElementById("<%=txtTest.ClientID%>");
if (txtTest.value == "" ) {

    txtTest.style.backgroundColor = "Yellow";
    flag=false;
}

 return flag;

}
</script>

Answer 3

首先你应该在评估之前得到txtTest var，然后在每个if之后返回，而不是在底部进行验证

var summary=document.getElementById("<%=summary.ClientID%>");
var txtTest = document.getElementById("<%=txtTest.ClientID%>");

if (summary.value == "") {
    summary.style.backgroundColor = "Yellow";
}

if (txtTest.value == "" ) {
    txtTest.style.backgroundColor = "Yellow";
}
return !(summary.value == "" || txtTest.value == "")

Answer 4

如果表单更复杂，另一种方法可能是将验证和突出显示分开。

＆＃13;

// onKeyUp
function k(e) {
 this.style.background = (this.value) ? "none" : "#0f0";
}
window.onload = function() {
  var t = ["in1","in2","in3"];
  var i, max = t.length;
  var d;
  for(i=0;i<max;i++) {
    d = document.getElementById(t[i]);
    d.style.background="#0f0";
    d.addEventListener("keyup",k,false);
  }
}

＆＃13;

<input type="text" id="in1" name="in1" placeholder="Input 1"/><br />
<input type="text" id="in2" name="in2" placeholder="Input 2"/><br />
<input type="text" id="in3" name="in3" placeholder="Input 3"/><br />

＆＃13;

突出显示验证javascript上的多个字段

4 个答案: