用bootstrapValidator來驗證UEditor

来源:http://www.cnblogs.com/ggsmd/archive/2016/09/14/5870136.html
-Advertisement-
Play Games

我們的項目使用了bootstrapValidator來作為前端校驗，但是表單裡面有一個UEditor，它用bootstrapValidator是沒有效果的，為了頁面風格統一，只要修修改改咯 首先來看一下修改後的效果 上面的UEditor是我們的業務需要調整成這樣的，首先我們我們先把基本的結構寫一寫 ...


我們的項目使用了bootstrapValidator來作為前端校驗，但是表單裡面有一個UEditor，它用bootstrapValidator是沒有效果的，為了頁面風格統一，只好修修改改咯

首先來看一下修改後的效果

 

上面的UEditor是我們的業務需要調整成這樣的，首先我們我們先把基本的結構寫一寫

<form style="padding-top:15px;width:100%" id="defaultForm">
        <div class="col-sm-12 form-group">

            <label id="labelId" class="control-label col-sm-1 form-group" style="font-weight:normal;">
　　　　　　　　UEditor測試
　　　　　　　</label>

            <div class="col-sm-11 form-group" id="divId">
                <script id="UEId" type="text/plain"></script>
                <input class="form-control" type="text" id="inputId" name="inputName"
               style="height:0px;border:0px;margin:0px;padding:0px" />
            </div>
        </div>
        <div class="modal-footer col-sm-12">
            <button type="submit" class="btn btn-primary" id="btn_save">保存</button>
        </div>
    </form>

特別註意，我在UEditor後面加了一個文本框，這個文本框的作用就是為了存儲UEditor的內容的，既然你UEditor不能使用bootstrapValidator來做校驗，那我就加一個能用做校驗的文本框唄，然後把input用style="height:0px;border:0px;margin:0px;padding:0px;"這種方式隱藏起來，特別註意的是不能用display:none來隱藏，這樣的話驗證也會隨之一起隱藏起來的。

然後現在自然是不起作用的啦，我們現在加上對文本框內容的驗證就好了吧

 $('#defaultForm').bootstrapValidator({
            message: '驗證未通過',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                inputName: {//所提交的控制項name屬性
                    message: '所提交的數據不能為空',
                    validators: {
                        notEmpty: { //非空提示
                            message: '填寫的數據不能為空'
                        },
                    }
                },
            }
        }).on('success.form.bv', function (e) {          
            e.preventDefault();          
            var $form = $(e.target);
            var bv = $form.data('bootstrapValidator');
            //這裡提交表單
            $.post('address', {
                data: "data"
            }, function (result) {
                alert(result);
            });
        });

試一試，果然不行，因為咱們的UEditor和隱藏的文本內容還沒有同步呢，而且應該在我們在UEditor輸入內容的時候就進行同步！

所以我們就在UEditor的contentChange事件裡面去同步嗎？？

咋一看好像沒什麼問題，但是你會發現，這些按*&%￥之類的特殊符號在輸入的時候根本就不會觸發contentChange事件，

這下子就尷尬了，繼續解決吧！

這裡我們要解決2個問題，一個是contentChange事件，特殊符號無法觸發的問題，還一個賦值，重新驗證的問題。

首先看第一個問題特殊符號無法觸發的問題，先看看UEditor生成之後是什麼樣子的吧

這裡找到了一個iframe，看來UEditor的內容都藏在這裡面了吧，只要監聽這裡面的內容改變事件，就應該可以解決第一個問題了吧

還有第二個問題，直接上代碼

 editor = UE.getEditor("UEId", {
            initialFrameHeight: 40
        }).ready(function () {
            var editor = UE.getEditor("UEId");
            /*找到UEditor的iframe*/   
            var contents = $('#UEId').find('iframe').contents();
            var fn = function () {
                $("#inputId").val(UE.getEditor("UEId").getContent());
                $('#defaultForm').data('bootstrapValidator')//重新驗證inputName
                  .updateStatus('inputName', 'NOT_VALIDATED', null)
                  .validateField('inputName');                      
            }

            if (document.all) {//document.all識別是否在IE下，在IE下為true
                contents.get(0).attachEvent('onpropertychange', function (e) {
                    fn();
                });
            } else {
                contents.on('input', fn);
            }
        });

這裡賦值之後必須 用bootstrapValidator的updateStatus加validateField方法重新驗證一遍，然後我們再試一試吧

仔細看一看，裡面還有三個問題，一個問題是邊框沒有隨著一起變顏色，第二個是右邊沒有√和×的圖標，第三個是直接點保存是不觸發驗證的。

好吧，咱們一個一個來解決！第一個，邊框為什麼沒有變顏色呢？其實很正常，因為我們是對一個隱藏的文本框做的驗證，要變色應該也是那個文本框變吧

好的，那我們就加一段js，讓邊框的顏色和左邊label的顏色一樣就可以了，所以在UEditor的每次重新驗證之後裡加一段代碼

  $($('#UEId div')[0]).css('border-color', $('#labelId').css('color'));

第二個問題，讓√×顯示出來，這個就有點麻煩，一點一點的調樣式，最終發現一個解決辦法，在ueditor.css文件中找到.edui-default .edui-editor這個類

把它的position變為 position: initial;然後在UEditor的ready方法中將它的margin-top調成和工具欄一樣就可以了

  var  margintop = $($('#UEId .edui-editor-toolbarbox')[0]).height();
  $($('#divId i')[0]).css('margin-top', margintop);

最後一個最好解決，在form的submit中加這樣一段代碼就好了

$('#defaultForm').submit(function () {
            $('#defaultForm').data('bootstrapValidator')
　　　　　　　　.updateStatus('inputName', 'NOT_VALIDATED', null)
　　　　　　　　.validateField('inputName');
$($('#UEId div')[0]).css('border-color', $('#labelId').css('color')); 
        })

終於可以看到最終的效果了，而且我們提交表單的時候可以直接拿文本框的val()了，不想要多加一個判斷if(是UEditor){....}了.最終附上整個html的內容

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="Scripts/bootstrap.css" rel="stylesheet" />   
    <link href="bootstrapValidator.min.css" rel="stylesheet" />
    <style>      
        .form-control-feedback {
            margin-right: 10px;
        }       
    </style>
</head>
<body>
    <form style="padding-top:15px;width:100%" id="defaultForm">
        <div class="col-sm-12 form-group">

            <label id="labelId" class="control-label col-sm-1 form-group" style="font-weight:normal;">
　　　　　　　　UEditor測試
　　　　　　</label>
            <div class="col-sm-11 form-group" id="divId">
                <script id="UEId" type="text/plain"></script>
                <input class="form-control" type="text" id="inputId" name="inputName"
　　　　　　　　 style="height:0px;border:0px;margin:0px;padding:0px" />
            </div>
        </div>
        <div class="modal-footer col-sm-12">
            <button type="submit" class="btn btn-primary" id="btn_save">保存</button>
        </div>
    </form>
</body>
</html>
<script src="jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="bootstrapValidator.min.js"></script>
<script src="UEeditor/ueditor.config.js"></script>
<script src="UEeditor/ueditor.all.min.js"></script>
<script src="zh_CN.js"></script>
<script src="UEeditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
    $(function () {    
        editor = UE.getEditor("UEId", {
            initialFrameHeight: 40
        }).ready(function () {
            var editor = UE.getEditor("UEId");
            /*找到UEditor的iframe*/
           var  margintop = $($('#UEId .edui-editor-toolbarbox')[0]).height();
           $($('#divId i')[0]).css('margin-top', margintop);
            var contents = $('#UEId').find('iframe').contents();
            var fn = function () {
                $("#inputId").val(UE.getEditor("UEId").getContent());
                $('#defaultForm').data('bootstrapValidator')//重新驗證inputName
                  .updateStatus('inputName', 'NOT_VALIDATED', null)
                  .validateField('inputName');
               $($('#UEId div')[0]).css('border-color', $('#labelId').css('color'));                
            }

            if (document.all) {//document.all識別是否在IE下，在IE下為true
                contents.get(0).attachEvent('onpropertychange', function (e) {
                    fn();
                });
            } else {
                contents.on('input', fn);
            }
        });

        $('#defaultForm').submit(function () {
            $('#defaultForm').data('bootstrapValidator')
　　　　　　.updateStatus('inputName', 'NOT_VALIDATED', null)
　　　　　　.validateField('inputName');
            $($('#UEId div')[0]).css('border-color', $('#labelId').css('color')); 
        })

        $('#defaultForm').bootstrapValidator({
            message: '驗證未通過',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                inputName: {//所提交的控制項name屬性
                    message: '所提交的數據不能為空',
                    validators: {
                        notEmpty: { //非空提示
                            message: '填寫的數據不能為空'
                        },
                    }
                },
            }
        }).on('success.form.bv', function (e) {          
            e.preventDefault();          
            var $form = $(e.target);
            var bv = $form.data('bootstrapValidator');
            //這裡提交表單
            $.post('address', {
                data: "data"
            }, function (result) {
                alert(result);
            });
        });             
    })
</script>

裡面用到的一些bootstrap，jquery啥的自己記得加上去，另外中秋佳節快要到了，提前祝大家節日快樂！


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • php學習筆記：利用gd庫生成圖片，並實現隨機驗證碼
    說明：一些基本的代碼我都進行了註釋，這裡實現的驗證碼位數、需要用的字元串都可以再設置。有我的註釋，大家應該很容易能看得懂。 基本思路： 1.用mt_rand()隨機生成數字確定需要獲取的字元串，對字元串進行拼接（覺得生成的驗證碼覺得有點太擠，大家可以再字元串中間拼接個空格鍵），實現隨機驗證碼； 備註 ...
  • 【Tarjan】+【SPFA】【APIO2009】Atm
    一、演算法介紹 tarjan——求解有向圖強連通分量。這個演算法在本人的一篇blog中有介紹，這裡就不贅述了。貼上介紹tarjan的的blog鏈接：http://www.cnblogs.com/Maki-Nishikino/p/5866191.html 那麼接下來說說SPFA： SPFA全稱Shorte ...
  • org.hibernate.HibernateException: could not instantiate RegionFactory [org.hibernate.cache.impl.bridge.RegionFactoryCacheProviderBridge]
    org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'sessionFactory' defined in class path resource [beans4.xml]: I ...
  • Java學習筆記之：Java流程式控制制
    一、介紹 Java流程式控制制包括順序控制、條件控制和迴圈控制。 順序控制，就是從頭到尾依次執行每條語句操作。條件控制，基於條件選擇執行語句，比方說，如果條件成立，則執行操作A，或者如果條件成立，則執行操作A，反之則執行操作B。迴圈控制，又稱為迴路控制，根據迴圈初始條件和終結要求，執行迴圈體內的操作。 ...
  • uart串口的調試學習
    用FPGA設計了數據接收和發送模塊，FIFO模塊 用串口調試工具發送數據，數據接收模塊將接收到的串列數據轉換為並行數據（串轉並），並存入FIFO中，當FIFO中的數據個數大於某個值的時候，讀出數據，通過發送模塊將並行數據轉換為串列數據（並轉串），然後就可以在串口調試工具上看到接收到的數據。 註意的點 ...
  • intellij 引入本地庫並war打包
    一、引入本地庫 1、File -> Project Structure -> Libraries，點擊＋，新增本地lib庫。 2、File -> Project Structure -> Modules -> Dependencies，新增Library，選擇第一步創建的lib庫。 二、將本地庫wa ...
  • 從頁面走向單元實現真正的業務驅動
    需求從何而來？對於一個項目來說，應該是從設計需求文檔中而絕不是頁面。之所以說國內的產品經理技術偏低，很大部分因為他們把過多的熱情放在了畫原型的上面。 從頁面走出，實現真正的業務驅動。 PDD 一切以頁面為核心，每個程式員針對每個頁面來找到功能點，從而以頁面為單位進行任務交付。開發未動，頁面先行，這也 ...
  • browserify壓縮合併源碼反編譯
    最近在學習釘釘（一個協作應用）桌面應用的前端源碼時候，發現其js源碼是用browserify做模塊開發。於是想還原其源碼的原本的目錄結構，學習它的目錄分類以及業務劃分。 前言 用過browserify構建工具的應該清楚，在壓縮合併後的代碼的最前面，有處理模塊依賴關係的代碼： 目錄結構解析 我寫了一個 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類