`
sshzhangwg
  • 浏览: 70838 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

bootstrapValidator验证百度Ueditor组件

 
阅读更多

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

 

 

  • 大小: 29.2 KB
分享到:
评论

相关推荐

    利用bootstrapValidator验证UEditor

    在本文中,我们将深入探讨如何使用`bootstrapValidator`来验证`UEditor`,这是一个常见的前端验证问题,特别是在处理包含富文本编辑器的表单时。`UEditor`是一款功能强大的在线编辑器,常用于创建和编辑HTML内容,而...

    百度ueditor编辑器.zip

    百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器

    ueditor组件

    ueditor是由百度公司推出的一款专业级的富文本编辑器,它以其强大的功能和高度的可定制性,在网页开发领域广受欢迎。ueditor不仅提供了基础的文字编辑功能,还支持丰富的多媒体元素集成,如地图、视频、音乐等,让...

    spring boot thymeleaf 整合 百度Ueditor 集成demo

    在本文中,我们将深入探讨如何将Spring Boot、Thymeleaf和百度Ueditor进行整合,以便在Web应用程序中实现一个功能强大的富文本编辑器。这个集成的Demo将帮助开发者解决后端配置问题,确保文件上传功能正常运行。 ...

    百度ueditor官方包

    **百度UEditor官方包详解** 百度UEditor是一款由百度公司开发的开源富文本编辑器,它为网页开发者提供了强大的在线文字编辑功能。该编辑器以其稳定性、易用性和丰富的功能集而广受好评,适用于各类网站和应用的后台...

    使用vue-ueditor-wrap组件时导入的百度ueditor资源包

    使用vue-ueditor-wrap组件时导入的百度ueditor资源包,如果要恢复百度ueditor图片组件的功能,就去UEditor/dialogs/image/image.html 里面取消屏蔽23,24,25行代码,如果需要查看组件使用放法,请去我主页查看:uve 使用...

    百度ueditor完整包

    这个"百度ueditor完整包"包含了所有必要的组件和资源,使得用户能够在自己的网站上快速集成并使用这款编辑器。 UEditor的主要特点在于它的易用性和灵活性。它支持多种格式的文字输入,如HTML、Markdown等,同时提供...

    百度Ueditor最新版使用实例

    百度Ueditor是一款由百度公司开发的开源富文本编辑器,专为网页开发者设计,提供了一套完整的在线文本编辑解决方案。它以其强大的功能、易于集成和高度可定制性,广泛应用于各种网站和Web应用中。在"百度Ueditor最新...

    百度ueditor使用心得

    **百度UEditor使用心得** 百度UEditor是一款由百度公司开发的富文本编辑器,它专为Web开发者设计,提供了一套完整的在线文本编辑解决方案。这款编辑器以其强大的功能、易于集成和高度可定制性,受到了广大开发者的...

    百度ueditor编辑器

    **百度UEditor编辑器详解** 百度UEditor是一款由百度公司开发的专业级富文本编辑器,它以其强大功能和易用性在Web应用中广受欢迎。UEditor专为满足现代网络编辑需求而设计,提供丰富的文本格式化选项,支持多媒体...

    百度ueditor编辑器jsp版本

    【百度UEditor编辑器JSP版本详解】 UEditor是由百度公司旗下的Web前端研发部精心打造的一款强大而易用的富文本Web编辑器。其主要目标是提供一个轻量级、高性能且用户友好的编辑工具,使得用户在网页上能够轻松进行...

    百度ueditor编辑器 word导入功能(asp.net版本)

    百度Ueditor是一款强大的在线编辑器,它提供了丰富的功能,包括图片上传、表格制作、代码编辑等。在本案例中,我们关注的是"百度ueditor编辑器的word导入功能",特别是在ASP.NET环境下。 百度Ueditor的Word导入功能...

    asp.net 百度UEditorDemo

    在这个"asp.net 百度UEditorDemo"项目中,开发者使用ASP.NET来创建一个与百度UEditor集成的Web应用。 【百度UEditor】 百度UEditor是一款开源的JavaScript富文本编辑器,广泛应用于网页内容编辑。它提供了多种功能...

    百度UEditor使用说明

    百度UEditor使用说明 百度UEditor是中国搜索引擎巨头百度公司推出的富文本编辑器,旨在帮助开发者快速构建富文本编辑功能。下面是关于百度UEditor使用说明的详细知识点总结: 一、UEditor的下载和安装 在使用百度...

    百度Ueditor

    **百度Ueditor** 百度Ueditor是一款由百度公司开发的开源富文本在线编辑器,它专为Web应用设计,提供了一种简洁、高效的HTML文本编辑体验。这个编辑器以易用性和强大功能著称,广泛应用于各类网站、博客、论坛以及...

    百度 UEditor

    **百度UEditor详解** 百度UEditor是一款由百度公司前端研发部精心打造的Web富文本编辑器,它在设计上强调了轻量化、可定制以及优秀的用户体验。作为一个开源项目,UEditor遵循MIT协议,这意味着用户可以自由地使用...

    百度ueditor支持本地与FTP上传图片

    **百度UEditor简介** 百度UEditor是一款由百度公司开发的开源富文本编辑器,它专为Web应用设计,提供了一种简单、高效的在线文本编辑体验。UEditor支持多种功能,如图片上传、视频插入、表格操作、代码高亮等,广泛...

    百度ueditor(1.17开发版)编辑器asp.net批量上传组件

    功能:本组件是参照百度ueditor1.17开发版而做的批量上传插件。 使用方法: 把 upload.aspx upload.aspx.cs 这2个文件复制到 ue/server/upload/net/ 文件夹下。 然后把 ue/dialogs/image/image.html 文件第155行的 ...

    百度UEditor 整合135所需要的文件

    百度UEditor是由百度公司开发的一款开源JavaScript富文本编辑器,支持多种浏览器环境。它提供了丰富的API和插件系统,允许开发者根据需求自定义编辑器功能。UEditor的主要特点包括:所见即所得、实时预览、图片上传...

Global site tag (gtag.js) - Google Analytics