javascript - 在 javascript 中更改边框颜色的问题

Question

我正在提交一个表单，它具有验证功能以确保我的文本框具有值。如果false，警报显示正常，但我无法让边框改变颜色。我似乎无法找出我做错了什么。

<script>
    function validate(){
        var dob = document.forms["ppm"]["dob"].value;
        if(dob == ""){
            document.getElementById("dob").style.border="red";
            alert("Error");
            return false;
        }
    }
</script>

<form onsubmit="return validate()" name="ppm" id="ppm" action="index.php" method="post">

<p>What is your DOB<br />
<input type="text" name="dob" id="dob" value="" />

<input type="submit" name="Continue" value="Continue"/>
</form>

Answer 1

您必须先给边框一定的宽度，然后边框才会可见。您可以使用单独的 border* 属性来实现:

document.getElementById("dob").style.borderColor ="red";
document.getElementById("dob").style.borderWidth ="2px";

或者，坚持使用边框，但提供完整的边框值(宽度、样式和颜色):

document.getElementById("dob").style.border = "2px solid red";

这是一个对原始示例稍加修改的工作示例:

function validate() {
  var dob = document.getElementById('dob').value;
  if (dob == null || dob == '') {
    document.getElementById("dob").style.border = "2px solid red";
    alert("Error");
    return false;
  }
}

<p>What is your DOB
  <br />
  <input type="text" name="dob" id="dob" value="" />

  <input type="button" onclick="validate()" name="Continue" value="Continue" />

我很想将您的 validate 函数重写为如下所示:

function validate() {
  var dobEl = document.getElementById('dob'); // only get it once
  if (!(dobEl.value || '').length)) { // if null or empty
    dobEl.style.border = "2px solid red"; // set the style
    alert("Error");
    return false; // don't submit the form
  } else {
    // set the border back to normal
  }
  return true; // do submit the form
}