双重验证-但只有在第一次验证完成后，才能在Javascript中显示第二次验证。

Question

目前正在尝试添加一些验证，但是只在第一次验证完成后运行第二次验证，并且没有错误。

只想听听关于我数据验证中的当前逻辑的评论。

• 对空字段的第一次验证检查
• 第二种验证(仅在第一次验证之后才起作用)检查值是否等于10。如果是，则使用引导消息提示提交当前数据或返回。

    Form:
    

        
        
            
                Please complete all required fields
            
        

            Select Room
            
                 
                    {{!-- Drying Room 1 --}}
                    Drying Room 1
                    {{!-- Drying Room 2 --}}
                    Drying Room 2
                    {{!-- Dry Store--}}
                    Dry Store
                
            
            
            

                {{!-- Drying Room 1 --}}
                
                    {{!-- Title --}}
                    Drying Room 1

                    {{!-- All temperatures --}}
                    
                     
                        Temperature °C - Actual
                        

                      
                        Temperature °C - Minimum
                        

                    
                        Temperature °C - Maximum
                        
                    
                    

                    

                    {{!-- All humidity --}}
                    
                         
                        Relative Humidity - Actual
                        
                        
                        Relative Humidity - Minimum
                        
                         
                        Relative Humidity - Maximum
                        
                    
                


                {{!-- Drying Room 2 --}}
                
                    {{!-- Title --}}
                    Drying Room 2

                    {{!-- All temperatures --}}
                    
                       
                        Temperature °C - Actual
                        

                       
                        Temperature °C - Minimum
                        

                       
                        Temperature °C - Maximum
                        
                    
                    

                    

                    {{!-- All humidity --}}
                    
                         
                        Relative Humidity - Actual
                        
                        
                        Relative Humidity - Minimum
                        
                         
                        Relative Humidity - Maximum
                        
                    
                

                {{!-- Dry Store --}}
                
                    {{!-- Title --}}
                    Dry Store

                    {{!-- All temperatures --}}
                    
                        
                        Temperature °C - Actual
                        

                        
                        Temperature °C - Minimum
                        

                        
                        Temperature °C - Maximum
                        
                    
                    

                    

                    {{!-- All humidity --}}
                    
                         
                        Relative Humidity - Actual
                        
                         
                        Relative Humidity - Minimum
                        
                         
                        Relative Humidity - Maximum
                        
                    
                

                Submit
            
            
        
    




{{!-- Errors --}}


  
    
      
        Targets not met
        
          ×
        
      
      
        Some temperatures or humidity values have not met their targets
        - Re-check or continue submitting current data.
      
      
        Submit
        Close
      
    
  




// Store DOM Strings
var DOMStrings = {
    room_options: '#RoomMenu'
};

// On selected option, show specific div element
showActiveElement = () => {
    

    for(const option of document.querySelector(DOMStrings.room_options).options) {
        document.querySelector(`#${option.value}`).style.display = "none";
    }

    if(document.querySelector(DOMStrings.room_options).value === 'dry-1') {
        document.querySelector('#dry-1').style.display = "block";
    } else if (document.querySelector(DOMStrings.room_options).value === 'dry-2') {
        document.querySelector('#dry-2').style.display = "block";
    } else if (document.querySelector(DOMStrings.room_options).value === 'dry-3') {
        document.querySelector('#dry-3').style.display = "block";
    }

}



// Show selected div element from options
document.querySelector(DOMStrings.room_options).addEventListener('change', () => {
    showActiveElement();
});



// Validate data
document.getElementById("form").addEventListener("submit", (e) => {
        
    const inputs = document.querySelectorAll('#form input');
    
    let bool = true;
    
    // Event listener activated after user submits the form
    inputs.forEach((item) => {
        if(item.value === "") {
            bool = false;
            e.preventDefault();
            item.style.borderColor = 'red';
            item.placeholder = "Required";
            document.getElementById('errors').style.visibility = "visible";
            
        } else {
            item.style.borderColor = '#fff';
        }

        // On input - add event listener
        item.addEventListener("input", (event) => {
            if(item.value === "") {
                e.preventDefault();
                item.style.borderColor = 'red';
                item.placeholder = "Required";
            } else {
                item.style.borderColor = '#fff';
            }
        });
    });

    if(bool == true) {
        for (var i = 0; i < inputs.length; i++) {
            if(inputs[i].name.startsWith("actual-temp") || inputs[i].name.startsWith("min-temp") || inputs[i].name.startsWith("max-temp")) {
                validateActualTemp(parseFloat(inputs[i].value), inputs[i], e);
            }

        }
    }
    
});

    



function validateActualTemp(value, item, e) {
    if(value === '10') {
        e.preventDefault();
        item.style.backgroundColor = 'red';
        $("#myModal").modal();
    }
}

document.getElementById('submit-email').addEventListener('click', () => {
    const form = document.getElementById('form');
    form.submit();
});


// On load
window.onload = () => {
    showActiveElement();
}

Answer 1

我认为，在表单submit事件侦听器中，您希望检查每个输入的值是否与空字符串不同。

可以检查数组的每个项是否满足返回函数表达式，例如：

["a", "b", "c"].every(str => str !== "") // true
["", "b", "c"].every(str => str !== "") // false

此外，还可以检查数组的一些项是否满足函数表达式：

["", "b", "c"].some(str => str === "") // true
["a", "b", "c"].some(str => str === "") // false

但是inputs是一个NodeList，没有every和some方法，它们是Array方法。另一方面，NodeList是一个index可以访问并具有length属性的对象，也就是说，它是一个array-like对象。

当您遇到这样的情况时，可以使用Function.prototype.call重用本机实现的函数，如下所示：

const inputs = document.querySelectorAll('#form input');
const isEmpty = [].some.call(inputs, e => e.value === "");

但是，在本例中，Array.prototype.empty返回一个布尔值，然后需要空输入样式。

您可以使用Array.prototype.filter，它返回包含满足返回函数表达式的每个元素的数组，例如：

[1, 2, 3, 4, 5].filter(n => n > 3) // [ 4, 5 ]

在您的情况下，您可以检查过滤后的输入长度：

const inputs = document.querySelectorAll('#form input');
const empty = [].filter.call(inputs, e => e.value === "");

if(empty.length === 0) {
  // there's no empty inputs, continue with the validation
} else {
  // here you can style the empty inputs
}

结论:您可以重用本机实现的Array方法，以解决array-like对象中的问题。

有用链接