我们的项目使用了bootstrapvalidator来作为前端校验，但是表单里面有一个ueditor，它用bootstrapvalidator是没有效果的，为了页面风格统一，只好修修改改咯
首先来看一下修改后的效果
上面的ueditor是我们的业务需要调整成这样的，首先我们我们先把基本的结构写一写
form style=padding-top:15px;width:100% id=defaultform> div class=col-sm-12 form-group> label id=labelid class=control-label col-sm-1 form-group style=font-weight:normal;>
ueditor测试
　label> div class=col-sm-11 form-group id=divid> script id=ueid type=text/plain>script> input class=form-control type=text id=inputid name=inputname
style=height:0px;border:0px;margin:0px;padding:0px /> div> div> div class=modal-footer col-sm-12> button type=submit class=btn btn-primary id=btn_save>保存button> div> form>
特别注意，我在ueditor后面加了一个文本框，这个文本框的作用就是为了存储ueditor的内容的，既然你ueditor不能使用bootstrapvalidator来做校验，那我就加一个能用做校验的文本框呗，然后把input用style=height:0px;border:0px;margin:0px;padding:0px;这种方式隐藏起来，特别注意的是不能用display:none来隐藏，这样的话验证也会随之一起隐藏起来的。
然后现在自然是不起作用的啦，我们现在加上对文本框内容的验证就好了吧
$('#defaultform').bootstrapvalidator({ message: '验证未通过', feedbackicons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { inputname: {//所提交的控件name属性 message: '所提交的数据不能为空', validators: { notempty: { //非空提示 message: '填写的数据不能为空' }, } }, } }).on('success.form.bv', function (e) { e.preventdefault(); var $form = $(e.target); var bv = $form.data('bootstrapvalidator'); //这里提交表单 $.post('address', { data: data }, function (result) { alert(result); }); });
试一试，果然不行，因为咱们的ueditor和隐藏的文本内容还没有同步呢，而且应该在我们在ueditor输入内容的时候就进行同步！
所以我们就在ueditor的contentchange事件里面去同步吗？？
咋一看好像没什么问题，但是你会发现，这些按*&%￥之类的特殊符号在输入的时候根本就不会触发contentchange事件，
这下子就尴尬了，继续解决吧！
这里我们要解决2个问题，一个是contentchange事件，特殊符号无法触发的问题，还一个赋值，重新验证的问题。
首先看第一个问题特殊符号无法触发的问题，先看看ueditor生成之后是什么样子的吧
这里找到了一个iframe，看来ueditor的内容都藏在这里面了吧，只要监听这里面的内容改变事件，就应该可以解决第一个问题了吧
还有第二个问题，直接上代码
editor = ue.geteditor(ueid, { initialframeheight: 40 }).ready(function () { var editor = ue.geteditor(ueid); /*找到ueditor的iframe*/ var contents = $('#ueid').find('iframe').contents(); var fn = function () { $(#inputid).val(ue.geteditor(ueid).getcontent()); $('#defaultform').data('bootstrapvalidator')//重新验证inputname .updatestatus('inputname', 'not_validated', null) .validatefield('inputname'); } 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的每次重新验证之后里加一段代码
$($('#ueid div')[0]).css('border-color', $('#labelid').css('color'));
第二个问题，让√×显示出来，这个就有点麻烦，一点一点的调样式，最终发现一个解决办法，在ueditor.css文件中找到.edui-default .edui-editor这个类
把它的position变为 position: initial;然后在ueditor的ready方法中将它的margin-top调成和工具栏一样就可以了
var margintop = $($('#ueid .edui-editor-toolbarbox')[0]).height(); $($('#divid i')[0]).css('margin-top', margintop);
最后一个最好解决，在form的submit中加这样一段代码就好了
$('#defaultform').submit(function () { $('#defaultform').data('bootstrapvalidator')
.updatestatus('inputname', 'not_validated', null)
.validatefield('inputname');
$($('#ueid div')[0]).css('border-color', $('#labelid').css('color')); })
终于可以看到最终的效果了，而且我们提交表单的时候可以直接拿文本框的val()了，不想要多加一个判断if(是ueditor){....}了.最终附上整个html的内容
doctype html>html xmlns=http://www.w3.org/1999/xhtml>head> meta http-equiv=content-type content=text/html; charset=utf-8 /> title>title> link href=scripts/bootstrap.css rel=stylesheet /> link href=bootstrapvalidator.min.css rel=stylesheet /> style> .form-control-feedback { margin-right: 10px; } style>head>body> form style=padding-top:15px;width:100% id=defaultform> div class=col-sm-12 form-group> label id=labelid class=control-label col-sm-1 form-group style=font-weight:normal;>
ueditor测试
label> div class=col-sm-11 form-group id=divid> script id=ueid type=text/plain>script> input class=form-control type=text id=inputid name=inputname
style=height:0px;border:0px;margin:0px;padding:0px /> div> div> div class=modal-footer col-sm-12> button type=submit class=btn btn-primary id=btn_save>保存button> div> form>body>html>script src=jquery-1.9.1.min.js>script>script src=scripts/bootstrap.min.js>script>script src=bootstrapvalidator.min.js>script>script src=ueeditor/ueditor.config.js>script>script src=ueeditor/ueditor.all.min.js>script>script src=zh_cn.js>script>script src=ueeditor/lang/zh-cn/zh-cn.js>script>script type=text/javascript> $(function () { editor = ue.geteditor(ueid, { initialframeheight: 40 }).ready(function () { var editor = ue.geteditor(ueid); /*找到ueditor的iframe*/ var margintop = $($('#ueid .edui-editor-toolbarbox')[0]).height(); $($('#divid i')[0]).css('margin-top', margintop); var contents = $('#ueid').find('iframe').contents(); var fn = function () { $(#inputid).val(ue.geteditor(ueid).getcontent()); $('#defaultform').data('bootstrapvalidator')//重新验证inputname .updatestatus('inputname', 'not_validated', null) .validatefield('inputname'); $($('#ueid div')[0]).css('border-color', $('#labelid').css('color')); } if (document.all) {//document.all识别是否在ie下，在ie下为true contents.get(0).attachevent('onpropertychange', function (e) { fn(); }); } else { contents.on('input', fn); } }); $('#defaultform').submit(function () { $('#defaultform').data('bootstrapvalidator')
.updatestatus('inputname', 'not_validated', null)
.validatefield('inputname'); $($('#ueid div')[0]).css('border-color', $('#labelid').css('color')); }) $('#defaultform').bootstrapvalidator({ message: '验证未通过', feedbackicons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { inputname: {//所提交的控件name属性 message: '所提交的数据不能为空', validators: { notempty: { //非空提示 message: '填写的数据不能为空' }, } }, } }).on('success.form.bv', function (e) { e.preventdefault(); var $form = $(e.target); var bv = $form.data('bootstrapvalidator'); //这里提交表单 $.post('address', { data: data }, function (result) { alert(result); }); }); })script>
里面用到的一些bootstrap，jquery啥的自己记得加上去，另外中秋佳节快要到了，提前祝大家节日快乐！