用bootstrapValidator来验证UEditor
我们的项目使用了bootstrapValidator来作为前端校验，但是表单里面有一个UEditor，它用bootstrapValidator是没有效果的，为了页面风格统一，只好修修改改咯
首先来看一下修改后的效果
上面的UEditor是我们的业务需要调整成这样的，首先我们我们先把基本的结构写一写
; ;<pre><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></pre> ; ;
特别注意，我在UEditor后面加了一个文本框，这个文本框的作用就是为了存储UEditor的内容的，既然你UEditor不能使用bootstrapValidator来做校验，那我就加一个能用做校验的文本框呗，然后把input用style="height:0px;border:0px;margin:0px;padding:0px;"这种方式隐藏起来，特别注意的是不能用display:none来隐藏，这样的话验证也会随之一起隐藏起来的。
然后现在自然是不起作用的啦，我们现在加上对文本框内容的验证就好了吧
; ;<pre> ;$('#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);
; ; ; ; ; ; ; ; ; ; ; ;});
; ; ; ; ; ; ; ;}); ; ; ;</pre> ; ;
试一试，果然不行，因为咱们的UEditor和隐藏的文本内容还没有同步呢，而且应该在我们在UEditor输入内容的时候就进行同步！
所以我们就在UEditor的contentChange事件里面去同步吗？？
咋一看好像没什么问题，但是你会发现，这些按*&%￥之类的特殊符号在输入的时候根本就不会触发contentChange事件，
这下子就尴尬了，继续解决吧！
这里我们要解决2个问题，一个是contentChange事件，特殊符号无法触发的问题，还一个赋值，重新验证的问题。
首先看第一个问题特殊符号无法触发的问题，先看看UEditor生成之后是什么样子的吧
这里找到了一个iframe，看来UEditor的内容都藏在这里面了吧，只要监听这里面的内容改变事件，就应该可以解决第一个问题了吧
还有第二个问题，直接上代码
; ;<pre> ;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);
; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;});</pre> ; ;
这里赋值之后必须 ;用bootstrapValidator的updateStatus加validateField方法重新验证一遍，然后我们再试一试吧
仔细看一看，里面还有三个问题，一个问题是边框没有随着一起变颜色，第二个是右边没有√和×的图标，第三个是直接点保存是不触发验证的。
好吧，咱们一个一个来解决！第一个，边框为什么没有变颜色呢？其实很正常，因为我们是对一个隐藏的文本框做的验证，要变色应该也是那个文本框变吧
好的，那我们就加一段js，让边框的颜色和左边label的颜色一样就可以了，所以在UEditor的每次重新验证之后里加一段代码
; ;<pre> ; ;$($('#UEId ;div')[0]).css('border-color', ;$('#labelId').css('color')); ;</pre> ; ;
第二个问题，让√×显示出来，这个就有点麻烦，一点一点的调样式，最终发现一个解决办法，在ueditor.css文件中找到.edui-default ;.edui-editor这个类
把它的position变为 position: ;initial;然后在UEditor的ready方法中将它的margin-top调成和工具栏一样就可以了
; ;<pre> ; ;var ; ;margintop ;= ;$($('#UEId ;.edui-editor-toolbarbox')[0]).height();
; ;$($('#divId ;i')[0]).css('margin-top', ;margintop);</pre> ; ;
最后一个最好解决，在form的submit中加这样一段代码就好了
; ;<pre>$('#defaultForm').submit(function ;() ;{
; ; ; ; ; ; ; ; ; ; ; ;$('#defaultForm').data('bootstrapValidator') .updateStatus('inputName', ;'NOT_VALIDATED', ;null) .validateField('inputName');$($('#UEId ;div')[0]).css('border-color', ;$('#labelId').css('color')); ;
; ; ; ; ; ; ; ;})</pre> ; ;
终于可以看到最终的效果了，而且我们提交表单的时候可以直接拿文本框的val()了，不想要多加一个判断if(是UEditor){....}了.最终附上整个html的内容
; ;<pre><!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></pre> ; ;
里面用到的一些bootstrap，jquery啥的自己记得加上去，另外中秋佳节快要到了，提前祝大家节日快乐！