Javascript验证代码没有被执行，在函数结束时编写

Question

我有一个简单的表单，包含姓名、城市、州、电话号码等字段。我调用一个javascript表单验证函数提交按钮点击。验证函数的行为很奇怪。在函数结束时编写的代码没有被执行，表单正在提交。然而，当我把这些代码放在函数的开头时，这些验证就会被执行。

<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
<button type="submit" id="submitBtn" name="submitBtn" class="btn btn-danger" onclick="return validate_input();">Add Record</button>
<button type="button" class="btn btn-danger" name="backtoBrowser"  onClick="backToPav();">&larr;Back</button>                    
</div>
</div>
<script>
function validate_input()
{
if(document.getElementById('inputFName').value == ''){
alert("Please enter First Name");
document.getElementById('inputFName').focus();
return false;
}               
if(document.getElementById('inputLName').value == ''){
alert("Please enter Last Name");
document.getElementById('inputLName').focus();
return false;
} 
if(document.getElementById('ddlBank').value == '0'){
alert("Please select a Bank");
document.getElementById('ddlBank').focus();
return false;
} 
if(document.getElementById('inputIFSC').value == ''){
alert("Please enter IFSC");
document.getElementById('inputIFSC').focus();
return false;
} 
if(document.getElementById('inputCity').value == ''){
alert("Please enter City name");
document.getElementById('inputCity').focus();
return false;
} 
if(document.getElementById('ddlStates').value == '0'){
alert("Please select a State");
document.getElementById('ddlStates').focus();
return false;
} 
if(document.getElementById('inputPhone').value == ''){
alert("Enter Phone No.");
document.getElementById('inputPhone').focus();
return false;
}               
if(document.getElementById('inputPhone').value != ''){
var ipp = document.getElementById('inputPhone').value;
if(ipp.length < 10)
{
alert('Phone number should be of 10 digits');
document.getElementById('inputPhone').focus();
return false;                                               
}
}

if(document.getElementById('inputEmail').value == ''){
alert("Enter Email id");
document.getElementById('inputEmail').focus();
return false;
}               
if(document.getElementById('inputEmail').value != ''){
var emlTxt = document.getElementById('inputEmail').value;
var mailformat = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
if(emlTxt.value.match(mailformat))
{
return true;
}
else
{
alert("You have entered an invalid email address!");
document.getElementById('inputEmail').focus();
return false;
}                                           
}
if(document.getElementById('ddlJob').value == ''){
alert("Please select a Designation");
document.getElementById('ddlJob').focus();
return false;
} 
if(document.getElementById('ddlStat').value == ''){
alert("Please select Staff Status");
document.getElementById('ddlStat').focus();
return false;
} 

}

ddlJob &当把ddlStat放在函数的末尾时，它不会被执行。请告知我的代码有什么问题

Answer 1

您在inputEmail验证中返回true，这会导致验证函数执行结束，并且当电子邮件有效时表单提交不会停止。您应该将return true;放在验证函数的末尾(因此在ddlStat验证之后)。

另外，我强烈建议你阅读一些关于代码格式化的知识，这会使你的代码更容易理解:https://standardjs.com/rules.html