对于boostrap框架input校验问题

一、目标

使用jquery修改当前boostrap的校验状态，分析html部分发现，主要差别有一下几点。

1.has-success和has-error的转换
2.style的值为”“,”display:none;”,”display:block;”三者之间的区别
3.glyphicon-ok和glyphicon-remove的区别

二、html代码部分：

加上样式后：（ok）<div class="col-xs-6 form-group p_0 has-feedback has-success">    <label class="col-xs-4 control-label tx-left" for="modemMac"><span class="red">*</span>调制解调器MAC地址</label>    <div class="col-xs-8">        <input class="form-control " id="modemMac" name="modemMac" type="text" placeholder="参考:  00-01-6C-06-A6-29" data-bv-field="modemMac"><i class="form-control-feedback glyphicon glyphicon-ok" data-bv-icon-for="modemMac" style=""></i>    <small data-bv-validator="notEmpty" data-bv-validator-for="modemMac" class="help-block" style="display: none;">MAC地址不能为空</small><small data-bv-validator="stringLength" data-bv-validator-for="modemMac" class="help-block" style="display: none;">MAC地址格式长度不能超过17字符</small><small data-bv-validator="regexp" data-bv-validator-for="modemMac" class="help-block" style="display: none;">MAC地址格式错误</small></div></div>之前：(enter)<div class="col-xs-6 form-group p_0 has-feedback">    <label class="col-xs-4 control-label tx-left" for="modemMac"><span class="red">*</span>调制解调器MAC地址</label>    <div class="col-xs-8">        <input class="form-control " id="modemMac" name="modemMac" type="text" placeholder="参考:  00-01-6C-06-A6-29" data-bv-field="modemMac"><i class="form-control-feedback" data-bv-icon-for="modemMac" style="display: none;"></i>        <small data-bv-validator="notEmpty" data-bv-validator-for="modemMac" class="help-block" style="display: none;">MAC地址不能为空</small><small data-bv-validator="stringLength" data-bv-validator-for="modemMac" class="help-block" style="display: none;">MAC地址格式长度不能超过17字符</small><small data-bv-validator="regexp" data-bv-validator-for="modemMac" class="help-block" style="display: none;">MAC地址格式错误</small>    </div></div>mac地址不能为空：(错误)<div class="col-xs-6 form-group p_0 has-feedback has-error">    <label class="col-xs-4 control-label tx-left" for="modemMac"><span class="red">*</span>调制解调器MAC地址</label>    <div class="col-xs-8">        <input class="form-control " id="modemMac" name="modemMac" type="text" placeholder="参考:  00-01-6C-06-A6-29" data-bv-field="modemMac"><i class="form-control-feedback glyphicon glyphicon-remove" data-bv-icon-for="modemMac" style="display: block;"></i>    <small data-bv-validator="notEmpty" data-bv-validator-for="modemMac" class="help-block" style="">MAC地址不能为空</small><small     data-bv-validator="stringLength" data-bv-validator-for="modemMac" class="help-block" style="display: none;">MAC地址格式长度不能超过17字符</small><small data-bv-validator="regexp" data-bv-validator-for="modemMac" class="help-block" style="display: none;">MAC地址格式错误</small></div></div>

代码处理

checkUniqueMac__callback:function(data,from){    if(this.modal == from.modal){        if(data.result){        Modal.alert({            msg: "MAC地址已经存在!"        });        $("#eleresourceModel #modemMac").val("");      //1.获取目标div对象,将has-success移除class样式,并手动加上has-error样式        $("#eleresourceModel #modemMac").parent().parent()            .removeClass("has-success").addClass("has-error");      //2.将成功标识的style改成display: block;        $("#eleresourceModel #modemMac").next()            .attr("style","display: block;");        $("#eleresourceModel #modemMac")            .next().removeClass("glyphicon-ok")            .addClass("glyphicon-remove");      //3.将mac地址的style移除掉        $("#eleresourceModel #modemMac").next().next()            .attr("style","");       var modemMacOld = $('#resourceFormModify #modemMacOld').val();       $("#resourceFormModify #modemMac").val(modemMacOld);       }    }}