利用bootstrapValidator验证UEditor
|
我们的项目使用了bootstrapValidator来作为前端校验，但是表单里面有一个UEditor，它用bootstrapValidator是没有效果的，为了页面风格统一，只要修修改改咯 首先来看一下修改后的效果
上面的UEditor是我们的业务需要调整成这样的，首先我们我们先把基本的结构写一写 <label id="labelId" class="control-label col-sm-1 form-group" style="font-weight:normal;"> UEditor测试
<div class="col-sm-11 form-group" id="divId"> 特别注意，我在UEditor后面加了一个文本框，这个文本框的作用就是为了存储UEditor的内容的，既然你UEditor不能使用bootstrapValidator来做校验，那我就加一个能用做校验的文本框呗，然后把input用style="height:0px;border:0px;margin:0px;padding:0px;"这种方式隐藏起来，特别注意的是不能用display:none来隐藏，这样的话验证也会随之一起隐藏起来的。 然后现在自然是不起作用的啦，我们现在加上对文本框内容的验证就好了吧 试一试，果然不行，因为咱们的UEditor和隐藏的文本内容还没有同步呢，而且应该在我们在UEditor输入内容的时候就进行同步！ 所以我们就在UEditor的contentChange事件里面去同步吗？？ 咋一看好像没什么问题，但是你会发现，这些按*&%￥之类的特殊符号在输入的时候根本就不会触发contentChange事件， 这下子就尴尬了，继续解决吧！ 这里我们要解决2个问题，一个是contentChange事件，特殊符号无法触发的问题，还一个赋值，重新验证的问题。 首先看第一个问题特殊符号无法触发的问题，先看看UEditor生成之后是什么样子的吧
这里找到了一个iframe，看来UEditor的内容都藏在这里面了吧，只要监听这里面的内容改变事件，就应该可以解决第一个问题了吧 还有第二个问题，直接上代码 if (document.all) {//document.all识别是否在IE下，在IE下为true
contents.get(0).attachEvent('onpropertychange',function (e) { fn(); }); } else { contents.on('input',fn); } }); 这里赋值之后必须 用bootstrapValidator的updateStatus加validateField方法重新验证一遍，然后我们再试一试吧
仔细看一看，里面还有三个问题，一个问题是边框没有随着一起变颜色，第二个是右边没有√和×的图标，第三个是直接点保存是不触发验证的。 好吧，咱们一个一个来解决！第一个，边框为什么没有变颜色呢？其实很正常，因为我们是对一个隐藏的文本框做的验证，要变色应该也是那个文本框变吧 好的，那我们就加一段js，让边框的颜色和左边label的颜色一样就可以了，所以在UEditor的每次重新验证之后里加一段代码
.validateField('inputName');$($('#UEId div')[0]).css('border-color',$('#labelId').css('color')); 终于可以看到最终的效果了，而且我们提交表单的时候可以直接拿文本框的val()了，不想要多加一个判断if(是UEditor){....}了.最终附上整个html的内容 |
