javascript - 当我删除输入字段的内容时，Span 未更新

Question

我想链接 <span>元素的内容到输入字段的值，但它在第一次运行后停止工作。

我想在将输入字段的内容发送到服务器之前自动验证它。

function valid() {
  var username = document.getElementById('name').value;
  var refusesymbol = ['<', '>', '@', '.', ',', '\"', '\'', '\?', '\\', '\/', '\*', '\+', '\-', '\-', '\_', '(', ')', '{', '}', '$', '#', '!', '^', '&', '|', '~', , '\;'];

  for (var i = 0; i < refusesymbol.length; i++) {
    if (username.includes(refusesymbol[i])) {
      document.getElementById('sname').innerHTML = "invalid";
      return false;
    } else {
      document.getElementById('sname').innerHRTML = "valid";
    }

  }
}

<form method="POST" action="regist.php" enctype="multipart/form-data" class="form">
  <label>USER NAME</label><br />
  <input type="text" name="name" id="name" autocomplete="off" onkeyup="valid()" /><br />
  <span id="sname" style="color: red;"></span><br />
</form>

这会起作用一次，但之后 span 的值就会固定并且不再更新。

Answer 1

for 循环未正确关闭。

innerHRTML 语法无效。

这是您的 JavaScript 代码的更新版本:

function valid(){ 
    document.getElementById('sname').innerHTML = ''; // reset this on key stroke
    var username=document.getElementById('name').value;
    var refusesymbol= 
        ['<','>','@','.',',','\"','\'','\?','\\','\/','\*','\+','\-','\-','\_','(',')','{','}','$','#','!','^','&','|','~',,'\;'];
    for(var i=0;i<refusesymbol.length;i++)
            {
        if(username.includes(refusesymbol[i]))
        {
            document.getElementById('sname').innerHTML="invalid";
            return false;
        }
        else
        {
          document.getElementById('sname').innerHTML="valid"; // invalid syntax was here
        }
    } // this was missing
}