Javascript/HTML表单验证问题

我目前对我的表单如何验证存在问题。为了简单起见，我现在只验证名字和姓氏

假设一个人没有输入他们的名字或姓氏。它只显示错误消息“（请输入您的名字）”而不显示“（请输入您的姓氏）”

假设一个人输入自己的名字而不是姓氏，然后显示“（请输入您的姓氏）”

有没有办法解决这个问题，例如，如果有人没有输入他们的名字和姓氏，它会显示两条错误消息

JavaScript:

function validateAll() {
    //Inputs
    var firstName = document.getElementById("firstName").value; 
    var lastName = document.getElementById("lastName").value;   

    //Errors
    var firstNameError = document.getElementById("firstNameError");
    var lastNameError = document.getElementById("lastNameError");

    if (
        validateFirstName(firstName, firstNameError) == true &&
        validateLastName(lastName, lastNameError) == true
        ) {
        return true;     
    } else return false;
}   

function validateFirstName(firstName, firstNameError) {
    if (firstName == "") {
        firstNameError.firstChild.nodeValue = "(Please Enter Your First Name)";
        return false;
    } else {
        firstNameError.firstChild.nodeValue = "";
        return true;
    }
}

function validateLastName(lastName, lastNameError) {
    if (lastName == "") {
        lastNameError.firstChild.nodeValue = "(Please Enter Your Last Name)";
        return false;
    } else {
        lastNameError.firstChild.nodeValue = "";
        return true;
    }    
}

HTML:

名字
*
第二个名字
*
电话号码
*
电子邮件
*
确认电子邮件
*
密码
*
登记

所以您使用的是逻辑AND语句，我的反对票是因为我使用的逻辑OR语句更接近，但不完全正确。这是小型讲座

逻辑AND表达式将执行语句的每一部分，直到遇到第一个false，此时整个表达式将变为false，AND表达式将退出。另一方面，逻辑OR语句将执行语句的每一部分，不管是真是假，然后计算表达式的最终布尔值。因此，使用AND时，表达式将以第一个false停止。有两种处理方法

首先，您可以按照建议执行，将每个验证函数求值为一个变量，然后在and语句中使用所有这些函数。这样做可以确保所有表单字段都已验证。然后AND语句可以简单地确定表单是否有效

var firstNameIsValid = validateFirstName(firstName, firstNameError),
    lastNameIsValid  = validateLastName(lastName, lastNameError);

if (firstNameIsValid && lastNameIsValid){
  // Form is valid, proceed with processing
} else {
  // Form is invalid because SOMETHING above was false. Do some other
  //  error handling.
}

第二，我所使用的方法（但与正确的回答不太接近）将其组合成一个OR语句，但我们不是检查字段是否有效，而是检查它们是否无效

if (!validateFirstName(firstName, firstNameError) || !validateLastName(lastName, lastNameError) ) {
  // The above query is checking whether validate<fieldName> returned FALSE 
  //   for every field. If any validate returns false, the entire form is
  //   invalid. Do any invalid form processing.
} else {
  // The ELSE of the above if would only pass if every form field checked has
  //   in fact, passed the validity check. At this point, the form itself is
  //   valid and any processing for valid forms can happen.
}

如果（！validateFirstName（firstName，firstNameError）| |！validateLastName（lastName，lastNameError））{
//上面的查询正在检查validate是否返回FALSE
//对于每个字段。如果任何validate返回false，则整个表单为
//无效。请执行任何无效的表单处理。
}否则{
//仅当选中了每个表单字段时，上述if的ELSE才会通过
//事实上，通过了有效性检查。此时，表单本身
//有效，并且可以对有效表单进行任何处理。
}

现在，说了这么多，你正在为自己制造一个丑陋的沼泽。此时，您只需要一个有效的名字和姓氏。但是如果它们包含一个数字呢？如果你想要一个只有数字的字段呢？如果您希望字段既是必填字段又是电话号码，该怎么办？您必须为每个案例重新创建轮子。相反，创建一个可以通用的函数来处理每种情况如何？如果遇到没有处理程序的情况，可以创建该情况并将其添加到通用函数中，使其可供以后的任何其他表单元素使用

var formEl=document.getElementById（“我的自定义表单”）；
formEl.querySelector（“按钮”）.addEventListener（“单击”），函数（evt）{
evt.stopPropagation（）；
evt.preventDefault（）；
var isFormValid=[]；
var validateThese=[{
fieldEl:formEl.querySelector（“[name=firstName]”），
errorEl:formEl.querySelector（#firstNameError”），
检查：[“必需”、“alpha”]
}, {
fieldEl:formEl.querySelector（“[name=lastName]”），
errorEl:formEl.querySelector（#lastNameError”），
检查：[“必需”、“alpha”]
}, {
fieldEl:formEl.querySelector（“[name=phoneNumber]”），
errorEl:formEl.querySelector（“#phoneNumberError”），
检查：[“数字”]
}];
for（var i=0，len=validateThese.length；i字段是必需的！”；
}
打破
案例“alpha”：
isValid[i]=isAlpha（选中this.fieldEl）；
如果（！isValid[i]）{
选中this.errorEl.innerHTML+=“
字段只能是字母字符！”；
}
打破
大小写“数字”：
isValid[i]=isNumeric（选中this.fieldEl）；
如果（！isValid[i]）{
选中this.errorEl.innerHTML+=“
字段只能是数字字符！”；
}
打破
大小写“字母数字”：
isValid[i]=isAlphanumeric（选中this.fieldEl）；
如果（！isValid[i]）{
选中this.errorEl.innerHTML+=“
字段只能是字母数字！”；
}
打破
}//结束开关
}//结束
if（isValid.indexOf（false）=-1）{
//isValid不包含假值，此字段正常。
返回true；
}否则{
//isValid至少包含一个false。至少一个测试失败。
//场地不好。
返回fals
if (!validateFirstName(firstName, firstNameError) || !validateLastName(lastName, lastNameError) ) {
  // The above query is checking whether validate<fieldName> returned FALSE 
  //   for every field. If any validate returns false, the entire form is
  //   invalid. Do any invalid form processing.
} else {
  // The ELSE of the above if would only pass if every form field checked has
  //   in fact, passed the validity check. At this point, the form itself is
  //   valid and any processing for valid forms can happen.
}

validateFirstName(firstName, firstNameError) == true &&
validateLastName(lastName, lastNameError) == true