对于boostrap框架input校验问题

对于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);
}
}
}