javascript - 输入文本字段验证检查

Question

在登录页面中我想创建表单验证。

我写了下面提到的代码。但它不起作用。我想隐藏注册按钮并在所有字段不为空时显示按钮。

function signupbtnactive (){

  var inputsignup = document.getElementsByClassName('input').val();

   while(inputsignup != null && !inputsignup.isEmpty()) {

            $('#signupbtn').show();

    };

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sign-up-htm">

  <div class="group">
      <label for="newloginusername" class="label">Username</label>
      <input id="newloginusername" type="text" class="input">
  </div>
 
  <div class="group">
      <label for="newloginusersname" class="label">Surname</label>
      <input id="newloginusersname" type="text" class="input">
  </div>
 
  <div class="group">
      <label for="newloginuser" class="label">Loginname</label>
      <input id="newloginuser" type="text" class="input">
  </div>

  <div class="group">
      <label for="newloginpwd" class="label">Password</label>
      <input id="newloginpwd" type="password" class="input" data-type="password">
  </div>

  <div class="group">
      <label for="newloginpwdconfirm" class="label">Repeat Password</label>
      <input id="newloginpwdconfirm" type="password" class="input" data-type="password">
  </div>

  <div class="group">
      <label for="loginemail" class="label">Email Address</label>
      <input id="loginemail" type="text" class="input">
  </div>

  <div class="group">
      <label for="loginemailcopy" class="label">Repeat Email Address</label>
      <input id="loginemailcopy" type="text" class="input">
  </div>

  <div class="group">
      <label for="dobsignup" class="label">Date of birth</label>
      <input id="dobsignup" type="text" class="input" onblur="Checkemailsignup()">
  </div>

  <div class="group"  id="signupdivbtn">
      <input type="submit" class="button" id="signupbtn" value="Sign Up" style="display: none;">
  </div>
</div>
 

上面提到的不起作用。请指教什么问题？

Answer 1

  var inputsignup = document.getElementsByClassName('inputField') ;

这将返回具有指定类的所有元素。因此，您必须循环遍历每个元素并检查值是否为空

function signupbtnactive (){

  var inputsignup = document.getElementsByClassName('inputField') ;
  var flag = false;
  for(var i in inputsignup){

    if(inputsignup[i].value== '' ){
      flag = true;
    }else{
      //console.log(inputsignup[i].value);
    }
  }
  if(!flag) { 
    $('#signupbtn').show(); 
  };

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sign-up-htm">

  <div class="group">
      <label for="newloginusername" class="label">Username</label>
      <input id="newloginusername" type="text" class="inputField">
  </div>
 
  <div class="group">
      <label for="newloginusersname" class="label">Surname</label>
      <input id="newloginusersname" type="text" class="inputField">
  </div>
 
  <div class="group">
      <label for="newloginuser" class="label">Loginname</label>
      <input id="newloginuser" type="text" class="inputField">
  </div>

  <div class="group">
      <label for="newloginpwd" class="label">Password</label>
      <input id="newloginpwd" type="password" class="inputField" data-type="password">
  </div>

  <div class="group">
      <label for="newloginpwdconfirm" class="label">Repeat Password</label>
      <input id="newloginpwdconfirm" type="password" class="inputField" data-type="password">
  </div>

  <div class="group">
      <label for="loginemail" class="label">Email Address</label>
      <input id="loginemail" type="text" class="inputField">
  </div>

  <div class="group">
      <label for="loginemailcopy" class="label">Repeat Email Address</label>
      <input id="loginemailcopy" type="text" class="inputField">
  </div>

  <div class="group">
      <label for="dobsignup" class="label">Date of birth</label>
      <input id="dobsignup" type="text" class="inputField" onblur="signupbtnactive()">
  </div>

  <div class="group"  id="signupdivbtn">
      <input type="submit" class="button" id="signupbtn" value="Sign Up" style="display: none;">
  </div>
</div>