Notre projet utilise BootstrapValidator pour la vérification frontale, mais il y a un UEditor dans la forme. Il n'a aucun effet lors de l'utilisation de bootstrapvalidator. Pour le plaisir du style de page unifié, modifiez-le et modifiez-le.
Tout d'abord, jetons un coup d'œil à l'effet modifié
L'Udiditor ci-dessus doit être ajusté à ce point. Tout d'abord, écrivons d'abord la structure de base.
<form style = "padding-top: 15px; width: 100%" id = "defaultform"> <div> <label id = "labid" style = "font-weight: normal;"> ueditor test </ labe> <div id = "divid"> <script id = "ueid" type = "text / plain"> </ script> <entrée type = "text" id = "intridId" name = "putname" style = "hauteur: 0px; bordure: 0px; margin: 0px; padding: 0px" /> </div> </div> <v> <bouton type = "soumi" id = "btn_save"> Enregistrer </ bouton> </v> </orm>
Portez une attention particulière, j'ai ajouté une zone de texte derrière l'UEditor. Le but de cette zone de texte est de stocker le contenu de l'UEditor. Étant donné que votre UEditor ne peut pas utiliser BootstrapValidator pour la vérification, j'ajouterai une zone de texte qui peut être utilisée pour la vérification, puis masquer l'entrée à l'aide de style = "Height: 0px; bordure: 0px; marge: 0px; padding: 0px;" méthode. Portez une attention particulière qu'elle ne peut pas être cachée avec l'affichage: aucun, donc la vérification sera cachée ensemble.
Ensuite, cela ne fonctionnera pas maintenant. Ajoutons maintenant la vérification du contenu de la zone de texte.
$ ('# defaultform'). BootstrapValidator ({message: 'Verification Faiched', FeedsoIcons: {valid: 'Glyphicon Glyphicon-ok', invalide: 'Glyphicon Glyphicon-Remove' 'Données soumises ne peuvent pas être vides', validateurs: {{Nothempty: {// Message non empty: 'Les données remplies ne peuvent pas être vides'},}},}}). Sur ('success le formulaire $ .post ('adresse', {data: "data"}, fonction (result) {alert (result);});});Essayons-le, cela ne fonctionne vraiment pas, car notre contenu UEditor et Text Hidden n'a pas encore été synchronisé, et il devrait être synchronisé lorsque nous entrons le contenu dans l'UEditor!
Alors, synchronisons-nous dans l'événement Contentchange d'Ueditor? ?
Il semble qu'il n'y ait pas de problème au début, mais vous constaterez que ces symboles spéciaux tels que * &% ￥ ne déclencheront pas l'événement ContentChange lors de la saisie.
C'est gênant maintenant, continuons à le résoudre!
Ici, nous devons résoudre deux problèmes, l'un est l'événement de contenuchange, le problème que les symboles spéciaux ne peuvent pas être déclenchés et le problème de l'attribution et de la récification.
Tout d'abord, regardez le premier problème que les symboles spéciaux ne peuvent pas être déclenchés. Voyons d'abord à quoi ressemble UEditor après sa génération.
Un iframe a été trouvé ici. Il semble que le contenu d'Ueditor soit caché ici. Tant que vous écoutez l'événement de changement de contenu, le premier problème doit être résolu.
Il y a une autre deuxième question, il suffit de télécharger le code
éditor = ue.getEditor ("ueid", {initialFrameHeight: 40}). Ready (function () {var editor = ue.getEditor ("ueid"); / * trouver l'Iframe de uEditor * / var Contents = $ ('# ueid'). Rechercher (iframe '). Contents (); var fn = fonction () {) $ (# inputId "). Val (ue.getEditor (" ueid "). getContent ()); $ ('# defaultform'). {//Document.all reconnaît si elle est vraie sous IE et sous IE Contents.get (0) .Attachevent ('OnProperTyChange', fonction (e) {fn ();});Après l'attribution, nous devons utiliser la méthode UpdateStatus et validerField de bootstrapvalidator pour la revifier, puis réessayons.
Si vous regardez attentivement, il y a trois problèmes à l'intérieur. La première est que la bordure ne change pas de couleur ensemble. La seconde est qu'il n'y a pas d'icône avec √ et × à droite. Le troisième est que la sauvegarde directe ne déclenche pas la vérification.
Ok, résolvons-le un par un! Premièrement, pourquoi la frontière n'a-t-elle pas changé de couleur? En fait, c'est normal, car nous vérifions une zone de texte cachée. Si la couleur change, ce devrait être la zone de texte.
OK, alors nous ajouterons un morceau de JS et ferons la couleur de la bordure de la couleur de gauche, alors ajoutez un morceau de code après chaque ré-ré-réditeur
$ ($ ('# Ueid div') [0]). CSS ('Border-Color', $ ('# LabelId'). CSS ('Color'));
Le deuxième problème est de laisser √ × l'afficher. C'est un peu gênant. J'ai ajusté le style petit à petit. Enfin, j'ai trouvé une solution. Trouvez la classe .edui-default .edi-Editor dans le fichier ueditor.css et modifiez sa position en position: Initial; Ajustez ensuite sa marge de marge à la même chose que la barre d'outils dans la méthode Ready d'Ueditor.
var margintop = $ ($ ('# ueid .edui-editor-toolbarbox') [0]). hight ();
$ ($ ('# divid i') [0]). css ('margin-top', margintop);
Le dernier est mieux résolu, il suffit d'ajouter un tel morceau de code pour former
$ ('# defaultform'). soumets (function () {$ ('# defaultform'). Data ('bootstrapvalidator') .updatestatus ('inputName', 'not_validated', null) .validafield ('inputName'); $ ($ ('# ueid div') [0]). $ ('# label'). CSS ('Color'));Enfin, nous pouvons voir l'effet final, et lorsque nous soumettons le formulaire, nous pouvons dire directement le val () de la zone de texte, et nous ne voulons pas ajouter un jugement supplémentaire si (c'est UEditor) {....}. Enfin, l'intégralité du contenu HTML est attaché
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <éad> <meta http-equiv = "contenu-type" contenu = "text / html; chasset = utf-8" /> <title> </ title> href = "scripts / bootstrap.css" rel = "Stylesheet" /> <link href = "bootstrapvalidator.min.css" rel = "Stylesheet" /> <style> .form-control-feedback {margin-right: 10px; } </ style> </ head> <body> <formy style = "padding-top: 15px; width: 100%" id = "defaultform"> <div> <label id = "labid" style = "font-weight: normal;"> ueditor test </ label> <divis id = "divid"> <script id = "ueid" type = "text / plain"> </priming> name = "inputName" style = "height: 0px; border: 0px; margin: 0px; padding: 0px" /> </div> </div> <div> <bouton type = "soumi" id = "btn_save"> Save </ Button> </div> </ Form> </body> </html> <script> </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 = "uedetor / 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.getorDit InitialFrameHeight: 40}). Ready (function () {var editor = ue.getEditor ("ueid"); / * trouver l'iframe d'Ueditor * / var margintop = $ ($ ('# ueid .edi-editor-toolbarbox') [0]). var contente = $ ('# ueid'). Rechercher ('iframe'). Contents (); 'Not_validated', null) .validaField ('inputName'); $ ($ ('# ueid div') [0]). contenu.get (0) .Attachevent ('onProperTyChange', fonction (e) {fn ();}); 'Not_validated', null) .validaField ('inputName'); $ ($ ('# ueid div') [0]). Glyphicon-ok ', invalide:' Glyphicon Glyphicon-Remove ', validant:' Glyphicon Glyphicon-Refresh '}, Fields: {InputName: {// Message d'attribut de contrôle soumis: `` Les données soumises ne peuvent pas être vides' ', les validateurs: {notempty: {// non empty messages: `` Les données vides: «NotEmmpty: {// non empty Message:« Les données remplies: «Nothempty: {// non-décompte }},}}). sur ('successez.form.bv', fonction (e) {e.PreventDefault (); var $ form = $ (e.target); var bv = $ form.data ('bootstrapvalidator'); // soumettre le formulaire $ .post ('adresse', {data: data "}, fonction (résultat) {alert);}); }) </script>N'oubliez pas d'ajouter des bootstraps et jquery à ceux que vous utilisez.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.