forEach循环内的Javascript字段验证

xdyibdwo  于 2023-02-18  发布在  Java
关注(0)|答案(1)|浏览(94)

我正在建立一个复杂的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不能被打破,但是我不确定如何最好地改进这个验证过程。

j8ag8udp

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
你的代码看起来像这样:

if(document.getElementById('hasChildren').checked && numberKids.value != '') {
    kidDobFields.every(field => {
        if(field.value == '') {
            error.style.display = "block";
            error.innerHTML = 'Please enter all dates of birth.';
            field.classList.add("is-invalid");
            return false;
        } 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 false;
            }
        }
        
        return true;
    });
} else {
    document.getElementById('tab3').style.display = "none";
    document.getElementById('tab4').style.display = "block";
    document.getElementById('formHeading').innerHTML = 'Availability';
    document.getElementById('step3').classList.add("complete");
}

相关问题