Question

我想编写一个代码，借助于我可以找到代码的长度，并根据我可以更改错误的颜色。就像密码小于4一样，它会显示为红色，如果是8而不是黄色，如果是12而不是绿色。

我的初始代码是，

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function checkPasswordLength(password){
     if (password.length > 12) {
  document.getElementById("errorSpan").innerHTML = "Limit is 12characters";
     }
     else {
         document.getElementById("errorSpan").innerHTML = "";
     } 
}
</script>
</head>
<body>
<form>
<input type="password" name="pwd"onchange='checkPasswordLength(this.value)'>
<span id="errorSpan" style="color:red;"></span>
</div>
</form> 
</body>
</html>

Answer 1

你在找这样的东西吗？

function checkPasswordLength(password) {
  var span = document.getElementById("errorSpan");
  if (password.length >= 12) {
    span.style.color = "green";
    return;
  } else if (password.length >= 4) {
    span.style.color = "yellow";
    return;
  } else {
    span.style.color = "red";
  }
}

<input type="password" name="pwd" onkeyup='checkPasswordLength(this.value)'>
<span id="errorSpan" style="color:red;">****</span>

您已经拥有document.getElementById，所以您需要做的就是将.style.color设置为您需要的任何内容。如果您需要更改文字，可以像往常一样使用.innerHTML。

请注意，我已从onchanged更改为onkeyup因为onchanged仅在控件失去焦点时才会触发。

验证密码并根据密码长度更改其颜色：

1 个答案: