欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CKEditor無法驗證的解決方案(js驗證+jQuery Validate驗證)

 更新時間:2016年05月09日 09:24:28   投稿:lijiao  
這篇文章主要為大家詳細介紹了CKEditor無法驗證的解決方案和jQuery Validate驗證框架,感興趣的小伙伴們可以參考一下

最近項目的前端使用了jQuery,表單的前端驗證用的是jQuery Validate,用起來很簡單方便,一直都很滿意的。

前段時間,根據(jù)需求為表單中的 textarea 類型的元素加上了html富文本編輯器,用的是CKEditor,功能強大,定制方便,也很滿意。

不過用CKEditor增強過的 textarea 元素,這個字段要求是非空的,在jQuery Validate總是驗證不通過,原因就是在 CKEditor 編輯器填寫了內(nèi)容之后,編輯器并不是立即把內(nèi)容更新到原來的 textarea 元素中的,我沒仔細看源代碼,試過一種情況就是每一次提交不通過,第二次提交就可以通過的,貌似編輯器是在 submit 事件之前把編輯器的內(nèi)容更新到 textarea 中的(這個是猜測,不知道對不對,我對jQuery 和 CKEditor 都不太熟悉,算是拿來就用,有問題就放狗的那種)。

于是在網(wǎng)上找到了解決問題的代碼,代碼不是我寫的,我只是記錄一下我遇到的問題,代碼非原創(chuàng)。原理就是當(dāng)編輯器更新了內(nèi)容之后,立即把內(nèi)容更新到 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 元素,在填寫了內(nèi)容之后,編輯器并不立即把內(nèi)容更新到原來的 textarea 元素中的,而是等到 submit 事件之前把編輯器的內(nèi)容更新到 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ā)表話題的標(biāo)題."); 
                    f.tbTopicHeading.focus(); 
                    return false; 
                  } 
                  if(topicHeading.length>50); 
                  { 
                   alert("話題的主題長度必須在50字符以內(nèi)."); 
                   f.tbTopicHeading.focus(); 
                   return false; 
                  } 
         var topicContent=CKEDITOR.instances.mckeditor.getData(); 
          
         topicContent = topicContent.replace(/^\s+/g,""); 
         topicContent = topicContent.replace(/\s+$/g,""); 
                 if (topicContent =="") 
                  { 
                    alert("請?zhí)顚懺掝}內(nèi)容."); 
                    f.mckeditor.focus(); 
                    return false; 
                  }  
 
                  if(topicContent.length>4000) 
                  { 
                   alert("話題內(nèi)容的長度必須在4000字符以內(nèi)."); 
                   f.mckeditor.focus(); 
                   return false; 
                  }       
 
       }  
       </script> 

其中,mckeditor為編輯器的textarea的id和name.
ASP.NET中也是一樣:

復(fù)制代碼 代碼如下:
<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:"請輸入發(fā)表話題的標(biāo)題.", 
          maxlength:jQuery.format("話題的主題長度必須在50字符以內(nèi).")  
        }, 
          mckeditor:{ 
          required:"請?zhí)顚懺掝}內(nèi)容.", 
          maxlength:jQuery.format("話題內(nèi)容的長度必須在4000字符以內(nèi).")  
        } 
         }  
      } 
    } 

其中mckeditor為控件id,不僅有取值的作用,還有提示信息定位的作用.
因此,可以在頁面加載時,加入實例化編輯器代碼,實現(xiàn)編輯器更新了內(nèi)容之后,立即把內(nèi)容更新到 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生成的對應(yīng)客戶端看到的id 
{ 
skin : 'kama',//設(shè)置皮膚 
enterMode : Number(2),//設(shè)置enter鍵的輸入1.<p>2為<br/>3為<div> 
shiftEnterMode : Number(1), // 設(shè)置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")%>', //啟用瀏覽功能,正式使用場合可以關(guān)閉,只允許用戶上傳 
//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無法驗證的兩種方案,相信大家和小編一樣都有所收獲,謝謝大家的閱讀。

相關(guān)文章

最新評論