最近项目的前端使用了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 eventthis.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无法验证的两种方案，相信大家和小编一样都有所收获，谢谢大家的阅读。
易网时代-编程资源站