Javascript 输入样式 - 函数在第一个 IF 处停止答案

【问题标题】：Javascript input styling - function stops at first IFJavascript 输入样式 - 函数在第一个 IF 处停止
【发布时间】：2023-02-20 22:38:22
【问题描述】：

我想在 Javascript 中实现实时输入数据验证，不幸的是它总是在第一个 IF 处停止（红色字段边框 - 长度太短）。你知道是什么原因造成的吗？

HTML:

<input type="text" id="fullname" name="fullname" minlength="3" maxlength=12 pattern="[a-zA-z]" onkeydown="validateName()" required>

  let nameValue = document.getElementById("fullname")


function validateName(){
  if(nameValue.innerText.length<3){
  nameValue.setAttribute("style","border-color:red")
}
  else if(nameValue.innerText.length>=3 && nameValue.innerText.length<=12){
    nameValue.setAttribute("style", "border-color:green")
  }
  else{
    nameValue.setAttribute("style", "border-color:red")
  }
}

【问题讨论】：

总的来说这里的代码有些尴尬，无论如何，你为什么要检查innerText而不是value？对于任何输入字段，value 应该是您处理的主要内容。

标签： javascript validation input

【解决方案1】：

nameValue 声明必须在函数内部，以便在更新输入时检查新值，而不是初始值。

function validateName() {
  const nameValue = document.getElementById("fullname")
  if (nameValue.value.length < 3) {
    nameValue.setAttribute("style", "border-color:red")
  } else if (nameValue.value.length >= 3 && nameValue.value.length <= 12) {
    nameValue.setAttribute("style", "border-color:green")
  } else {
    nameValue.setAttribute("style", "border-color:red")
  }
}

&lt;input type="text" id="fullname" name="fullname" minlength="3" maxlength=12 pattern="[a-zA-z]" onkeydown="validateName()" required&gt;

【讨论】：

或者如果保留在函数之外，请不要使用let 声明它。