使用 FOR 循环的 Javascript 表单验证

Question

我需要一些有关 JavaScript 的帮助，以便在 JavaScript 中使用 for 进行表单验证。

我有一个包含 5 个用户名和密码字段的表单，需要使用 JavaScript 来验证表单，然后才能将其提交到数据库。

你可以看到我需要的代码和结果here in this JsFiddle

或

这是我认为的代码:

<form action="insertMember" method="post" name="fmember" onsubmit="return validateMember()">
    <div class="form-group">
       <label>Shop</label>
       <select>
          <option value="">Choose The Host</option>
          <option value="1">Shop 1</option>
          <option value="2">Shop 2</option>
       </select>
    </div>
    <?php 
    $max = 5;
    for($i=1; $i<=$max; $i++) { ?>
       <span class="error<?php echo $i; ?>" class="label label-danger"></span>
       <label>Username <?php echo $i; ?></label>
       <input type="text" name="user[<?php echo $i; ?>]">
       <label>Password <?php echo $i; ?></label>
       <input type="password" name="pass[<?php pass $i; ?>]">
       <span class="errorp<?php echo $i; ?>" class="label label-danger"></span>
    <?php } ?>
</form>

这是我的 Javascript 代码(仍然错误):

// How to validate input using FOR LOOP ?
// $max or max can be changes to 10 or more.
function validateMember() {
// I got an error from here.
        var max = 3;
    var member = [];
    var password = [];
    for(var i=1; i<=max; i++) {
        var member = document.forms.fmember.user[i].value;
        var password = document.forms.fmember.pass[i].value;
      // Validate only username 1 must be filled or return error message
      if(i == 1) {
         if(member[i] == '') {
             document.getElementByID('error'+i).innerHTML = 'Username Must be Filled !';
             return !1;
         }
         else if (password[i] == '') {
                 document.getElementByID('errorp'+i).innerHTML = 'Password Must be Filled !';
             return !1;
         }
         else {
             return !0;
         }
      }
      else {
      // Validate if username 2 until MAX are filled must have min length = 2
         if(member[i] != '') {
               if(member[i].length < 2) {
                         document.getElementByID('error'+i).innerHTML = 'Username Must Have Minimum 2 Characters';
                       return !1;
                 }
             else {
                            return !0;
                }
         }
      }
    }
}

Answer 1

这里有多个问题:

1. 输入元素的name属性值具有数组语法

   <input type="text" name="user[1]">
   

   但是，当通过 Javascript 访问这些内容时，document.forms.fmember 在键 user 处不包含数组 - 每个元素都有一个唯一的键。尝试在控制台中运行此命令:Object.keys(document.forms.fmember.elements)。您应该看到如下所示的数组:

   ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "shop", "user[1]", "pass[1]", "user[2]", "pass[2]", "user[3]", "pass[3]", "user[4]", "pass[4]", "user[5]", "pass[5]"]
   

   所以更新这一行:

    var member = document.forms.fmember.user[i].value;
   

   致:

    var member = document.forms.fmember["user["+i+"]"].value;
   

   对于password变量也是如此:

   var password = document.forms.fmember["pass["+i+"]"].value;
   

2. 包含文本输入值的变量(即 member 和 password)具有字符串类型的值，因此要检查空字符串，只需使用 if(member == '') { 而不是 if(member[i] == '') {...

请参阅下面的这些更改(或 updated plunker )。

$('#shop').on('change',function() {
		$('#input').fadeIn(1000);
		if ($('#shop').val() == '') {
    		$('#input').fadeOut(500);
     }
});

// The question is HERE
// How to validate input using FOR LOOP ?
// Because the $max or max can be changed to 10 or more.
function validateMember() {
// I got an error from here.
		var max = 3;
    var member = [];
    var password = [];
    for(i=1; i<=max; i++) {
    		var member = document.forms.fmember["user["+i+"]"].value;
        var password = document.forms.fmember["pass["+i+"]"].value;
      // Validate only username 1 must be filled or return error message
      if(i == 1) {
         if(member== '') {
      	     document.getElementById('error'+i).innerHTML = 'Username Must be Filled !';
      	     return !1;
         }
         else if (password == '') {
      			 document.getElementById('errorp'+i).innerHTML = 'Password Must be Filled !';
          	 return !1;
         }
         else {
             return !0;
         }
      }
      else {
      // Validate if username 2 until MAX are filled must have min length = 2
         if(member != '') {
      		   if(member.length < 2) {
       				 	 document.getElementByID('error'+i).innerHTML = 'Username Must Have Minimum 2 Characters';
      				   return !1;
        		 }
             else {
      						return !0;
      			}
         }
      }
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- This code is not the actually code, this code is just for an example -->
<div id="#formMember">
  <h3>Input Member</h3>
    <form name="fmember" onsubmit="return validateMember()">
      <div>
         <label>shop</label>
         <select id="shop">
             <option value="">Choose The Shop..</option>              
             <option value="1">Shop 1</option>            
             <option value="2">Shop 2</option>
         </select>
      </div>
      <hr />
      <div id="input">
      <!-- This is actually use PHP for loop, i dont know how to use it at JsFiddle
      <?php 
      $max = 3; //so sometimes we can change it if want to add more fields.
      for($i=1; $i<$max; $i++) { ?>
        <div class="form-group">
          <span class="error<?php echo $i; ?>" class="label label-danger"></span>
          <label>Username <?php echo $i; ?></label>
          <input type="text" name="user[<?php echo $i; ?>]">
          <label>Password <?php echo $i; ?></label>
          <input type="password" name="pass[<?php pass $i; ?>]">
          <span class="errorp<?php echo $i; ?>" class="label label-danger"></span>
        </div>
     <?php } ?>
      -->
      <h4>This is just an example after this form submitted</h4>
          <div class="form-group">
              <span id="error1" class="label label-danger">Username 1 Must be Filled !<br></span>
              <label>Username 1</label>
              <input type="text" name="user[1]">
              <label>Password 1</label>
              <input type="password" name="pass[1]">
              <span id="errorp1" class="label label-danger">Password 1 Must Be Filled !<br></span>
          </div>
          <div class="form-group">
              <span id="error2" class="label label-danger">Username 2 Must Have Minimum 2 Characters !<br></span>
              <label>Username 2</label>
              <input type="text" name="user[2]" value="a">
              <label>Password 2</label>
              <input type="password" name="pass[2]" value="xxxxx">
              <span id="errorp2" class="label label-danger"></span>
          </div>
          <div class="form-group">
              <span id="error3" class="label label-danger"></span>
              <label>Username 3</label>
              <input type="text" name="user[3]">
              <label>Password 3</label>
              <input type="password" name="pass[3]">
              <span id="errorp3" class="label label-danger"></span>
          </div>
          <div class="form-group">
              <span id="error4"></span>
              <label>Username 4</label>
              <input type="text" name="user[4]" value="username2">
              <label>Password 4</label>
              <input type="password" name="pass[4]">
              <span id="errorp4" class="label label-danger">Password 4 Must Be Filled !<br></span>
          </div>
          <div class="form-group">
              <span id="error5"></span>
              <label>Username 5</label>
              <input type="text" name="user[5]">
              <span id="errorp5"></span>
              <label>Password 5</label>
              <input type="password" name="pass[5]"> 
          </div>
          <button type="submit" class="col-sm-offset-2 btn btn-primary">
            Submit
          </button>
       </div>
    </form>
</div>