JavaScript表单验证一次一个字段

我需要编写一个脚本来进行JavaScript验证，但我需要它一次完成一个字段。例如：

我有四个领域；名字、姓氏、电子邮件、年龄

如果用户单击submit字段，并且所有内容都为空，那么它应该只关注表单中的第一个字段（名字），然后会抛出一条错误消息，关注该框，并用红色边框将该字段变为红色

如果他们填写第一个字段，那么将按照第二个字段（姓氏）的步骤进行操作

唯一的另一个曲线球是年龄字段只需要允许数字，并且它们必须在0-80之间

我的当前脚本正确地突出显示了表单，但它突出显示了所有字段，并聚焦最后一个字段。年龄也是唯一一个出错的领域。这是我的剧本：

"use strict";

var deptList = ["SDEV","DBMS","INFM","CSCI","SVAD","NETI","ITSP","CSIA"];
var list = document.getElementById("progList");
var formValidity = true;
var errMsgDiv = document.getElementById("errorMsg");
function createCheck() {
    deptList.sort();
    for (var i = 0; i <= 7; i++) {
        (function(i) {
        var boxText = deptList[i];
        var deptEntry = document.createElement ("label");
        deptEntry.innerHTML = "<input type=checkbox name=programs[] value=" + i + " />" + boxText;
        list.appendChild (deptEntry);
        console.log("deptEntry");
  })(i);
 }
}
function validateInput(evt) {
  if (evt.preventDefault) {
    evt.preventDefault(); // prevent form from submitting
  } else {
    evt.returnValue = false; // prevent form from submitting in IE8
  }
  formValidity = true; // reset value for revalidation
  checkBlank();
  validateNumbers(); // additional
  if (formValidity === true) {
    document.getElementsByTagName("form")[0].submit();
  }
}
function createEventListeners() {
  var form = document.getElementsByTagName("form")[0];
   if (form.addEventListener) {
    form.addEventListener("submit", validateInput, false);
  } else if (form.attachEvent) {
    form.attachEvent("onsubmit", validateInput);
}
}
function checkBlank() {
  var chkBlnkVal = true;
  var fName = document.forms[0].fname;
  var lName = document.forms[0].lname;
  var email = document.forms[0].email;
  console.log("Entering checkBlank " + "form validity: " + formValidity +" check blank validity: " + chkBlnkVal);
 try { 
  if (fName.value === ''){
    fName.style.background = "rgb(255,233,233)";
    fName.style.borderColor = "red";
    chkBlnkVal = false;
    fName.focus();
  } else {
    fName.style.background = "white";
    fName.style.borderColor = "white";
  }
 if (chkBlnkVal === false) {
    throw "Please complete all fields.";
    }
    errMsgDiv.style.display = "none";
    errMsgDiv.innerHTML = "";
  }
 catch(msg) {
 errMsgDiv.style.display = "block";
 errMsgDiv.innerHTML = msg;
 formValidity = false;
 }
  try { 
  if (lName.value === ''){
    lName.style.background = "rgb(255,233,233)";
    lName.style.borderColor = "red";
    chkBlnkVal = false;
    lName.focus();
  } else {
    lName.style.background = "white";
    lName.style.borderColor = "white";
  }
 if (chkBlnkVal === false) {
    throw "Please complete all fields.";
    }
    errMsgDiv.style.display = "none";
    errMsgDiv.innerHTML = "";
  }
 catch(msg) {
 errMsgDiv.style.display = "block";
 errMsgDiv.innerHTML = msg;
 formValidity = false;
 }
 try { 
  if (email.value === ''){
    email.style.background = "rgb(255,233,233)";
    email.style.borderColor = "red";
    chkBlnkVal = false;
    email.focus();
  } else {
    email.style.background = "white";
    email.style.borderColor = "white";
  }
 if (chkBlnkVal === false) {
    throw "Please complete all fields.";
    }
    errMsgDiv.style.display = "none";
    errMsgDiv.innerHTML = "";
  }
 catch(msg) {
 errMsgDiv.style.display = "block";
 errMsgDiv.innerHTML = msg;
 formValidity = false;
 }
 console.log("Leaving checkBlank " + "form validity: " + formValidity +" check blank validity: " + chkBlnkVal +" First Name: " + fName.value);
}

function validateNumbers() {
  var numbersValidity = true;
  var age = document.forms[0].age;
  try {
  if (isNaN(age.value) || (age.value
      === "") || (age.value <= -1) || (age.value >= 81)) {
    age.style.background = "rgb(255,233,233)";
    age.style.borderColor = "red";
    numbersValidity = false;
    age.focus();
  } else {
    age.style.background = "white";
    age.style.borderColor = "white";
  }
  if (numbersValidity === false) {
    throw "Please enter valid number for age.";
    }
    errMsgDiv.style.display = "none";
    errMsgDiv.innerHTML = "";
  }
 catch(msg) {
 errMsgDiv.style.display = "block";
 errMsgDiv.innerHTML = msg;
 formValidity = false;
 }
 console.log("Leaving validateNumbers " + "form validity: " + formValidity +" numbers validity: " + numbersValidity +" age: " + age.value);
}
function init(){
    createEventListeners();
    createCheck();
}

if (window.addEventListener) {
   console.log("> Adding TC39 Event Listener...");
   window.addEventListener ("load", init, false);
}
else if (window.attachEvent) {
   console.log("> Adding MS Event Listener...");
   window.attachEvent ("onload", init);
}

“严格使用”；
var deptList=[“SDEV”、“DBMS”、“INFM”、“CSCI”、“SVAD”、“NETI”、“ITSP”、“CSIA”]；
var list=document.getElementById（“progList”）；
var-formValidity=true；
var errMsgDiv=document.getElementById（“errorMsg”）；
函数createCheck（）{
deptList.sort（）；
对于（var i=0；i所以，问题是，您正在检查每个值，但从未中断。最简单的方法是在每个catch块的末尾抛出一个返回值-这样，如果出现错误，函数将停止执行，而不是继续进行下一次检查

catch(msg) {
  errMsgDiv.style.display = "block";
  errMsgDiv.innerHTML = msg;
  formValidity = false;
  return;
}

为什么是novalidate？您可以使用该属性，只需删除js Validation，对于年龄输入，您可以像这样设置
min
和
max
属性
嘿。我认为，如果您能尝试将其分成几个单独的问题，那将是非常好的。问题非常广泛，堆栈溢出是有意的对于更具体的问题。例如，一个问题可能是：如何在每个字段输入后进行验证？另一个问题是：如何确保将输入验证为范围（0-80）内的数字。我确信这些问题中的许多都在这里得到了回答，如果有些问题没有得到回答，请提问；）即使您使用novalidate，您仍然可以使用验证api
input.validity.valid
欢迎使用Stack Overflow，问题非常广泛，请查看：并相应调整您的帖子。这就是答案！谢谢Sergio。我发誓我试过了，但我认为可能出现了错误，并认为这是由于返回造成的；
catch(msg) {
  errMsgDiv.style.display = "block";
  errMsgDiv.innerHTML = msg;
  formValidity = false;
  return;
}