bootstrapValidator验证百度Ueditor组件

最新推荐文章于 2021-01-07 16:04:14 发布

sshzhangwg

最新推荐文章于 2021-01-07 16:04:14 发布

阅读量379

点赞数 1

分类专栏： Jquery

本文链接：https://blog.csdn.net/sshzhangwg/article/details/84815491

版权

Jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

没有办法直接使用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>