Nuestro proyecto utiliza BootstraPvalidator para la verificación frontal, pero hay un editor en la forma. No tiene efecto al usar bootstrapvalidator. En aras del estilo de página unificado, simplemente modifíquelo y modifíquelo.
Primero, echemos un vistazo al efecto modificado
El UEDITOR anterior debe ajustarse a este punto. Primero, escribamos primero la estructura básica.
<Form style = "Padding-top: 15px; Width: 100%" id = "DefaultForm"> <div> <etiqueta id = "etiquetido" style = "font-weight: normal;"> test editor </label> <div id = "divid"> <script id = "ueid" type = "text/sencillo"> </script> <input type = "text" id = "inputid" name = "inputName" inputName " style = "Height: 0px; border: 0px; margen: 0px; relleno: 0px"/> </div> </div> <div> <button type = "shipt" id = "btn_save"> guardar </boton> </div> </form>
Preste especial atención, agregué un cuadro de texto detrás del UEDITOR. El propósito de este cuadro de texto es almacenar el contenido del UEDitor. Dado que su ueditor no puede usar bootstraPvalidator para la verificación, agregaré un cuadro de texto que se puede usar para la verificación y luego ocultaré la entrada usando estilo = "altura: 0px; borde: 0px; margen: 0px; relleno: 0px;" método. Preste especial atención a que no se puede ocultar con la pantalla: ninguno, por lo que la verificación se ocultará juntas.
Entonces no funcionará ahora. Agreguemos la verificación del contenido del cuadro de texto ahora.
$ ('##defaultForm'). BootStraPValidator ({Message: 'Verificación fallida', fownlesicons: {válido: 'glyphicon glyphiCon-ok', invalid: 'glyphicon glyphicon-remove', validación: 'glyphicon glyphicon-refresh'}, Fields: {{InputName: {//////////////ssopt: 'name: name:' name: 'name: name:' name: name: name: name: name: 'name:' name: name: name: name: name: 'name: name: name: name: name: name:' name: name: 'name: name: name: name: name: name: name: name:' name: name: name: name: name: 'name meteS Los datos no pueden estar vacíos ', Validadores: {noTempty: {// Mensaje no atractivo:' Los datos completados no pueden estar vacíos '},}},}}). on (' success.form.bv ', function (e) {e.preventDefault (); var $ form = $ (e.Target); var bv = $ form.data (' bootstrapvalidator '; $ .post ('dirección', {data: "data"}, function (resultado) {alerta (resultado);});Vamos a intentarlo, realmente no funciona, porque nuestro contenido de UEDitor y de texto oculto aún no se han sincronizado, ¡y debe sincronizarse cuando ingresamos el contenido en el UEDITOR!
Entonces, ¿sincronizamos en el evento ContentChange de UEDitor? ?
Parece que al principio no hay problema, pero encontrará que estos símbolos especiales como *&%￥ no activarán el evento de cambio de contenido al ingresar.
Es vergonzoso ahora, ¡continuemos resolviéndolo!
Aquí necesitamos resolver dos problemas, uno es el evento ContentChange, el problema de que los símbolos especiales no pueden activarse y el problema de la asignación y la reverificación.
Primero, mire el primer problema de que los símbolos especiales no se pueden activar. Primero veamos cómo se ve UEDITOR después de que se genera.
Se encontró un iframe aquí. Parece que el contenido de Ueditor está oculto aquí. Mientras escuche el contenido cambia de eventos, el primer problema debe resolverse.
Hay otra segunda pregunta, solo sube el código
editor = Ue.geteditor ("Ueid", {InitialFrameHeight: 40}). Ready (function () {var editor = Ue.geteditor ("Ueid"); /* Buscar el iFrame de UEDITOR* / var contents = $ ('#ueid'). Find ('ifRame'). Contents (); var fn = function () {{) $ ("#inputid"). Val (UE.GetEditor ("UEID"). GetContent ()); {//Document.ly reconoce si es verdadero en IE y en IE Contents.get (0) .attacheVent ('onPropertychange', function (e) {fn ();})Después de la asignación, debemos usar el método UpdateTatus y ValidateField de BootstraPvalidator para volver a verificarlo, y luego intentemos nuevamente.
Si miras de cerca, hay tres problemas dentro. Una es que el borde no cambia de color. El segundo es que no hay ícono con √ y × a la derecha. El tercero es que el punto de salvamento directo no desencadena la verificación.
Ok, ¡Resolvamos uno por uno! Primero, ¿por qué el borde no cambió de color? En realidad, es normal, porque estamos verificando un cuadro de texto oculto. Si el color cambia, debe ser el cuadro de texto.
Ok, luego agregaremos un pedazo de JS y haremos que el color del borde sea el mismo que el color de la etiqueta izquierda, así que agregue un código después de cada reverificación de UEDITOR
$ ($ ('#Ueid Div') [0]). CSS ('Border-Color', $ ('#Labelid'). CSS ('Color'));
El segundo problema es dejar que √ × mostrarlo. Esto es un poco problemático. Ajusté el estilo bit a poco. Finalmente, encontré una solución. Encuentre la clase .edui-default .Edui-editor en el archivo UEDITOR.CSS y cambie su posición a la posición: inicial; Luego ajuste su margen de margen a la misma que la barra de herramientas en el método listo de UEDITOR.
var margintop = $ ($ ('#Ueid .Edui-editor-toolbarbox') [0]). Height ();
$ ($ ('#Divid I') [0]). CSS ('Margin-top', margintop);
El último se resuelve mejor, solo agregue un código así para formar envío
$ ('#defaultForm'). Subt (function () {$ ('##DefaultForm'). Data ('BootStraPValidator') .UpDateStatus ('InputName', 'Not_Validated', NULL) .ValidEfield ('InputName'); $ ($ ('#UEID div') [0]). $ ('#Labelid'). CSS ('Color'));Finalmente, podemos ver el efecto final, y cuando enviamos el formulario, podemos tomar directamente el val () del cuadro de texto, y no queremos agregar un juicio adicional si (es UEDITOR) {....}. Finalmente, se adjunta todo el contenido 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> <formul style = "padding-top: 15px; width: 100%" id = "defaultForm"> <div> <etiqueta id = "etiquetido" style = "font-weight: normal;"> test </etiqueta> <diD = "Divid"> <script id = "ueid" type = "text/script"> </script> <input type = "text" Id "Id" Id "Id" Id "Id =" Tying "Id =" Tying "Id. name = "inputName" style = "Height: 0px; border: 0px; margin: 0px; relleno: 0px"/> </div> </div> <div> <button type = "enviar" id = "btn_save"> guardar </botón> </div> </form> </body> </html> <script <cript src = "jQuery-1.9.1.min.js"> </script> <script src = "scripts/bootstrap.min.js"> </script> <script src = "bootstraPvalidator.min.js"> </script> <script src = "ueditor/ueditor.cig.js"> </script> <script> <script> <script> <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 () {ue.peteditor (",", "", "", ",", ",", ",", ",", "," ",", "", "", "", "", "", "", ",", ",", "", "", ",", ",", ", editor (". InitialFrameHeight: 40}). Ready (function () {var editor = Ue.geteditor ("Ueid"); /*Encontrar el iframe de UEDITOR* / var margintop = $ ($ ('#ueid .Edui-EDITORT-ToolBarbox') [0]). Height (); $ ($ ('#Divid I') [0]). margintop); .UpDateStatus ('InputName', 'Not_Validated', NULL) .ValidateField ('InputName'); Contents.get (0) .attacheVent ('onPropertychange', function (e) {fn ();}); 'Not_Validated', null) .ValidateField ('inputName'); glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { inputName: {// Submitted control name attribute message: 'The submitted data cannot be empty', validators: { notEmpty: { // Non-empty message: 'The filled-in data cannot be empty' }, } }, }}.Recuerde agregar algunos bootstraps y jQuery a los que usa.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.