注册表单验证代码问题排查：错误信息异常、成功状态不生效

你的代码存在4处明确的语法/逻辑错误，逐一修复即可解决所有异常：

• 修复setErrorFor函数中span元素获取逻辑
  你当前用了全局document.querySelector("span")，只会匹配页面中第一个span元素，所以所有错误提示都写到第一个输入框下。改为从当前输入框所属的formControl节点下查找span：

  function setErrorFor(input, message){
      const formControl = input.parentElement;
      // 修改这里，从当前表单控件组内找span，不是全局找
      const span = formControl.querySelector("span");
      span.innerText = message;
      formControl.className = 'form-control error';
  }
  

• 修复setSuccessFor函数的属性拼写错误
  classname是错误写法，DOM元素的类名属性是驼峰命名className：

  function setSuccessFor(input){
      const formControl = input.parentElement;
      // 把classname改为className
      formControl.className = 'form-control success';
  }
  

• 修复手机号验证通过后的赋值逻辑错误
  手机号验证通过后你错误的给fullname设置了成功状态，改为给当前phonenumber设置：

  if(phonenumberValue === ""){
      setErrorFor(phonenumber, 'Phone number cannot be blank');
  }else if(!isPhoneNumber(phonenumberValue)){
      setErrorFor(phonenumber, "Phone number is not valid");
  }else{
      // 这里之前写的是fullname，改为phonenumber
      setSuccessFor(phonenumber);
  }
  

• 修复密码长度判断逻辑错误
  passwordValue是字符串类型，直接和数字比较不会得到预期结果，需要取字符串长度判断：

  if(passwordValue === ""){
      setErrorFor(password, 'Password cannot be blank');
  // 修改这里，加.length获取密码长度
  }else if(passwordValue.length < 8){
      setErrorFor(password, "Minimum password length is 8 characters");
  }else{
      setSuccessFor(password);
  }
  

内容的提问来源于stack exchange，提问作者Shane