JavaScript表单验证异常：仅校验首个输入框，无法全量校验

我仔细看了你的verif()代码，发现两个关键问题导致校验只执行到一半就中断，没法完成所有输入框的全量校验：

1. 函数拼写错误直接中断循环 #

你在判断输入是否为数字时写了!isNan(...)，但JavaScript的内置数字校验函数是**isNaN()**（注意最后一个字母N是大写的）。isNan是未定义的变量，当代码执行到第一个item.b为true的元素（也就是nais输入框）时，会直接抛出ReferenceError，导致forEach循环终止，后面的所有输入框自然不会被校验。

2. 长度阈值引用错误 #

你在判断输入长度是否达标时用了l，但这个变量在回调函数里根本没定义！每个校验规则里的长度阈值存在item.l属性中，必须把所有的l替换成item.l，否则长度判断条件永远不成立，不会触发错误提示。

修复后的完整代码 #

function verif() { 
  var noError = true; 
  var infos = [ 
    {f:'nom',l:2,e:"1",b:false}, 
    {f:'nom_nais',l:2,e:"2",b:false}, 
    {f:'prenom',l:2,e:"3",b:false}, 
    {f:'nais',l:2,e:"4",b:true}, 
    {f:'nais1',l:2,e:"4",b:true}, 
    {f:'nais2',l:2,e:"4",b:true}, 
    {f:'nais3',l:4,e:"4",b:true}, 
    {f:"pays",l:2,e:"6",b:false}, 
    {f:"tel",l:2,e:"7",b:true}, 
    {f:"tel_vac",l:2,e:"9",b:true}, 
    {f:"tel_pers",l:2,e:"11",b:true}, 
    {f:"previent",l:2,e:"10",b:false}, 
    {f:"adre1",l:2,e:"5",b:false}, 
    {f:"adre2",l:2,e:"55",b:false}, 
    {f:"cp",l:2,e:"13",b:false}, 
    {f:"ville",l:2,e:"14",b:false}, 
    {f:"adre1_vac",l:2,e:"8",b:false}, 
    {f:"adre2_vac",l:2,e:"88",b:false}, 
    {f:"cp_vac",l:2,e:"23",b:false}, 
    {f:"ville_vac",l:2,e:"24",b:false} 
  ]; 
  infos.forEach( function(item){ 
    // 提前获取元素，避免重复调用DOM查询
    const inputEl = document.getElementById(item.f);
    const inputValue = inputEl.value;
    const errorEl = document.getElementById("error"+item.e);
    
    if(item.b){ 
      if (inputValue.length < item.l || isNaN(inputValue)) { 
        errorEl.innerHTML="X !"; 
        errorEl.style.color="red"; 
        inputEl.style.backgroundColor="#f4a378"; 
        inputEl.style.border="2px solid red"; 
        noError = false ; 
      }else{ 
        errorEl.innerHTML="OK !"; 
        errorEl.style.color="green"; 
        // 校验通过时恢复输入框默认样式
        inputEl.style.backgroundColor="";
        inputEl.style.border="";
      } 
    } else { 
      if (inputValue.length < item.l) { 
        errorEl.innerHTML="X !"; 
        errorEl.style.color="red"; 
        inputEl.style.backgroundColor="#f4a378"; 
        inputEl.style.border="2px solid red"; 
        noError = false ; 
      }else{ 
        errorEl.innerHTML="OK !"; 
        errorEl.style.color="green"; 
        // 校验通过时恢复输入框默认样式
        inputEl.style.backgroundColor="";
        inputEl.style.border="";
      } 
    } 
  }) ; 
  return noError; 
}

另外我加了两个小优化：

• 提前获取输入框和错误提示元素，减少重复DOM查询，提升代码性能
• 在校验通过时恢复输入框的默认样式，避免之前标记的错误样式残留

替换成这个代码后，应该就能完成所有输入框的全量校验了。

内容的提问来源于stack exchange，提问作者P.FAGNIARD