获取属性的值。香草JS

Question

目标： 我希望在输入的有效属性为 true 时显示有效图标。以及当它为 false 时显示的无效图标 && 输入的长度为 1 个或多个字符。

（phoneInputs 函数）： 在控制台中，它会为每个按键输出“不完整”，直到长度 = 10。当它达到 10 个字符时，它表示好并将有效属性设置为 true。

（表单检查功能）： 根据长度添加或删除 .hidden class。（这是不起作用的部分，因为我试图将输入的 valid 属性作为目标。通过检查器的属性似乎可以通过 phoneInputs 函数正常工作和运行）

我试过 console.log() 以下方法：

input.target - 显示正确的输入元素。
input.target.有效 - 未定义
input.target.getAttribute('valid') - returns 错误

有什么帮助吗？

https://codepen.io/gold240sx/pen/wvyqPpP?editors=1111

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="https://kit.fontawesome.com/1758b3260f.js" crossorigin="anonymous"></script>
  <style>
       .hidden {
          display: none;
       }
  </style>
  <script>
    const formCheck = (input) => {
       const chxVer = input.target.parentElement.querySelector('.bool-form-val')
       const validIco = chxVer.querySelector('.check')
       const invalidIco = chxVer.querySelector('.x')

       if (input.target.getAttribute("valid")==true) {
           validIco.classList.remove('hidden')
           invalidIco.classList.add('hidden')
       } else if (input.target.getAttribute("valid")==false) {
           input.target.setAttribute('valid', false)
           console.log(input.target.valid)
           validIco.classList.add('hidden')
           invalidIco.classList.remove('hidden')
       } else {}
       console.log(input.target.getAttribute("valid"))
   }

   const phoneInputs = document.querySelectorAll('.phone-number');
   phoneInputs.forEach((input) => {

       const boolFormChecks = document.querySelectorAll('.bool-form-val');

       input.addEventListener('keyup', (e) => {
    
           formCheck(e)
           //US numbers only
           if (input.value.length === 10) {
               input.setAttribute('valid', true)
               // console.log(input.target.isValid)
               console.log('phone number good')
               console.log(input.value) //Outputs final phone number
           } else {
              // console.log(input.validity.valid)
              input.setAttribute('valid', false)
              // console.log(input.value.length)
              console.log("incomplete")
           }
       })
    })
  </script>
  <title>Document</title>
</head>
<body>
    <div class="input">
      <input 
         type="text"
         name="phoneNumber" 
         id="signup-phoneNumber" 
         placeholder="Phone Number" 
         class="icoinput phone-number" 
         maxlength="10"
      >
      <div class="bool-form-val">
        <i class="fa-solid fa-square-check check hidden"></i>
        <i class="fa-solid fa-square-x x hidden"></i>
      </div>
  </div>
</body>
</html>

Answer 1

您有两个问题：

getAttribute() 总是 returns 一个 string 但是你把它和 true 比较，这个比较总是错误的。 你应该改为 input.target.getAttribute("valid") == "true".
对于相反的检查，您应该只在 else 中进行，不需要 input.target.getAttribute("valid") == "false"（无论如何都不会起作用，因为您从未将值设置为 false）。
您在 keyup 侦听器的开头执行 formCheck(e)，然后在下一行中设置 valid 属性。这意味着如果您键入第 10 个字符，您将检查 valid 的值，但它仍然不正确，然后因为它是第 10 个字符，您将其设置为 true。
因此您应该在函数末尾执行 formCheck(e)。

这是您完成 2 次修复后的代码：

const formCheck = (input) => {
  const chxVer = input.target.parentElement.querySelector('.bool-form-val')
  const validIco = chxVer.querySelector('.check')
  const invalidIco = chxVer.querySelector('.x')

  if (input.target.getAttribute("valid") == "true") {
    validIco.classList.remove('hidden')
    invalidIco.classList.add('hidden')
  } else {
    input.target.setAttribute('valid', false)
    console.log(input.target.valid)
    validIco.classList.add('hidden')
    invalidIco.classList.remove('hidden')
  }
  console.log(input.target.getAttribute("valid"))
}

const phoneInputs = document.querySelectorAll('.phone-number');
phoneInputs.forEach((input) => {

  const boolFormChecks = document.querySelectorAll('.bool-form-val');

  input.addEventListener('keyup', (e) => {


    //US numbers only
    if (input.value.length === 10) {
      input.setAttribute('valid', true)
      // console.log(input.target.isValid)
      console.log('phone number good')
      console.log(input.value) //Outputs final phone number
    } else {
      // console.log(input.validity.valid)
      input.setAttribute('valid', false)
      // console.log(input.value.length)
      console.log("incomplete")
    }
    formCheck(e)

  })
})

.hidden {
  display: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://kit.fontawesome.com/1758b3260f.js" crossorigin="anonymous"></script>
  <title>Document</title>
</head>

<body>
  <div class="input">
    <input type="text" name="phoneNumber" id="signup-phoneNumber" placeholder="Phone Number" class="icoinput phone-number" maxlength="10">
    <div class="bool-form-val">
      <i class="fa-solid fa-square-check check hidden"></i>
      <i class="fa-solid fa-square-x x hidden"></i>
    </div>
  </div>
</body>

</html>

获取属性的值。香草JS

Getting the value of an attribute. Vanilla JS

html

javascript

attributes

boolean

attr