JavaScript 警报消息不起作用

Question

下面是我汇总的代码，用于验证需要 9 个字段的表单中的 5 个字段。我创建了变量并将它们放入一个数组中。从那里我有一个函数循环遍历这个数组，如果该字段留空，则会弹出一个警报。

我遇到的问题是单击按钮时没有弹出警报。

var uName=document.getElementByName('userName');
var pword=document.gelElementByName('password');
var verify=document.getElementByName('passwordVerify');
var fName=document.getElementByName('firstName');
var lName=document.getElementByName('lastName');
var field=[uName,pword,verify,fName,lName];

function validateForm(form) {
  for(var i = 0; i < form.field.length; i++){
    if(form.field[i].value.length == 0){
       alert(form.field[i].name+' is required. Please populate');
       form.field[i].focus();
       return false;
    }
   } return true;
} 

不确定我做错了什么或导致错误的原因。非常感谢任何帮助。

Answer 1

function validateForm() {
  var uName = document.getElementById('userName');
  var pword = document.getElementById('password');
  var verify = document.getElementById('passwordVerify');
  var fName = document.getElementById('firstName');
  var lName = document.getElementById('lastName');
  var field = [uName, pword, verify, fName, lName];

  for (var i = 0; i < field.length; i++) {
    if (!field[i].value) {
      alert(field[i].name + ' is required. Please populate');
      field[i].focus();
      return false;
    }
  }
  return true;
}

<form>
  <input type="text" id="userName" name="userName" /><br/>
  <input type="text" id="password" name="password" /><br/>
  <input type="text" id="passwordVerify" name="passwordVerify" /><br/>
  <input type="text" id="firstName" name="firstName" /><br/>
  <input type="text" id="lastName" name="lastName" /><br/>
  <button onclick="validateForm();">Submit</button>
</form>

现在，这是我所做的更改：

为简单起见，我在整个代码中将 getElementByName 更改为 getElementById； 我把函数的参数去掉了，把form.field改成field，因为……嗯，第一个就错了。

我还将迭代测试改为!field[i].value，相当于测试值是否有长度，但对我来说似乎更合适。

这就是我所做的一切，以及向表单元素添加 ID。

---

P.S：这是我在这里的第一个详细答案，非常感谢您的反馈！ :)