javascript - JavaScript 无法正常运行

Question

在用户能够单击提交按钮之前，我有这个 js 代码来验证注册。此功能通过onkeyup="validatePassword()"密码字段激活。它要求用户在启用提交按钮之前填写所有必填字段。但是由于某种原因，该功能无法识别if (pw.lenght < 6)我在这里做错了什么？

一些限制：我没有在这里使用表单标签。

function validatePassword() {
  var firstname = document.getElementById("firstname").value;
  var username = document.getElementById("username").value;
  var email = document.getElementById("email").value;
  var pw = document.getElementById("pw").value;
  var pwMsg = "";
  var msg = "Please fill in the required fields";

  console.log(pw.length);

  if (pw.length < 6) {
    pwMsg = "Password should be between 6 and 8 characters";
    document.getElementById("pwMsg").innerHTML = pwMsg;
    document.getElementById("register-btn").disabled = true;
  } else {
    document.getElementById("register-btn").disabled = false;
  }


  if (firstname == "") {
    document.getElementById("firstname").focus();
    document.getElementById("msg").innerHTML = msg;
    document.getElementById("register-btn").disabled = true;
  } else {
    document.getElementById("register-btn").disabled = false;
  }

  if (username == "") {
    document.getElementById("username").focus();
    document.getElementById("msg").innerHTML = msg;
    document.getElementById("register-btn").disabled = true;
  } else {
    document.getElementById("register-btn").disabled = false;
  }

  if (email == "") {
    document.getElementById("email").focus();
    document.getElementById("msg").innerHTML = msg;
    document.getElementById("register-btn").disabled = true;
  } else {
    document.getElementById("register-btn").disabled = false;
  }
}

<div class="section">
  <span style="color: red;"><p id="msg" class="center-align"></p></span>
  <div class="input-field col s12 m6">
    <input type="text" name="firstname" class="validate" id="firstname" required>
    <label for="firstname">First Name</label>
    <span id="fname-msg" class="helper-text" data-error="Required"></span>
  </div>
  <div class="input-field col s12 m6">
    <input type="text" name="lastname" class="validate" id="lastname">
    <label for="lastname">Last Name</label>
    <span id="lname-msg" class="helper-text"></span>
  </div>
  <div class="input-field col s12 m6">
    <select name="gender" id="gender">
      <option value="" disabled selected>Select Gender</option>
      <option value="Male">Male</option>
      <option value="Female">Female</option>
    </select>
    <label>Gender</label>
  </div>
  <div class="input-field col s12 m6">
    <input type="text" name="username" class="validate" id="username" required>
    <label for="username">Username</label>
    <span id="uname-msg" class="helper-text" data-error="Required"></span>
  </div>
  <div class="input-field col s12 m6">
    <input type="email" name="email" class="validate" id="email" required>
    <label for="email">Email</label>
    <span id="email-msg" class="helper-text" data-error="Invalid Email"></span>
  </div>
  <div class="input-field col s12 m6">
    <input type="password" name="password" class="validate" maxlength="8" id="pw" onkeyup="validatePassword()" required>
    <label for="password">Password</label>
    <span style="color: red;"><p id="pwMsg" class="left-align"></p></span>

    <span style="color: red;"><s:property value="msg" /></span>
  </div>
  <div class="col s12 left-align">
    <p>
      Got an account? Sign in <a href="login">Here</a>
    </p>
  </div>
  <div class="row right-align">
    <a href="home" class="waves-effect waves-light btn-flat red-text">CANCEL</a>
    <a class="waves-effect waves-light btn modal-trigger indigo darken-4" data-target="confirmation" id="register-btn" onClick="transferRegistration()" disabled>REGISTER</a>
  </div>
</div>

标签： javascripthtml

Answer 1

The problem with the code is that you have separated the validation function into individual if-else statements. As in you have separate if-else statements to validate each of the individual fields.

Also since each of the else statement is essentially effecting the same HTML element, one else can over ride the other. I would suggest removing the unnecessary else statements and changing some of the if statements to an 'else if' statement

Another change I would suggest is to change the tag of the submit button. change it from a to button (it should work with materialize)

function validatePassword(){
    var firstname = document.getElementById("firstname").value;
    var username = document.getElementById("username").value;
    var email = document.getElementById("email").value;
    var pw = document.getElementById("pw").value;
    var pwMsg = "";
    var msg = "Please fill in the required fields"; 

    if (pw.length < 6 ){
        pwMsg = "Password should be between 6 and 8 characters";
        document.getElementById("pwMsg").innerHTML = pwMsg;
        document.getElementById("register-btn").disabled = true;
        console.log("button disabled")
    } else if (firstname == ""){
        document.getElementById("firstname").focus();
        document.getElementById("msg").innerHTML = msg;
        document.getElementById("register-btn").disabled = true;
    } else if (username == ""){
        document.getElementById("username").focus();
        document.getElementById("msg").innerHTML = msg;
        document.getElementById("register-btn").disabled = true;
    }  else if (email == ""){
        document.getElementById("email").focus();
        document.getElementById("msg").innerHTML = msg;
        document.getElementById("register-btn").disabled = true;
    } else {
        document.getElementById("pwMsg").innerHTML = "";
        document.getElementById("register-btn").disabled = false;
    }
}