我正在建立一个复杂的javascript验证注册表单。如果用户声明他们有孩子,会动态插入文本字段,字段的数量取决于他们说他们有多少孩子。
我使用const kidDobFields = agesRow.querySelectorAll('input[name^="age"]');
获取节点
在我的循环中,我首先尝试确保字段不为空,然后确保输入的日期不超过16年前,如果所有字段都已填充且有效,则表单可以转到下一个问题选项卡。
if(document.getElementById('hasChildren').checked && numberKids.value != '') {
kidDobFields.forEach(field => {
if(field.value == '') {
error.style.display = "block";
error.innerHTML = 'Please enter all dates of birth.';
field.classList.add("is-invalid");
return;
} else {
var today = new Date();
var todayYear = today.getFullYear();
var todayMonth = today.getMonth()+1;
var todayDate = today.getDate();
var dobParts = field.value.split("/");
var dtDOB = new Date(dobParts[1] + "/" + dobParts[0] + "/" + dobParts[2]);
var dobYear = dtDOB.getFullYear();
var dobMonth = dtDOB.getMonth()+1;
var dobDate = dtDOB.getDate();
var age = 'valid';
if(todayYear - dobYear > 16) {
var age = 'invalid';
}
if(todayYear - dobYear == 16) {
if(todayMonth > dobMonth) {
var age = 'invalid';
}
if(todayMonth == dobMonth) {
if(todayDate > dobDate) {
var age = 'invalid';
}
}
}
if(age == 'invalid') {
error.style.display = "block";
error.innerHTML = 'Please don\'t include children who are aged 16 or over.';
field.classList.add("is-invalid");
return;
}
}
});
} else {
document.getElementById('tab3').style.display = "none";
document.getElementById('tab4').style.display = "block";
document.getElementById('formHeading').innerHTML = 'Availability';
document.getElementById('step3').classList.add("complete");
}
使用上面的代码,如果我使用3个日期字段,并将第一个字段留空,则第二个和第三个字段仍然有效。
如果我在第一个变量中放入一个超过16年前的日期,并将其他变量留空,错误将显示Please enter all dates of birth.
,因为循环将继续,而不是在第一个变量之后停止并说日期太旧。
我知道forEach不能被打破,但是我不确定如何最好地改进这个验证过程。
1条答案
按热度按时间j8ag8udp1#
您需要使用every()而不是forEach()https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every?retiredLocale=uk
我在这里找到了答案:https://masteringjs.io/tutorials/fundamentals/foreach-break
你的代码看起来像这样: