在JS验证上更改标签颜色不起作用，"bypasses"验证

Question

我正在做一个小练习，尝试使用JS编写一个简单的表单验证。

当验证失败时，我试图将输入边界和标签都设为红色。不过，我对标签变红有点问题。

如果firstName验证失败，则一切正常；标签变为红色，输入边框也变为红色。但是，当任何其他输入的验证失败时，不会显示任何警报，不会显示红色边框/标签，页面会重新加载，就像提交表单并绕过验证一样。

奇怪的是，如果我删除if中的document.getElementById行，验证就可以正常工作。我想问题是存在的，但为什么它在名字标签上工作得很好呢？

这是代码：

HTML表单：

<div id="jsForm" class="jsForm">
<div class="formContainer">
<form name="myForm" action="" onsubmit="return(validate());" method="">
<label for="firstname" id="firstNameLabel">First name<span class="boldStar">*</span></label><br>
<input type="text" id="firstname" name="firstname"><br>
<label for="lastname" id="lastNameLabel">Last name<span class="boldStar">*</span></label><br>
<input type="text" id="lastname" name="lastname"><br>
<label for="title" id="titleLabel">Title<span class="boldStar">*</span></label><br>
<input type="text" id="title" name="title"><br>
<label for="emailAddress" id="emailAddressLabel">Email Address<span class="boldStar">*</span></label><br>
<input type="text" id="emailAddress" name="emailAddress"><br>
<label for="phone" id="phoneLabel">Phone<span class="boldStar">*</span></label><br>
<input type="text" id="phone" name="phone"><br>
<label for="isClient" id="isClientLabel">Already a Client<span class="boldStar">*</span></label><br>
<select name="isClient" id="isClient">
<option value disabled selected>--Please Select--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select><br><br> 
<input type="submit" value="Contact Us">                      
</form>         
</div>       
</div>

JS验证：

function validate() {
var emailRegex = /^([a-zA-Z0-9]+[a-zA-Z0-9._%-+]*@(?:[a-zA-Z0-9-]{2,}.)+[a-zA-Z]{2,})$/
var phoneRegex = /(+|00)(297|93|244|1264|358|355|376|971|54|374|1684|1268|61|43|994|257|32|229|226|880|359|973|1242|387|590|375|501|1441|591|55|1246|673|975|267|236|1|61|41|56|86|225|237|243|242|682|57|269|238|506|53|5999|61|1345|357|420|49|253|1767|45|1809|1829|1849|213|593|20|291|212|34|372|251|358|679|500|33|298|691|241|44|995|44|233|350|224|590|220|245|240|30|1473|299|502|594|1671|592|852|504|385|509|36|62|44|91|246|353|98|964|354|972|39|1876|44|962|81|76|77|254|996|855|686|1869|82|383|965|856|961|231|218|1758|423|94|266|370|352|371|853|590|212|377|373|261|960|52|692|389|223|356|95|382|976|1670|258|222|1664|596|230|265|60|262|264|687|227|672|234|505|683|31|47|977|674|64|968|92|507|64|51|63|680|675|48|1787|1939|850|351|595|970|689|974|262|40|7|250|966|249|221|65|500|4779|677|232|503|378|252|508|381|211|239|597|421|386|46|268|1721|248|963|1649|235|228|66|992|690|993|670|676|1868|216|90|688|886|255|256|380|598|1|998|3906698|379|1784|58|1284|1340|84|678|681|685|967|27|260|263)(9[976]d|8[987530]d|6[987]d|5[90]d|42d|3[875]d|2[98654321]d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)d{4,20}$/

if( document.myForm.firstname.value == "" ) {   
document.myForm.firstname.style.border = '1px solid';
document.myForm.firstname.style.borderColor = '#ff0000';
document.getElementById("firstNameLabel").style.color = "#ff0000";
alert( "Please provide your first name!" );
return false;
}
if( document.myForm.lastname.value == "" ) {
document.myForm.lastname.style.border = '1px solid';
document.myForm.lastname.style.borderColor = '#ff0000';
document.getElementById("lastNameLabel").style.color = "#ff0000";
alert( "Please provide your last name!" );
return false;
}
if( document.myForm.title.value == "" ) {
document.myForm.title.style.border = '1px solid';
document.myForm.title.style.borderColor = '#ff0000';
document.getElementById("titleLabel").style.color = "#ff0000";
alert( "Please provide your title!" );
return false;
}
if(document.myForm.emailAddress.value == "" || !emailRegex.test(document.myForm.emailAddress.value)) {
document.myForm.emailAddress.style.border = '1px solid';
document.myForm.emailAddress.style.borderColor = '#ff0000';
document.getElementById("emailAddressLabel").style.color = "#ff0000";
alert( "Please provide a valid email address!" );
return false;
}
if( document.myForm.phone.value == "" || !phoneRegex.test(document.myForm.phone.value)) {
document.myForm.phone.style.border = '1px solid';
document.myForm.phone.style.borderColor = '#ff0000';
document.getElementById("phoneLabel").style.color = "#ff0000";
alert( "Please provide a valid phone number! (make sure you type your country code, e.g. +39)" );
return false;
}
if( document.myForm.isClient.value == "" ) {
document.myForm.isClient.style.border = '1px solid';
document.myForm.isClient.style.borderColor = '#ff0000';
document.getElementById("isClientLabel").style.color = "#ff0000";
alert( "Please specify if you're already a client!" );
return false;
}

return( true );
}

如有任何帮助，将不胜感激

Answer 1

在当前情况下，表单总是在单击提交按钮时提交的。我开发了一种方法，如下所示，以防止发送表格，并确保进行所有控制。如果方法调用如下，则不执行所有检查：

if(isValidFirstName() && isValidLastName() && ...){}

这是因为&&运算符从左到右工作，并且在第一次看到false值时不会调用其他方法。在下面的解决方案中，您将看到所有值都已正确提交。因为当单击提交按钮时，以前不正确的红色标记条目不会变黑。

此外，您在解决方案中开发的原因始终是validate()的原因，您的方法始终是返回true值。

var emailRegex = /^([a-zA-Z0-9]+[a-zA-Z0-9._%-+]*@(?:[a-zA-Z0-9-]{2,}.)+[a-zA-Z]{2,})$/
var phoneRegex = /(+|00)(297|93|244|1264|358|355|376|971|54|374|1684|1268|61|43|994|257|32|229|226|880|359|973|1242|387|590|375|501|1441|591|55|1246|673|975|267|236|1|61|41|56|86|225|237|243|242|682|57|269|238|506|53|5999|61|1345|357|420|49|253|1767|45|1809|1829|1849|213|593|20|291|212|34|372|251|358|679|500|33|298|691|241|44|995|44|233|350|224|590|220|245|240|30|1473|299|502|594|1671|592|852|504|385|509|36|62|44|91|246|353|98|964|354|972|39|1876|44|962|81|76|77|254|996|855|686|1869|82|383|965|856|961|231|218|1758|423|94|266|370|352|371|853|590|212|377|373|261|960|52|692|389|223|356|95|382|976|1670|258|222|1664|596|230|265|60|262|264|687|227|672|234|505|683|31|47|977|674|64|968|92|507|64|51|63|680|675|48|1787|1939|850|351|595|970|689|974|262|40|7|250|966|249|221|65|500|4779|677|232|503|378|252|508|381|211|239|597|421|386|46|268|1721|248|963|1649|235|228|66|992|690|993|670|676|1868|216|90|688|886|255|256|380|598|1|998|3906698|379|1784|58|1284|1340|84|678|681|685|967|27|260|263)(9[976]d|8[987530]d|6[987]d|5[90]d|42d|3[875]d|2[98654321]d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)d{4,20}$/
function isValidFirstName(){
if( document.myForm.firstname.value == 0){   
document.myForm.firstname.style.border = '1px solid';
document.myForm.firstname.style.borderColor = '#ff0000';
document.getElementById("firstNameLabel").style.color = "#ff0000";
alert( "Please provide your first name!" );
return false;
}
else{
document.myForm.firstname.style.borderColor = "black";
document.getElementById("firstNameLabel").style.color = "black";
return true;
}
}
function isValidLastName(){
if( document.myForm.lastname.value == "" ) {
document.myForm.lastname.style.border = '1px solid';
document.myForm.lastname.style.borderColor = '#ff0000';
document.getElementById("lastNameLabel").style.color = "#ff0000";
alert( "Please provide your last name!" );
return false;
}
else{
document.myForm.lastname.style.borderColor = 'black';
document.getElementById("lastNameLabel").style.color = "black";
return true;
}
}
function isValidTitle(){
if( document.myForm.title.value == "" ) {
document.myForm.title.style.border = '1px solid';
document.myForm.title.style.borderColor = '#ff0000';
document.getElementById("titleLabel").style.color = "#ff0000";
alert( "Please provide your title!" );
return false;
}
else{
document.myForm.title.style.borderColor = 'black';
document.getElementById("titleLabel").style.color = "black";
return true;
}
}
function isValidEMail(){
if(document.myForm.emailAddress.value == "" || !emailRegex.test(document.myForm.emailAddress.value)) {
document.myForm.emailAddress.style.border = '1px solid';
document.myForm.emailAddress.style.borderColor = '#ff0000';
document.getElementById("emailAddressLabel").style.color = "#ff0000";
alert( "Please provide a valid email address!" );
return false;
}
else {
document.myForm.emailAddress.style.borderColor = 'black';
document.getElementById("emailAddressLabel").style.color = "black";
return true;
}
}
function isValidPhone(){
if( document.myForm.phone.value == "" || !phoneRegex.test(document.myForm.phone.value)) {
document.myForm.phone.style.border = '1px solid';
document.myForm.phone.style.borderColor = '#ff0000';
document.getElementById("phoneLabel").style.color = "#ff0000";
alert( "Please provide a valid phone number! (make sure you type your country code, e.g. +39)" );
return false;
}
else {
document.myForm.phone.style.borderColor = 'black';
document.getElementById("phoneLabel").style.color = "black";
return true;
}
}
function isValidClient(){
if( document.myForm.isClient.value == "" ) {
document.myForm.isClient.style.border = '1px solid';
document.myForm.isClient.style.borderColor = '#ff0000';
document.getElementById("isClientLabel").style.color = "#ff0000";
alert( "Please specify if you're already a client!" );
return false;
}
else {
document.myForm.isClient.style.borderColor = 'black';
document.getElementById("isClientLabel").style.color = "black";
return true;
}
}
document.getElementById('clear').addEventListener('click', function(){
console.clear();
});
document.getElementById('firstname').addEventListener('input', isValidFirstName);
document.getElementById('lastname').addEventListener('input', isValidLastName);
document.getElementById('title').addEventListener('input', isValidTitle);
document.getElementById('emailAddress').addEventListener('input', isValidEMail);
document.getElementById('phoneLabel').addEventListener('input', isValidPhone);
document.getElementById('isClientLabel').addEventListener('onchange', isValidClient);
function validate() {
let result = isValidFirstName();
result &= isValidLastName();
result &= isValidTitle();
result &= isValidEMail();
result &= isValidPhone();
result &= isValidClient();

if(result == 0){
console.log(`Result: Unsuccessful`);
return false;
}

console.log(`Result: Successfull`);
return true;
}

<button id="clear">Console Clear</button>
<div id="jsForm" class="jsForm">
<div class="formContainer">
<form name="myForm" action="" onsubmit="return(validate());" method="">
<label for="firstname" id="firstNameLabel">First name<span class="boldStar">*</span></label><br>
<input type="text" id="firstname" name="firstname"><br>
<label for="lastname" id="lastNameLabel">Last name<span class="boldStar">*</span></label><br>
<input type="text" id="lastname" name="lastname"><br>
<label for="title" id="titleLabel">Title<span class="boldStar">*</span></label><br>
<input type="text" id="title" name="title"><br>
<label for="emailAddress" id="emailAddressLabel">Email Address<span class="boldStar">*</span></label><br>
<input type="text" id="emailAddress" name="emailAddress"><br>
<label for="phone" id="phoneLabel">Phone<span class="boldStar">*</span></label><br>
<input type="text" id="phone" name="phone"><br>
<label for="isClient" id="isClientLabel">Already a Client<span class="boldStar">*</span></label><br>
<select name="isClient" id="isClient">
<option value disabled selected>--Please Select--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select><br><br> 
<input type="submit" value="Contact Us">                      
</form>         
</div>       
</div>