Javascript 表单验证 - event.target.validity.valid

Question

javascript 的新手，只是尝试进行简单的表单验证，如果 user/pass 有效，则框边框变为绿色，如果无效，则变为红色（如图）Valid/Invalid

这是我的 HTML：（Form Works，我猜我搞砸了听众和处理程序）

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  <input type="text" name="username" value="Username" minLength="6" maxlength="10" required>
  <br><br>
  <input type="text" name="password" value="Password" minLength="8" maxlength="15" required>
  <br><br>
  <input type="submit" value="Submit" onclick="function(changeStyle)">
</form> 

<script src="Script1.js">
</script>

</body>
</html>

Javascript:

function valid() {
  var textElements = document.getElementsByTagName('input');
    textElements[i].addEventListener('input', function(changeStyle) {
    if (event.target.validity.valid) {
        textElements[i].style.border = "solid green 2px";
        textElements[i].style.boxShadow = "0 0 5px green";
    } else {
        textElements[i].style.border = "solid red 2px";
        textElements[i].style.boxShadow = "0 0 5px red";
    }
}, false);

}


</script>

Answer 1

我没看懂你的代码。例如，textElement[i] 是什么，但您可以使用 JQuery 执行类似的操作：

   

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <form action="/action_page.php">
      <input id = "username" type="text" name="username"  minLength="6" maxlength="10" required>
      <br><br>
      <input id="password" type="text" name="password"  minLength="8" maxlength="15" required>
      <br><br>
      <input type="submit" value="Submit" onclick="">
    </form>
    <script>

    $('#username, #password').on('keyup', function () {

      if($('#password').val().length < 8 ){
         $('#password').css("border-color","#FF0000")
      }else{
        $('#password').css("border-color","#00FFFF")
      }
    });
    </script>

这里keyup handler会响应用户名和密码的键盘操作。在示例中，如果密码的长度小于 8，则输入的边框颜色将为红色，否则将为浅绿色

Answer 2

您正在监听一个不存在的事件。浏览器没有生成 "input" 这样的事件。您应该收听 "keyup".
您的行为就像是在迭代（通过引用 textElements[i].），但您的代码中没有迭代循环。

所以我所做的是：

将其全部封装在一个侦听器中以确保 DOM 准备就绪
将选择器的结果转换为数组，以便我们可以使用 Spread 运算符

.forEach

迭代该数组并为数组中的每个项目添加一个 'keyup' 侦听器。这意味着每次按下和释放一个键时，侦听器都会触发

例如

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  <input type="text" name="username" value="Username" minLength="6" maxlength="10" required>
  <br><br>
  <input type="text" name="password" value="Password" minLength="8" maxlength="15" required>
  <br><br>
  <input type="submit" value="Submit" onclick="function()">
</form> 

<script>

document.addEventListener("DOMContentLoaded", function() {
  var textElements = [...document.getElementsByTagName('input')];
  var listen = function(item, index) {
    item.addEventListener('keyup', function(ev){
      if (event.target.validity.valid) {
          item.style.border = "solid green 2px";
          item.style.boxShadow = "0 0 5px green";
      } else {
          item.style.border = "solid red 2px";
          item.style.boxShadow = "0 0 5px red";
      }
    })
  }
  textElements.forEach(listen);
});



</script>

</body>
</html>

Javascript 表单验证 - event.target.validity.valid

Javascript Form Validation - event.target.validity.valid

javascript

validation

listener

handler