网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文：

　

标签的border 样式在浏览器中显示不出来的解决方法
  • 剖析标注HTML元素时class比id所具有的优势
  • Table显示你要显示的边框代码
  • 点击按钮文字变成input框,点击保存变成文字的实现代码
  • 关于table表格中的内容溢出布局方法
  • html的footer置于页面最底部的简单实现方法
  • 移动端网页大小自适应的实现方法
  • 如何实现textarea中获取动态剩余字数的方法
  • PHP-HTMLhtml重要知识点笔记(必看)
  • 举例讲解HTML中iframe和frame的区别
  • dedecms上一篇下一篇调用图片的方法
  • 项目中碰到的css兼容问题小结
  • html的结束标签问题与w3c标准
  • dede如何按自己写的id进行排序
  • roll sth back
  • roll-sth-back
  • roll (sth) out
  • roll-sth-out
  • roll (sth) over sth
  • roll-sth-over-sth
  • roll sth up
  • roll-sth-up
  • rolltop bath
  • rolltop-bath
  • 耳听六路，眼观八方
  • 耳咽管
  • 耳唇
  • 耳坠子
  • 耳垂
  • 耳垢
  • 耳塞
  • 耳塞机
  • 耳子
  • 耳孔
  • 湖南文理学院2014年在湘各科类投档分数线(平行一志愿)
  • 2014年云南师范大学商学院在内蒙古招生本科二批C普通理科报考情况
  • 黄河科技学院2014年应用技术学院专业介绍
  • 2014年长江工程职业技术学院分省分专业分科类招生计划
  • 黄河科技学院2014年高中一年制大中专班专业介绍
  • 2014年吉林建筑大学河南省理工类专业录取情况公示
  • 2014年吉林建筑大学甘肃省理工类专业录取情况公示
  • 2014年吉林建筑大学云南省理工类专业录取情况公示
  • 2014年吉林建筑大学四川省文史/理工类专业录取情况公示
  • 2014年吉林建筑大学新疆理工类专业录取情况公示
    • 标题 CKEditor无法验证的解决方案（js验证+jQuery Validate验证）
    范文
        这篇文章主要为大家详细介绍了CKEditor无法验证的解决方案和jQuery Validate验证框架，感兴趣的小伙伴们可以参考一下
        最近项目的前端使用了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无法验证的两种方案，相信大家和小编一样都有所收获
    随便看

    　

    在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。

    　

    Copyright © 2002-2024 cuapp.net All Rights Reserved
    更新时间：2026/5/11 17:37:24