2017-04-03 58 views
0

我目前的问题是我的表单如何验证。为了简单起见,我现在只在这里验证名字和姓氏。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:

<form name="registrationForm" id="registrationForm" onSubmit="return validateAll()" action="AddUserDetails"> 
    <div class="form-group"> 
     <label for="firstName">First Name</label> 
     <span id="firstNameError" class="error">*</span> 
     <input type="text" class="form-control" id="firstName" name="firstName"> 
    </div> 
    <div class="form-group"> 
     <label for="lastName">Second Name</label> 
     <span id="lastNameError" class="error">*</span> 
     <input type="text" class="form-control" id="lastName" name="lastName"> 
    </div> 
    <div class="form-group"> 
     <label for="phoneNumber">Phone Number</label> 
     <span id="phoneNumberError" class="error">*</span> 
     <input type="text" class="form-control" id="phoneNumber" name="phoneNumber"> 
    </div> 
    <div class="form-group"> 
     <label for="eMail">E-Mail</label> 
     <span id="eMailError" class="error">*</span> 
     <input type="text" class="form-control" id="eMail" name="eMail"> 
    </div> 
    <div class="form-group"> 
     <label for="eMailConfirmation">Confirm E-Mail</label> 
     <span id="eMailConfirmationError" class="error">*</span> 
     <input type="text" class="form-control" id="eMailConfirmation" name="eMailConfirmation"> 
    </div> 
    <div class="form-group"> 
     <label for="password">Password</label> 
     <span id="passwordError" class="error">*</span> 
     <input type="password" class="form-control" id="password" name="password"> 
    </div> 
    <div class="text-center"> 
     <button type="submit" class="btn btn-primary"><i class="fa fa-user-md"></i> Register</button> 
    </div> 
</form> 

回答

1

发生这种情况是因为您的代码正在被评估。

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

它会运行第一个函数,如果第一个名字没有设置,它返回false。 false && (true || false)总是为假,因此它不执行第二个功能。

正如你可以看到当你运行这个片段,只要它碰到一个false它停止执行(3是最后打印的号码)。用或它只执行第一个功能。

function test(bool, num){ 
 
    console.log(num); 
 
    return bool; 
 
} 
 

 
var andResult = test(true, 1) && 
 
        test(true, 2) && 
 
        test(false, 3) && 
 
        test(true,4); 
 
        
 
console.log("&& result", andResult); 
 
        
 
var orResult = test(true, 1) || 
 
        test(true, 2) || 
 
        test(false, 3) || 
 
        test(true,4);     
 

 

 
console.log("|| result", orResult);

你可以运行每个功能和收集值:

var valFirstName = validateFirstName(firstName, firstNameError); 
var valLastName = validateLastName(lastName, lastNameError); 

return valFirstName && valLastName; 
+0

你会建议我把它分成两个if语句,还是应该以完全不同的方式完成整个事情? – Aontaigh

+0

查看上面的修改 –

-1

让你在使用逻辑与声明,我的downvote是因为我使用的是更接近于一个逻辑或声明,但不完全对。这是小型演讲。

逻辑AND表达式将执行语句的每个部分,直到遇到第一个假,此时整个表达式呈现为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. 
} 

其次,这是我在路上(但不太接近正确响应)结合了成单个或声明,但不是检查,如果该字段是有效的,我们要检查他们是无效

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. 
} 

现在,尽管如此,你正在为自己创造一个丑陋的噩梦。在这一点上,你只需要一个有效的名字和姓氏。但是如果它们包含一个数字呢?如果你想要一个只有数字的字段呢?如果你想要一个字段既是必需的又有电话号码怎么办?你将不得不为每一个案例重新创建轮子。相反,如何创建一个可以推广到每个案例的函数呢?如果遇到没有处理程序的情况,可以创建该程序并将其添加到广义函数中,以便稍后可用于其他任何表单元素。

var formEl = document.getElementById("my-custom-form"); 
 
formEl.querySelector("button").addEventListener("click", function(evt) { 
 
    evt.stopPropagation(); 
 
    evt.preventDefault(); 
 

 
    var isFormValid = []; 
 
    var validateThese = [{ 
 
     fieldEl: formEl.querySelector("[name=firstName]"), 
 
     errorEl: formEl.querySelector("#firstNameError"), 
 
     checks: ["required", "alpha"] 
 
    }, { 
 
     fieldEl: formEl.querySelector("[name=lastName]"), 
 
     errorEl: formEl.querySelector("#lastNameError"), 
 
     checks: ["required", "alpha"] 
 
    }, { 
 
     fieldEl: formEl.querySelector("[name=phoneNumber]"), 
 
     errorEl: formEl.querySelector("#phoneNumberError"), 
 
     checks: ["numeric"] 
 
    }]; 
 

 
    for (var i = 0, len = validateThese.length; i < len; i++) { 
 
     isFormValid[i] = validateField(validateThese[i]); 
 
    } 
 

 
    if (isFormValid.indexOf(false) != -1) { 
 
     // If there is ANY boolean false here, then one of the fields returned 
 
     // false, so the whole form is bad. 
 
     console.log("form is bad!"); 
 
    } else { 
 
     // The entire isValid array is good, the form is good. 
 
     console.log("form is good!"); 
 
    } 
 

 
    function validateField(checkThis) { 
 
     var isValid = []; 
 
     checkThis.errorEl.innerText = ""; 
 

 
     for (var i = 0, len = checkThis.checks.length; i < len; i++) { 
 
     switch (checkThis.checks[i]) { 
 
      case "required": 
 
      isValid[i] = isRequired(checkThis.fieldEl); 
 
      if (!isValid[i]) { 
 
       checkThis.errorEl.innerHTML += "<br>Field is required!"; 
 
      } 
 
      break; 
 
      case "alpha": 
 
      isValid[i] = isAlpha(checkThis.fieldEl); 
 
      if (!isValid[i]) { 
 
       checkThis.errorEl.innerHTML += "<br>Field must be alphabetic characters only!"; 
 
      } 
 
      break; 
 
      case "numeric": 
 
      isValid[i] = isNumeric(checkThis.fieldEl); 
 
      if (!isValid[i]) { 
 
       checkThis.errorEl.innerHTML += "<br>Field must be numeric characters only!"; 
 
      } 
 
      break; 
 
      case "alphanumeric": 
 
      isValid[i] = isAlphanumeric(checkThis.fieldEl); 
 
      if (!isValid[i]) { 
 
       checkThis.errorEl.innerHTML += "<br>Field must be alphanumeric only!"; 
 
      } 
 
      break; 
 
     } // End switch 
 
     } // End for 
 

 
     if (isValid.indexOf(false) == -1) { 
 
     // isValid contains no false values, this field is ok. 
 
     return true; 
 
     } else { 
 
     // isValid contains at least one false. At least one test failed. 
 
     // field is bad. 
 
     return false; 
 
     } 
 
    } // End validateField() 
 

 
    /**** 
 
     * Below are the actual validation functions. Given a field, they'll 
 
     * check that it conforms to a few types. At this pass, it'll look for 
 
     * required, alphabetic, numeric or alphanumeric. 
 
     * 
 
     ****/ 
 

 
    function isRequired(fieldEl) { 
 
     if (fieldEl.value.length > 0) { 
 
     return true; 
 
     } else { 
 
     return false; 
 
     } 
 
    } // end function isRequired(); 
 

 
    function isAlpha(fieldEl) { 
 
     if (fieldEl.value.length > 0) { 
 
     if (/^[a-zA-Z]+$/.test(fieldEl.value)) { 
 
      return true; 
 
     } else { 
 
      return false; 
 
     } 
 
     } else { 
 
     return true; 
 
     } 
 
    } // end function isAlpha(); 
 

 
    function isNumeric(fieldEl) { 
 
     if (fieldEl.value.length > 0) { 
 
     if (/^\d+$/.test(fieldEl.value)) { 
 
      return true; 
 
     } else { 
 
      return false; 
 
     } 
 
     } else { 
 
     return true; 
 
     } 
 
    } //end function isNumeric(); 
 

 
    function isAlphanumeric(fieldEl) { 
 
     if (fieldEl.value.length > 0) { 
 
     if (/^[a-zA-Z0-9]+$/.test(fieldEl.value)) { 
 
      return true; 
 
     } else { 
 
      return false; 
 
     } 
 
     } else { 
 
     return true; 
 
     } 
 
    } // end function isAlphaumeric(); 
 

 
    }) // end button click event listener
<form id="my-custom-form" name="registrationForm"> 
 
    <div class="form-group"> 
 
    <label for="firstName">First Name</label> 
 
    <span id="firstNameError" class="error">*</span> 
 
    <input type="text" class="form-control" id="firstName" name="firstName" placeholder="required"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="lastName">Second Name</label> 
 
    <span id="lastNameError" class="error">*</span> 
 
    <input type="text" class="form-control" id="lastName" name="lastName" placeholder="required"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="phoneNumber">Phone Number</label> 
 
    <span id="phoneNumberError" class="error"></span> 
 
    <input type="text" class="form-control" id="phoneNumber" name="phoneNumber"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="eMail">E-Mail</label> 
 
    <span id="eMailError" class="error"></span> 
 
    <input type="text" class="form-control" id="eMail" name="eMail"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="eMailConfirmation">Confirm E-Mail</label> 
 
    <span id="eMailConfirmationError" class="error"></span> 
 
    <input type="text" class="form-control" id="eMailConfirmation" name="eMailConfirmation"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="password">Password</label> 
 
    <span id="passwordError" class="error"></span> 
 
    <input type="password" class="form-control" id="password" name="password"> 
 
    </div> 
 
    <div class="text-center"> 
 
    <button class="btn btn-primary"><i class="fa fa-user-md"></i> Register</button> 
 
    </div> 
 
</form>

上面的例子将遍历对象的数组,每个对象是一个字段EL,误差e1和一组测试中运行。 “必需”测试检查元素的值是否大于零,并且字母/数字/字母数字测试返回true,表示无值或与其正则表达式匹配的值。后三者必须返回真正的价值。

+0

这也行不通。只要它看到第一个真实的就会停止执行。真实|| (true || false)'永远是真的。 –

+0

你是对的。每次都需要检查,如果ANY情况为假,则将boolean设置为false。我编辑了代码以实现它。 – Snowmonkey

+0

@Aontaigh,看看最新的编辑 - 它包含一个更强大的形式检查系统,可以很容易地扩展以适应任何形式。 – Snowmonkey

0

的问题是用JavaScript评估if语句的方式。因为您使用的是第一个条件失败的情况,所以即使尝试执行第二个条件也没有问题,因为无论循环的结果如何((false false & true)== false)。 在你的validateLastName函数中尝试控制台日志记录的一些东西,你会看到我在说什么;)

我找不到任何有关所有爵士乐的更多信息,但我认为C++编译器可以做同样的事情。