bootstrapValidator验证百度Ueditor组件

semjinghua 2016-09-01

     没有办法直接使用bootstrapValidator验证百度Ueditor组件,因为ueditor生成的编辑框都是DIV拼凑起来的,并不是textarea组件。于是换了一种思路,使用ue的内容改变事件:

var domUtils = UE.dom.domUtils;
	    ueditor.addListener('ready',function(){
	    	  //ueditor.focus(true);
   	          domUtils.on(ueditor.body,"keyup",function(){
   	        	 var count=ueditor.getContentLength(true);
   	        	 if (count>50 && count<4000) $("#contentErrorInfo").text("");
   	        });
   	    });

     当内容改变时,通过ue自带的文本长度API来判断是否合乎条件,当条件成立时去掉错误信息。

 另外,在提交表单时,验证ue的内容:

var count=ueditor.getContentLength(true);
if (count<50 || count >4000){
    $("#contentErrorInfo").text("参赛作文内容长度必须在50到4000位之间");
}
$('#defaultForm').data('bootstrapValidator').validate(); //手动验证表单,当是普通按钮时
var isValid =  $('#defaultForm').data('bootstrapValidator').isValid();

    需要说明的是错误信息的样式是从bootstrapValidator在界面生成后copy的:

<div id="contentError" class="form-group has-feedback has-error">
   <small class="help-block" data-bv-validator="notEmpty" data-bv-for="content" data-bv-result="INVALID" style="">
       <span id="contentErrorInfo"></span>                                
   </small>
</div>

相关推荐