CKEditor无法验证的解决方案(js验证+jQuery Validate验证)


Posted in Javascript onMay 09, 2016

最近项目的前端使用了jQuery,表单的前端验证用的是jQuery Validate,用起来很简单方便,一直都很满意的。

前段时间,根据需求为表单中的 textarea 类型的元素加上了html富文本编辑器,用的是CKEditor,功能强大,定制方便,也很满意。

不过用CKEditor增强过的 textarea 元素,这个字段要求是非空的,在jQuery Validate总是验证不通过,原因就是在 CKEditor 编辑器填写了内容之后,编辑器并不是立即把内容更新到原来的 textarea 元素中的,我没仔细看源代码,试过一种情况就是每一次提交不通过,第二次提交就可以通过的,貌似编辑器是在 submit 事件之前把编辑器的内容更新到 textarea 中的(这个是猜测,不知道对不对,我对jQuery 和 CKEditor 都不太熟悉,算是拿来就用,有问题就放狗的那种)。

于是在网上找到了解决问题的代码,代码不是我写的,我只是记录一下我遇到的问题,代码非原创。原理就是当编辑器更新了内容之后,立即把内容更新到 textarea 元素。

CKEDITOR.instances["page_content"].on("instanceReady", function() 
    { 
            //set keyup event 
            this.document.on("keyup", updateTextArea); 
             //and paste event 
            this.document.on("paste", updateTextArea); 
 
    }); 
 
    function updateTextArea() 
    { 
        CKEDITOR.tools.setTimeout( function() 
              {  
                $("#page_content").val(CKEDITOR.instances.page_content.getData()); 
                $("#page_content").trigger('keyup'); 
              }, 0);  
    }

目前一切使用正常,算是解决了一个让我头痛的问题。

另一种解决思路:

CKEditor 编辑器是增强过的 textarea 元素,在填写了内容之后,编辑器并不立即把内容更新到原来的 textarea 元素中的,而是等到 submit 事件之前把编辑器的内容更新到 textarea 中.
因此,普通的js验证或是jquery validate验证都获取不到编辑器的值.)

1.js验证
获取CKEditor 编辑器的值其实很容易,其值就是CKEDITOR.instances.mckeditor.getData(),实例代码如下:

<script language="javascript" type="text/javascript">   
 
  function checkForm() 
       { 
         var f=document.form1; 
         var topicHeading=f.tbTopicHeading.value; 
         topicHeading = topicHeading.replace(/^\s+/g,""); 
         topicHeading = topicHeading.replace(/\s+$/g,""); 
                 if (topicHeading =="") 
                  { 
                    alert("请输入发表话题的标题."); 
                    f.tbTopicHeading.focus(); 
                    return false; 
                  } 
                  if(topicHeading.length>50); 
                  { 
                   alert("话题的主题长度必须在50字符以内."); 
                   f.tbTopicHeading.focus(); 
                   return false; 
                  } 
         var topicContent=CKEDITOR.instances.mckeditor.getData(); 
          
         topicContent = topicContent.replace(/^\s+/g,""); 
         topicContent = topicContent.replace(/\s+$/g,""); 
                 if (topicContent =="") 
                  { 
                    alert("请填写话题内容."); 
                    f.mckeditor.focus(); 
                    return false; 
                  }  
 
                  if(topicContent.length>4000) 
                  { 
                   alert("话题内容的长度必须在4000字符以内."); 
                   f.mckeditor.focus(); 
                   return false; 
                  }       
 
       }  
       </script>

其中,mckeditor为编辑器的textarea的id和name.
ASP.NET中也是一样:

<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine" Width="94%" Height="400px" CssClass="ckeditor"></asp:TextBox> 

2.jQuery Validate验证
jquery的验证模式不能直接使用CKEDITOR.instances.mckeditor.getData()这个值.
它是使用如下形式来提交验证:

function InitRules() { 
      opts = { 
         rules: 
         { 
            tbTopicHeading:{ 
            required:true, 
            maxlength:50   
          },           
          mckeditor:{ 
            required:true, 
            maxlength:4000 
          }  
         }, 
         messages: 
         { 
          tbTopicHeading:{ 
          required:"请输入发表话题的标题.", 
          maxlength:jQuery.format("话题的主题长度必须在50字符以内.")  
        }, 
          mckeditor:{ 
          required:"请填写话题内容.", 
          maxlength:jQuery.format("话题内容的长度必须在4000字符以内.")  
        } 
         }  
      } 
    }

其中mckeditor为控件id,不仅有取值的作用,还有提示信息定位的作用.
因此,可以在页面加载时,加入实例化编辑器代码,实现编辑器更新了内容之后,立即把内容更新到 textarea 元素。

代码如下:

<script type="text/javascript"> 
//<![CDATA[ 
CKEDITOR.instances["mckeditor"].on("instanceReady", function()    
    {    
            //set keyup event  
            this.document.on("keyup", updateTextArea);  
             //and paste event 
            this.document.on("paste", updateTextArea);   
    });    
 
    function updateTextArea()  
    {    
        CKEDITOR.tools.setTimeout( function() 
              {    
                $("#mckeditor").val(CKEDITOR.instances.mckeditor.getData());    
                $("#mckeditor").trigger('keyup');    
              }, 0);  
    }   
//]]> 
              </script>

此段代码放在编辑器控件之下即可.完整实例如下:

<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine" Width="98%" Height="400px" CssClass="ckeditor"></asp:TextBox> 
<script type="text/javascript"> 
//<![CDATA[ 
CKEDITOR.replace( '<%=mckeditor.ClientID %>',// mckeditor.ClientID为TextBox mckeditor生成的对应客户端看到的id 
{ 
skin : 'kama',//设置皮肤 
enterMode : Number(2),//设置enter键的输入1.<p>2为<br/>3为<div> 
shiftEnterMode : Number(1), // 设置shiftenter的输入 
disableNativeSpellChecker:false,  
scayt_autoStartup:false, 
toolbar_Full : [ 
['Source','-','Save','NewPage','Preview','-'], 
['Cut','Copy','Paste','PasteText','PasteFromWord','-'], 
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], 
['NumberedList','BulletedList','-','Outdent','Indent'], 
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], 
['Link','Unlink','Anchor'], 
['Image','Table','HorizontalRule'],['Subscript','Superscript'], 
'/', 
['Bold','Italic','Underline'], 
['TextColor','BGColor'], 
['Styles','Format','Font','FontSize'] 
], 
//filebrowserBrowseUrl: '<%=ResolveUrl("~/ckfinder/ckfinder.html")%>', //启用浏览功能,正式使用场合可以关闭,只允许用户上传 
//filebrowserImageBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html?Type=Images")%>', 
//filebrowserImageUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images")%>' 如果使用ckfinder 就不要屏蔽 
//自定义的上传 
filebrowserImageUploadUrl:'<%=ResolveUrl("~/fileupload/fileupload.aspx?command=QuickUpload&type=Images")%>' 
}); 
CKEDITOR.instances["mckeditor"].on("instanceReady", function()  
    { 
            //set keyup event 
            this.document.on("keyup", updateTextArea);  
             //and paste event 
            this.document.on("paste", updateTextArea);  
    });  
 
    function updateTextArea() 
    { 
        CKEDITOR.tools.setTimeout( function()  
              { 
                $("#mckeditor").val(CKEDITOR.instances.mckeditor.getData());  
                $("#mckeditor").trigger('keyup');  
              }, 0);  
    }   
//]]> 
              </script>

以上就是解决CKEditor无法验证的两种方案,相信大家和小编一样都有所收获,谢谢大家的阅读。

Javascript 相关文章推荐
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
JavaScript限定复选框的选择个数示例代码
Aug 25 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
JavaScript数组迭代方法
Mar 03 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 #Javascript
jQuery绑定事件的几种实现方式
May 09 #Javascript
jquery实现左右无缝轮播图
Jul 31 #Javascript
node.js从数据库获取数据
May 08 #Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 #Javascript
基于jquery实现最简单的选项卡切换效果
May 08 #Javascript
基于javascript实现图片滑动效果
May 07 #Javascript
You might like
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
jquery获得下拉框值的代码
2011/08/13 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
JS实现div居中示例
2014/04/17 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
Vuex的实战使用详解
2019/10/31 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
mac下如何将python2.7改为python3
2018/07/13 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
python如何实现DES加密
2020/09/21 Python
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
实习护理工作自我评价
2013/09/25 职场文书
预备党员思想汇报范文
2013/12/29 职场文书
运动会入场式解说词
2014/02/18 职场文书
秋季运动会广播稿
2014/02/22 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
市场总监岗位职责
2015/02/11 职场文书
大学生求职自荐信
2015/03/24 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
JavaCV实现照片马赛克效果
2022/01/22 Java/Android