html的class样式增加或移除（例子模拟input输入框未填写的标红）

今天研究了为input框添加红色提示框的class样式，但是加上去容易，当通过getElementsByClass获取到了所有添加了红框样式的元素，发现不能直接用replace对改class数组进行移除样式操作，研究了才发现，可以把元素存起来然后在进行样式的移除操作，具体还是通过下面的例子来演示吧，先上效果图：

1、只输入了姓名，然后点击校验，发现为空的加入红框样式：

2、把性别和年龄写上后，点击提交，填写了东西的input将会取消掉红框样式（校验也可以取消掉，只是用的方法不一样）

 

 

接下来上代码：

一、html的主体元素：

 <div style = "margin-top:180px; padding-left: 100px; padding-right:100px;">
     姓名：<input id = "testA" class = "inpt "> </input><br>
     性别：<input id = "testB" class = "inpt "> </input><br>
     年龄：<input id = "testC" class = "inpt "> </input><br>
     爱好：<input id = "testD" class = "inpt "> </input><br>
     备注：<input id = "testE" class = "inpt "> </input><br><br>
     <input type ="button" value = "校验" onclick = "checkNotInputField()"/> &nbsp;&nbsp;
     <input type = "button" value=" 提交" onclick = "submitFadeRedInput()"/> 
  </div>

二、校验方法（添加入JS中）：

  function checkNotInputField(){
      addRedInputorNot(document.getElementById("testA"));
      addRedInputorNot(document.getElementById("testB"));
      addRedInputorNot(document.getElementById("testC"));
      addRedInputorNot(document.getElementById("testD"));
      addRedInputorNot(document.getElementById("testE"));
  };
  function addRedInputorNot(check_Var){
           var check_Value = check_Var ? check_Var.value : ""
            console.log("addRedInpuorNot_EK-check_Value:"+check_Value);
            if(check_Value == ""){
                //加红框样式,原来有的要先去除然后在加上，不然会有重复很多个
                check_Var.className = check_Var.className.replace(/x-red-field-invalid/,"");
                check_Var.className += " x-red-field-invalid";
            }else{
                //取消红框样式
                check_Var.className = check_Var.className.replace(/x-red-field-invalid/,"");
            }
  }

三、提交方法（添加入JS中）：标红色的重要部分，很多人的不会先把要去除样式的元素提取出来，而是直接用在for语句中就移除样式：elements_class[j].className = elements_class[j].className.replace(/x-red-field-invalid/,"");

最后会发现虽然能移除，但是移除的居然不全，可能有些input被移除了，有些却没有移除，原因就是这个class数组是动态变化的，可以在for语句里面打印，控制台输出看结果。

  function submitFadeRedInput(){
      var elements_class = document.getElementsByClassName("x-red-field-invalid");
      var varsArray = new Array();
      var j = 0;
            for(var i=0;i<elements_class.length;i++){
                console.log("elements_class ["+i+"] = "+elements_class[i].value);
                if(elements_class[i].value != ""){
                    varsArray[j] = elements_class[i];
                    j++;
                }
            }
             for(j = 0;j < varsArray.length;j++){
                 console.log("strings = "+varsArray.length+",index = "+j)
                 varsArray[j].className = varsArray[j].className.replace(/x-red-field-invalid/,"");
            }
  }

四、样式：

<style>
.x-red-field-invalid{
    outline:#F00 double 1px;
}
.inpt{border:none;border-bottom:1px solid #000;}
</style>