FCKeditor/CKEditor 使用 `` 或 `<div contenteditable>` 模擬編輯區，實際 `<textarea>` 隱藏且僅在提交前同步內容。導致：</p> <ol> <li><strong>RequiredFieldValidator 驗證失效</strong>：檢查的是隱藏 textarea 初始空值</li> <li><strong>需提交兩次才觸發驗證</strong>：第一次提交同步內容，第二次才驗證通過</li> <li><strong>客戶端驗證無法即時運作</strong>：編輯器實例尚未就緒時驗證腳本已執行</li> </ol> <h2>方案一：停用客戶端驗證，僅伺服器端驗證 (快速修補)</h2> <pre><code><asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="fckEditor" Display="Dynamic" EnableClientScript="False" ErrorMessage="請輸入內容"> </asp:RequiredFieldValidator> </code></pre> <p>✅ 簡單有效 ❌ 無即時回饋，使用者體驗差</p> <h2>方案二：CustomValidator + CKEditor JavaScript API (推薦，完整體驗)</h2> <h3>1. 客戶端驗證函數</h3> <pre><code><script type="text/javascript"> var editorInstance = null; // CKEditor 實例就緒事件 function CKEDITOR_OnComplete(editor) { editorInstance = editor; } // CustomValidator 客戶端驗證函數 function ValidateEditorContent(source, arguments) { if (!editorInstance) { arguments.IsValid = false; return; } // 取得純文字內容 (移除 HTML 標籤) var text = editorInstance.getData().replace(/<[^>]*>/g, '').trim(); arguments.IsValid = text.length > 0; } </script> </code></pre> <h3>2. 頁面標記</h3> <pre><code><!-- CKEditor 載入 --> <script src="/ckeditor/ckeditor.js"></script> <textarea id="fckEditor" name="fckEditor" runat="server"></textarea> <script>CKEDITOR.replace('fckEditor', { on: { instanceReady: CKEDITOR_OnComplete } });</script> <!-- 驗證控制項 --> <asp:CustomValidator ID="CustomValidator1" runat="server" ControlToValidate="fckEditor" Display="Dynamic" ErrorMessage="內容不得為空" ClientValidationFunction="ValidateEditorContent" OnServerValidate="ValidateEditor_ServerValidate"> </asp:CustomValidator> </code></pre> <h3>3. 伺服器端驗證 (雙重保障)</h3> <pre><code>protected void ValidateEditor_ServerValidate(object source, ServerValidateEventArgs args) { // 移除 HTML 標籤後檢查 string html = fckEditor.Value ?? ""; string text = Regex.Replace(html, "<[^>]*>", "").Trim(); args.IsValid = !string.IsNullOrEmpty(text); } </code></pre> <h2>FCKeditor 2.x 版本特定寫法</h2> <pre><code><script> // FCKeditor 專用 API var oEditor = null; function FCKeditor_OnComplete(editorInstance) { oEditor = editorInstance; } function FckValidate(source, arguments) { if (!oEditor) { arguments.IsValid = false; return; } // FCKeditor 取得 XHTML 內容 var value = oEditor.GetXHTML(true); // 簡單移除標籤檢查 (或使用 jQuery: $(value).text().trim()) arguments.IsValid = (value.replace(/<[^>]*>/g, '').trim().length > 0); } </script> <asp:CustomValidator ID="CustomValidator1" runat="server" ClientValidationFunction="FckValidate" OnServerValidate="ValidFck" ControlToValidate="fck" ErrorMessage="沒有填寫" Display="Dynamic"> </asp:CustomValidator> </code></pre> <h2>進階：整合 jQuery Validate / ASP.NET Core 驗證屬性</h2> <h3>jQuery Validate 客製規則</h3> <pre><code>$.validator.addMethod("ckeditorRequired", function(value, element) { var editor = CKEDITOR.instances[element.id]; if (!editor) return false; var text = editor.getData().replace(/<[^>]*>/g, '').trim(); return text.length > 0; }, "請輸入內容"); // 套用規則 $("#myForm").validate({ rules: { fckEditor: { ckeditorRequired: true } } }); </code></pre> <h3>ASP.NET Core Model 驗證屬性</h3> <pre><code> public class RichTextRequiredAttribute : ValidationAttribute { protected override ValidationResult IsValid(object value, ValidationContext context) { if (value == null) return new ValidationResult(ErrorMessage); string text = Regex.Replace(value.ToString(), "<[^>]*>", "").Trim(); return string.IsNullOrEmpty(text) ? new ValidationResult(ErrorMessage) : ValidationResult.Success; } } // ViewModel 使用 public class ArticleVm { [RichTextRequired(ErrorMessage = "文章內容不得為空")] public string Content { get; set; } } </code></pre> <h2>常見陷阱與解決</h2> <table> <tr><th>問題</th><th>原因</th><th>解決</th></tr> <tr><td>驗證函數找不到編輯器實例</th><td>驗證腳本在 `instanceReady` 前執行</th><td>在 `CKEDITOR_OnComplete` / `FCKeditor_OnComplete` 中快取實例，驗證函數檢查 null</td></tr> <tr><td>只輸入空白/換行通過驗證</th><td>未處理 `&nbsp;`、換行標籤</th><td>伺服器端用 `Regex.Replace(html, "<[^>]*>|&nbsp;|\\s", "")` 徹底清理</td></tr> <tr><td>UpdatePanel 部分更新後驗證失效</th><td>編輯器實例重建，舊引用失效</th><td>`pageLoad()` 重新綁定、`ScriptManager.RegisterStartupScript` 重新初始化</td></tr> <tr><td>內容過長導致驗證效能問題</th><td>正則替換大量 HTML</th><td>先檢查 `editor.getData().length > threshold` 快速通過，或使用 `editor.document.getBody().getText()` 直接取純文字</td></tr> </table> <h2>總結</h2> <p>富文本編輯器非空驗證的核心在於<strong>正確取得編輯器實例並提取純文字內容</strong>。<strong>CustomValidator + 客戶端 API + 雙端驗證</strong> 是標準解法。現代專案建議：<strong>前端使用 jQuery Validate / Vue/React 表單驗證庫 + CKEditor 5 整合</strong>，後端以<strong>Model 驗證屬性</strong>統一防禦，完全取代 WebForms 驗證控制項體系。</p> <div class="qcxs_ie_he"></div> </div> <div class="akevx_own"> <script language='javascript' src='/ad/p.js'></script></div> <div class="akevx_mj"> </div> <div class="qcxs_ie_he"></div> <ol class="qmsbvx_hsb ovv_hex"> <li>上一篇文章： <a class='LinkPrevArticle' href='https://code.yunyiwangluo.com/bianchen/aspnetjc/55097.html' >ASP.NET TreeView 建構多層級複選輸入介面：級聯選取、彈出視窗、資料綁定與回傳值組裝</a> <li>下一篇文章： <a class='LinkNextArticle' href='https://code.yunyiwangluo.com/bianchen/aspnetjc/55099.html' >ASP.NET HTTP 模組實作 SQL 注入防護：全域攔截 QueryString/Form/Cookie 危險字元</a> </ol> </div> </div> <div class="qirnxbd bg1 mt20"> <div class="jdbsbav"> <a href='https://code.yunyiwangluo.com/bianchen/aspnetjc/' target="_blank">ASP.NET 基礎</a> <div class="jdbsbav_hx"></div> </div> <div class="qirnxbd_rbx"> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/aspnetjc/54370.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010918103445_S.jpg' width='100' height='70' alt='ASP.NET 動態創建 TextBox 控件：視圖狀態加載與保存機制實戰' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/aspnetjc/54370.html' target="_blank"><strong>ASP.NET 動態創建 TextBox 控件：視圖狀態加載與保存機制實戰</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/aspnetjc/54370.html' target="_blank"><p>問題背景 接續上文 TextChanged 事件分析，本文聚</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/aspnetjc/54359.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010918091733.png' width='100' height='70' alt='密碼儲存安全指南：Salt + Hash 最佳實踐與 .NET 完整實作' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/aspnetjc/54359.html' target="_blank"><strong>密碼儲存安全指南：Salt + Hash 最佳實踐與 .NET 完整實作</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/aspnetjc/54359.html' target="_blank"><p>為什麼單純 Hash 不夠？ 哈希函數 (MD5, SHA-</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/aspnetjc/52778.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010917000942.png' width='100' height='70' alt='ASP.NET 微信開發：自訂客服會話管理系統（48小時規則、即時通訊、記錄存檔）' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/aspnetjc/52778.html' target="_blank"><strong>ASP.NET 微信開發：自訂客服會話管理系統（48小時規則、即時通訊、記錄存檔）</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/aspnetjc/52778.html' target="_blank"><p>前言：超越官網後台的客服體驗 微信規定：用戶主動發訊後 48</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/aspnetjc/52875.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010917092821_S.jpg' width='100' height='70' alt='ASP.NET 母版頁快速入門：從建立到套用的圖文教學' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/aspnetjc/52875.html' target="_blank"><strong>ASP.NET 母版頁快速入門：從建立到套用的圖文教學</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/aspnetjc/52875.html' target="_blank"><p>為什麼需要母版頁？ 在開發多人協作的畢業專題或企業專案時，網</p></a> </div> <div class="qcxs_ie_he"></div> </div> </div> </div> <div class="eccsgxsg mt20"> <div class="akevx_oin"> </div> <div class="nenxnxb bg1 mt20"> <div class="enxvsfgg"> <div class="enxvsfgg_1"></div> </div> <div class="pdirbvx lbhevs ovv_hex"> <a href='https://code.yunyiwangluo.com/bianchen/aspnetjc/54291.html' target="_blank">ASP.NET 多圖輪播元件：資料庫驅動、後台管理、前端零代碼修改</a> <a href='https://code.yunyiwangluo.com/bianchen/aspnetjc/55590.html' target="_blank">ASP.NET 多層架構登入實作 (工廠模式支援多資料庫)</a> <a href='https://code.yunyiwangluo.com/bianchen/aspnetjc/52081.html' target="_blank">ASP.NET 調整上傳檔案大小限制完整指南</a> <a href='https://code.yunyiwangluo.com/bianchen/aspnetjc/54597.html' target="_blank">IE 與 Firefox 模擬 Click 事件及表單以新視窗提交的最佳實踐</a> <a href='https://code.yunyiwangluo.com/bianchen/aspnetjc/52408.html' target="_blank">ABP 框架日誌系統完整解析：從 Castle 抽象到 Log4Net/Serilog 實戰與審計日誌</a> <a href='https://code.yunyiwangluo.com/bianchen/aspnetjc/55384.html' target="_blank">ASP.NET 控制項與腳本路徑解析：ResolveUrl 統一處理母版頁、使用者控制項跨目錄引用問題</a> <a href='https://code.yunyiwangluo.com/bianchen/aspnetjc/56108.html' target="_blank">ASP.NET 2.0 頁面輸出快取完整指南：@OutputCache 指令與 HttpCachePolicy 深度解析</a> </div> </div> <div class="eqibneb bg1 mt20"> <div class="lkebxsg">欄目導航</div> <div class="eqibneb_1 ovv_hex"> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/aspnetjc/' target="_self">ASP.NET 基礎</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/gyaspnet/' target="_self">關於ASP.NET</a></li> </div> </div> </div> <div class="qcxs_ie_he"></div> </div> </div> <div class="qcxs_ie_he"></div> <div class="ebrxbsbf">Copyright © <a href="https://code.yunyiwangluo.com/" target="_blank" title="程式碼之家">程式碼之家</a> All Rights Reserved </div> </body> </html>
