В нашем проекте используется Bootstrapvalidator для проверки передней части, но в форме есть Ueditor. Это не влияет при использовании Bootstrapvalidator. Для стиля Unified Page просто измените и измените его.
Во -первых, давайте посмотрим на модифицированный эффект
Уэдитор выше должен быть скорректирован до этого момента. Во -первых, давайте сначала напишем основную структуру.
<form style="padding-top:15px;width:100%" id="defaultForm"> <div> <label id="labelId" style="font-weight:normal;"> UEditor test</label> <div id="divId"> <script id="UEId" type="text/plain"></script> <input type="text" id="inputId" name="inputName" style = "Высота: 0px; граница: 0px; маржа: 0px; padding: 0px"/> </div> </div> <div> <button type = "Отправить" id = "btn_save"> Сохранить </button> </div> </form>
Обратите особое внимание, я добавил текстовое поле за Ueditor. Цель этого текстового поля состоит в том, чтобы хранить содержание Ueditor. Поскольку ваш Ueditor не может использовать Bootstrapvalidator для проверки, я добавлю текстовое поле, которое можно использовать для проверки, а затем скрыть ввод с помощью Style = "Высота: 0px; граница: 0px; маржа: 0px; padding: 0px;" метод Обратите особое внимание, что его нельзя скрыть с помощью дисплея: нет, поэтому проверка будет скрыта вместе.
Тогда это не сработает сейчас. Давайте теперь добавим проверку контента текстового поля.
$('#defaultForm').bootstrapValidator({ message: 'Verification failed', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { inputName: {// Submitted control name attribute message: «Представленные данные не могут быть пустыми», валидаторы: {notempty: {// Непутые сообщения: «Заполненные данные не могут быть пустыми»},}},}}). On ('success.form.bv', function (e) {e.preventdefault (); var $ form = $ (e.target); $ .post ('Address', {data: "data"}, function (result) {alert (result);});Давайте попробуем, это действительно не работает, потому что наш контент Ueditor и Hidded Text еще не был синхронизирован, и его следует синхронизировать, когда мы вводим контент в Ueditor!
Так мы синхронизируем в событии ContentChange Ueditor? ?
Кажется, что сначала нет проблем, но вы обнаружите, что эти специальные символы, такие как *&%￥, не будут запускать событие ContentChange при вводе.
Сейчас это неловко, давайте продолжим решать это!
Здесь нам нужно решить две проблемы, одна из них-это событие ContentChange, проблема, которую нельзя вызвать специальные символы, а также проблема назначения и повторного подтверждения.
Во -первых, посмотрите на первую проблему, которую нельзя вызвать специальные символы. Давайте сначала посмотрим на то, как выглядит Ueditor после его создания.
Здесь был найден Iframe. Кажется, что содержание Ueditor здесь скрыто. Пока вы слушаете, что контент меняет события, первая проблема должна быть решена.
Есть еще один второй вопрос, просто загрузите код
editor = ue.geteditor ("ueid", {initialFrameHeight: 40}). ready (function () {var editor = ue.geteditor ("ueid"); /* Найти iframe ueditor* / var contents = $ ('#ueid'). $ ("#inputId"). val (ue.geteditor ("ueid"). getContent ()); {//document.Al распознает, является ли он истинной в соответствии с IE и под IE contents.get (0) .attachevent ('OnpropertyChange', function (e) {fn ();});После присвоения мы должны использовать метод Bootstrapvalidator uptrapvalidator, чтобы перевернуть его, а затем попробуем еще раз.
Если вы присмотритесь, есть три проблемы внутри. Одним из них является то, что граница не меняет цвет вместе. Во -вторых, нет иконы с √ и × справа. Третье заключается в том, что сохранение прямой точки не вызывает проверки.
Хорошо, давайте разгадым это один за другим! Во -первых, почему граница не изменила цвет? На самом деле, это нормально, потому что мы проверяем скрытое текстовое поле. Если цвет меняется, это должно быть текстовое поле.
Хорошо, затем мы добавим кусок JS и сделаем цвет границы таким же, как и цвет левой метки, поэтому добавьте кусок кода после каждой повторной проверки Ueditor
$ ($ ('#Ueid div') [0]). CSS ('пограничный цвет', $ ('#labelid'). Css ('color'));
Вторая проблема состоит в том, чтобы позволить √ × отобразить его. Это немного хлопотно. Я отрегулировал стиль немного. Наконец, я нашел решение. Найдите класс .edui-default .edui-editor в файле ueditor.css и измените его позицию на позицию: начальный; Затем отрегулируйте его маржинаторную версию до панели инструментов в готовом методе Ueditor.
var margintop = $ ($ ('#ueid .edui-editor-toolbarbox') [0]). Height ();
$ ($ ('#Divid I') [0]). CSS ('Margin-Top', Margintop);
Последний лучше всего решен, просто добавьте такой кусок кода, чтобы сформировать отправку
$ ('#defaultform'). Recod (function () {$ ('#defaultform'). Data ('bootstrapvalidator') .updateStatus ('inputName', 'not_validated', null) .validatefield ('input-name'); $ ($ 'ueid div') [0]). $ ('#labelid'). css ('color'));Наконец, мы можем увидеть окончательный эффект, и когда мы отправим форму, мы можем напрямую взять Val () текстового поля, и мы не хотим добавлять дополнительное суждение, если (это 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 hreftstrs = "scripstrstrstrstrststr; 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> <label id = "labelid" style = "font-weight: normal;"> test ueditor </label> <div = "divid"> <scipt id = "ueid" type = "text/plain"> </script> "</script>" </script> "</script>" </script> "</script>" </script> "</script>" </script> "</script>". id = "inputId" name = "inputName" style = "height: 0px; граница: 0px; маржа: 0px; padding: 0px"/> </div> </div> <div> <button type = "pospe" id = "btn_save"> Сохранить </button> </div> </form> </body> </html> 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. 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"> $ () {editor> <script = "javascript"> $ () {editor = editor = editor = editor = editor = " Ue.geteditor ("ueid", {initialFrameHeight: 40}). Ready (function () {var editor = ue.geteditor ("ueid"); /*Нахождение iframe ueditor* / var margintop = $ ($ ('#ueid .edui-editor-toolbarbox') [0]) i ') [0]). CSS (' Margin-Top ', Margintop); $ ('#defaultform'). Data ('bootstrapvalidator') // revalidate inputname .updatestatus ('inputname', 'not_validated', null) .validate ('inputname'); if (document.all) {//document.all распознает, является ли он истинным в соответствии с IE и IE Contents.get (0) .attachevent ('OnpropertyChange', function (e) {fn ();}); $ ('#defaultform'). Data ('bootstrapvalidator') .updateStatus ('inputName', 'not_validated', null) .validate ('inputname'); $ ('#defaultform'). Bootstrapvalidator ({Сообщение: «Проверка проверка», отзывы: {valid: 'glyphicon glyphicon-ok', Invalid: 'Glyphicon Glyphicon-remove', valligation: 'Glyphicon Glyphicon-refresh'}, fields: {introme: {attromble: {attromble: {attromble: {attromble: {// attrombe: Представленные данные не могут быть пустыми ', валидаторы: {notempty: {// Непутые сообщения: «Заполненные данные не могут быть пустыми'},}},}}). On ('success.form.bv', function (e) {e.preventdefault (); var $ form = $ (e.target); $ .post ('Address', {data: "data"}, function (result) {alert (result);});Не забудьте добавить некоторые начальные загрузки и jQuery к тем, которые вы используете.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.