bootstrap必填项 bootstrap3-validation.js必填项星号显示方式修改

来源：吃瓜网作者：吃瓜网 2018-05-23 14:10:54

作者的样式,当表单有类为:form-horizontal 时,必填项*号显示样式很奇怪~~

作者垂直表单添加 * 源码如下:

else if(fform_style==2){
$(obj).find('input, textarea').each(function(){
var el = $(this);
var controlGroup = el.parents('.form-group');
controlGroup.removeClass('has-error has-success');
controlGroup.find("#valierr").remove();
valid = (el.attr('check-type')==undefined)?null:el.attr('check-type').split(' ');
if (valid){
if ($.inArray('required',valid)>=0){
el.parent().after('*');
<pre name="code" > //在这里我们就能看到,是在input的父类的后面增加类 * 的span
} }; }); }; 看了注释之后,DOM树变成了: <div role="presentation" class="nodeBox textNodeBox "><div role="presentation" class="nodeLabel "><labelclass="col-sm-2 control-label"for="mail">Email</label></div></div><div role="presentation" class="nodeBox containerNodeBox open"><div role="presentation" class="nodeLabel "><divclass="col-sm-6"></div><div role="group" class="nodeChildBox "><div role="presentation" class="nodeBox emptyNodeBox "><div role="presentation" class="nodeLabel "><inputid="mail"class="form-control"type="text"check-type="mail required"placeholder="xxxx@"></div></div></div><div role="presentation" class="nodeCloseLabel "></div></div></div><div role="presentation" class="nodeBox textNodeBox "><div role="presentation" class="nodeLabel "><spanid="valierr"class="help-block"style="color:#FF9966">*</span></div></div>
span在那个地方是因为,作者的input外面有一层DIV,而当我缩小浏览器后,* 就不就了.........而且个人感觉*显示在label旁更合理吧...

所以我改成了:

el.parent().siblings("label").append('*');
只用找控制input宽度的父类div的兄弟label元素里增加*span就OK
此时的dom树: <labelclass="col-md-12 col-sm-12"for="username"><div role="group" class="nodeChildBox "><div role="presentation" class="nodeBox ">用户名</div><div role="presentation" class="nodeBox textNodeBox "><div role="presentation" class="nodeLabel "><spanid="valierr"style="color:#FF9966">*</span></div></div></div><div role="presentation" class="nodeCloseLabel "></label></div><div role="presentation" class="nodeBox containerNodeBox open"><div role="presentation" class="nodeLabel "><divclass="col-md-6 col-sm-6"></div><div role="group" class="nodeChildBox "><div role="presentation" class="nodeBox emptyNodeBox "><div role="presentation" class="nodeLabel "><inputid="username"class="form-control"type="text"required-message="请输入用户名..."maxlength="20"minlength="6"check-type="required"placeholder="用户名"name="username"></div></div></div><div role="presentation" class="nodeCloseLabel "></div></div></div>