在 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";

或者，坚持使用 border 但提供完整的边框值（宽度、样式和颜色）：

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
}

Answer 2

您的段落缺少结束标记 (</p>)。使用style.border时还需要设置边框的所有部分属性。下面是一个工作示例。

    var isValid = function () {
        var dob = document.forms["ppm"]["dob"].value;
    
        if (dob === "") {
            document.getElementById("dob").style.border = "solid 1px red";
            
            alert("Error");
            
            return false;
        }
        
        return true;
    };

    <form onsubmit="return isValid();" name="ppm" id="ppm" action="index.php" method="post">
        <p>What is your DOB</p>
        <br />
        <input type="text" name="dob" id="dob" value="" />
        <input type="submit" name="Continue" value="Continue" />
    </form>

在 javascript 中更改边框颜色时出现问题

Issues changing border color in javascript

javascript

validation

dom-manipulation