如果（长度 < x）禁用按钮

Question

晚上好。我是 JavaScript 的初学者，我正在尝试重新创建一个特定的网页。那里有一个按钮，如果登录表单没有至少 11 个用户元素和 8 个密码元素，该按钮将被禁用。我怎样才能用 HTML 和 JS 做到这一点？

function blockButtonByUser() {
  var cpfleng = document.getElementById('.iptuser').length
  console.log(cpfleng)
  var btnsubmit = document.getElementById('.btnsubmit')
  if (cpfleng < 11) {
    btnsubmit.disabled = true;
  } else {
    btnsubmit.disabled = false;
  }
}

function blockButtonByPassword() {
  var passwordlength = document.getElementById('.iptpassword').length
  console.log(cpfleng)
  var btnsubmit = document.getElementById('.btnsubmit')
  if (passwordlength < 8) {
    btnsubmit.disabled = true;
  } else {
    btnsubmit.disabled = false;
  }
}

<header><img src="assets/white.svg" alt="logo nubank" height="80px"></header>
<div class="container">
  <h2>Faça seu login</h2>
  <div class="form">
    <div class="user">
      <label for="cpf" class='lbluser'>CPF</label>
      <input type="text" name="cpf" id="cpf" class='iptuser'>
      <div class="underline"></div>
    </div>
    <div class="password">
      <label for="password" class='lblpassword'>Senha</label>
      <input type="password" name="password" id="password" class='iptpassword'>
      <div class="underline"></div>
    </div>
    <input type="submit" value="CONTINUAR" class='btnsubmit'>
  </div>
  <div class="footer">
    <div class="esqueci">
      <a href="links/forgot.html">Esqueci minha senha ></a>
    </div>
    <div class="naocliente">
      <a href="#">Ainda não sou cliente ></a>
    </div>
  </div>
</div>

感谢您的帮助！

Answer 1

您可以为 user 和 password 的 input 事件添加事件侦听器，并且您可以根据需要启用或禁用该按钮。您可以像这样重构您的代码：

var cpf = document.getElementById('cpf')
var password = document.getElementById('password')
var btnsubmit = document.getElementById('btnsubmit')

cpf.addEventListener('input', function (evt) {
    if(cpf.value.length < 11 || password.value.length < 8){
    btnsubmit.disabled = true;
  } else {
    btnsubmit.disabled = false;
  }
});

password.addEventListener('input', function (evt) {
    if(cpf.value.length < 11 || password.value.length < 8){
    btnsubmit.disabled = true;
  } else {
    btnsubmit.disabled = false;
  }
});

<header><img src="assets/white.svg" alt="logo nubank" height="80px"></header>
<div class="container">
    <h2>Faça seu login</h2>
    <div class="form">
        <div class="user">
            <label for="cpf" class='lbluser'>CPF</label>
            <input type="text" name="cpf" id="cpf" class='iptuser'>
            <div class="underline"></div>
        </div>
        <div class="password">
            <label for="password" class='lblpassword'>Senha</label>
            <input type="password" name="password" id="password" class='iptpassword'>
            <div class="underline"></div>
        </div>
        <input type="submit" value="CONTINUAR" class='btnsubmit' id='btnsubmit' disabled>
    </div>
    <div class="footer">
        <div class="esqueci">
            <a href="links/forgot.html">Esqueci minha senha ></a>
        </div>
        <div class="naocliente">
            <a href="#">Ainda não sou cliente ></a>
        </div>
    </div>
</div>
<script src="main.js"></script>

Answer 2

这是使用 eventListener 的类似内容：

var cpfOkay = false
var passwordOkay = false;
var btnsubmit = document.getElementsByClassName('btnsubmit')[0];

document.getElementById('cpf').addEventListener('input', function(){

  btnsubmit = document.getElementsByClassName('btnsubmit')[0];
      cpfOkay = false;
    if (event.target.value.length >= 11) {
        cpfOkay = true;
    }
    checkBoth();
})

document.getElementById('password').addEventListener('input', function(){

  btnsubmit = document.getElementsByClassName('btnsubmit')[0];
    passwordOkay = false;

    if (event.target.value.length >= 8) {
        passwordOkay = true;
    }

    checkBoth();
})

function checkBoth() {
      btnsubmit.disabled = true;
      btnsubmit.style.opacity = 0.5;

  if (cpfOkay && passwordOkay) { 
    btnsubmit.disabled = false;
        btnsubmit.style.opacity = 1;
  } 
}

<header><img src="https://placekitten.com/200/300" alt="logo nubank" height="80px"></header>
<div class="container">
    <h2>Faça seu login</h2>
    <div class="form">
        <div class="user">
            <label for="cpf" class='lbluser'>CPF</label>
            <input type="text" name="cpf" id="cpf" class='iptuser'>
            <div class="underline"></div>
        </div>
        <div class="password">
            <label for="password" class='lblpassword'>Senha</label>
            <input type="password" name="password" id="password" class='iptpassword'>
            <div class="underline"></div>
        </div>
        <input type="submit" value="CONTINUAR" class='btnsubmit' disabled style="opacity:0.5">
    </div>
    <div class="footer">
        <div class="esqueci">
            <a href="links/forgot.html">Esqueci minha senha ></a>
        </div>
        <div class="naocliente">
            <a href="#">Ainda não sou cliente ></a>
        </div>
    </div>
</div>

Answer 3

您遇到了一些问题。一个是类上的 getElementById。一个是没有事件处理程序。最后，您试图获取元素的长度，而不是值的长度。

这应该有效：

document.querySelector('.btnsubmit').addEventListener('click', e =>{
    blockButtonByUser();
    blockButtonByPassword()
})

function blockButtonByUser(){
    var cpfleng = document.querySelector('.iptuser').value.length
    console.log(cpfleng)
    var btnsubmit = document.querySelector('.btnsubmit')
    if (cpfleng < 11) {
        btnsubmit.disabled = true;
    } else{
        btnsubmit.disabled = false;
    }
}

function blockButtonByPassword(){
    var passwordlength = document.querySelector('.iptpassword').value.length
    console.log(passwordlength)
    var btnsubmit = document.querySelector('.btnsubmit')
    if (passwordlength < 8) {
        btnsubmit.disabled = true;
    } else{
        btnsubmit.disabled = false;
    }
}

如果（长度 < x）禁用按钮

Disable a button if (length < x)

html

javascript

button