禁用/启用注册按钮的最佳事件监听器？

Question

我的应用程序有一个注册页面。 为了能够单击按钮，用户名和 email 输入字段必须在其中包含内容。 密码输入字段有一个参数列表：长度在 8-30 个字符之间，并且至少包含一个：大写字母、小写字母、特殊字符和数字。 并且确认密码输入字段应与密码输入字段完全匹配。 我使用正则表达式来测试密码输入字段，并使用三等号运算符来测试密码是否匹配。 我在这两种情况下都使用 oninput 事件。 我遇到问题的地方是找到触发与我的按钮关联的 styles 的最佳事件，具体取决于它是启用还是禁用。 我可以将样式和元素属性与我用于密码内容的相同功能联系起来，但它并不完全证明。

JS：

function pwValidation() {

    let str = document.getElementById('password').value;
    let message = document.getElementById('passwordError');
    
    if (!str.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$@!%&*?])[A-Za-z\d#$@!%&*?]{8,30}$/)) {
        message.innerText = 'Passwords must be between 8-30 characters long and contain atleast one: uppercase letter, lowercase letter, special character, & number.';
        document.getElementById('signUp-btn').style.color = "rgba(255, 255, 255, 0.38)"
        document.getElementById('signUp-btn').style.backgroundColor = "rgba(14, 16, 27, 0.38)"
    } else {
        message.innerText = '';
    }

  };

  function pwMatch() {
    if(document.getElementById('password').value !== document.getElementById('password2').value){
        document.getElementById('passwordMatch').innerText = 'Passwords must match.';
    } else {
        document.getElementById('passwordMatch').innerText = '';
        document.getElementById('signUp-btn').style.color = "rgb(255, 255, 255)"
        document.getElementById('signUp-btn').style.backgroundColor = "rgb(14, 16, 27)"
    }
  }

HTML：

<form action="/register/createUser" method="POST">
      <fieldset>
        <input
          type="text"
          id="text"
          name="username"
          class="form-control"
          placeholder="Username"
          oninput="inputDisable()"
        />
        <input
          type="email"
          id="email"
          name="email"
          class="form-control"
          placeholder="Email"
          oninput="inputDisable()"
        />
        <div class="password-container">
        <input
          type="password"
          id="password"
          name="password"
          class="form-control"
          placeholder="Password"
          oninput="pwValidation()"
         />
        <div id="passwordError"></div>
        <i class="fa-regular fa-eye-slash" id="togglePassword"></i>
      </div>
      <div class="password-container">
        <input
          type="password"
          id="password2"
          name="password2"
          class="form-control"
          placeholder="Confirm Password"
          oninput="pwMatch()"
          />
        <div id="passwordMatch"></div>
        <i class="fa-regular fa-eye-slash" id="togglePassword2"></i>
      </div>
        <button type="submit" id="signUp-btn">Sign Up</button>
      </fieldset>
    </form>

我的功能逻辑并不完全证明，您可以轻松地让按钮显示。 我的函数中需要一些更好的逻辑，或者需要更好的事件监听器，但我缺乏上下文，因为我是新手。