私たちのプロジェクトは、フロントエンド検証にBootstrapValidatorを使用していますが、フォームにはueditorがあります。 BootStrapValidatorを使用する場合、それは効果がありません。統一されたページスタイルのために、変更して変更するだけです。
まず、修正された効果を見てみましょう
上記のueditorは、この時点まで調整する必要があります。まず、最初に基本構造を書きましょう。
<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 = "height：0px; border：0px; margin：0px; padding：0px"/> </div> </div> <div> <button type = "Id" id "btn_save"> save </button> </div> </form> </form>
特に注意して、Ueditorの後ろにテキストボックスを追加しました。このテキストボックスの目的は、ueditorのコンテンツを保存することです。 ueditorは検証にBootstrapvalidatorを使用できないため、検証に使用できるテキストボックスを追加し、style = "height：0px; border：0px; margin：0px; padding：0px;"を使用して入力を非表示にします。方法。ディスプレイで隠すことはできないことに特に注意してください。なしでは、検証は一緒に隠されます。
その後、今は機能しません。今すぐテキストボックスコンテンツの検証を追加しましょう。
$（ '＃defaultform'）。bootstrapvalidator（{message： 'verification failed'、feedbackicons：{valid： 'glyphicon glyphicon-ok'、novalid： 'glyphicon glyphicon-remove'、 'glyphicon glyphicon-refresh'}、controls controls：{{inputname：{{bidectname：{{subm subms：{ 「提出されたデータは空にすることはできません」、VALIDATERS：{notempty：{// nonempty message： 'fill in data in filed in ve'}、}、}、}}）。 $ .post（ 'address'、{data： "data"}、function（result）{alert（result）;}）;試してみましょう。ueditorと非表示のテキストコンテンツはまだ同期されていないため、実際には機能しません。ueditorでコンテンツを入力するときに同期する必要があります。
それでは、UeditorのContentChangeイベントで同期しますか？ ？
最初は問題はないようですが、 *＆％￥などのこれらの特別なシンボルは、入力時にContentChangeイベントをトリガーしないことがわかります。
今は恥ずかしいです、それを解決し続けましょう！
ここでは、2つの問題を解決する必要があります。1つはContentchangeイベント、特別なシンボルをトリガーできない問題、および割り当てと再検証の問題です。
まず、特別なシンボルをトリガーできない最初の問題を見てください。まず、Ueditorが生成された後の様子を見てみましょう。
ここでIFRAMEが見つかりました。 ueditorの内容はここに隠されているようです。コンテンツの変更イベントを聞いている限り、最初の問題を解決する必要があります。
別の2番目の質問があり、コードをアップロードするだけです
editor = ue.geteditor（ "ueid"、{initialframeheight：40}）。 $（ "＃inputId"） IEおよびIE Contents.get.Attachevent（ 'onpropertychange'、{fn（）;}）の下で真実であるかどうかを認識します。割り当て後、BootStrapValidatorのUpdateStatusとValidateFieldメソッドを使用して再確認する必要があります。次に、もう一度やり直してみてください。
よく見ると、内部には3つの問題があります。 1つは、境界線が一緒に色を変えないということです。 2つ目は、右側に√と×を持つアイコンがないことです。 3番目は、直接ポイント保存が検証をトリガーしないことです。
わかりました、それを一つずつ解決しましょう！まず、なぜボーダーは色を変えなかったのですか？実際には、非表示のテキストボックスを確認しているため、それは正常です。色が変更された場合、テキストボックスにする必要があります。
さて、JSの一部を追加して、左のラベルの色と同じボーダー色を作成するので、Ueditorの再検証のたびにコードを追加します
$（$（ '＃ueid div'）[0]）
2番目の問題は、√×表示することです。これは少し面倒です。スタイルを少し調整しました。最後に、解決策を見つけました。 ueditor.cssファイルで.edui-default .edui-editorクラスを見つけ、その位置を位置に変更します。次に、ueditorの準備ができた方法で、そのマージントップをツールバーと同じに調整します。
var margintop = $（$（ '＃ueid .edui-editor-toolbarbox'）[0]）。heigh（）;
$（$（ '＃divid i'）[0]）。css（ 'margin-top'、margintop）;
最後のものは最適です。そのようなコードを追加して送信するだけです
$（ '＃defaultform'） $（ '＃labelid'）。css（ 'color'））;
最後に、最終的な効果を見ることができ、フォームを送信すると、テキストボックスのval（）を直接取得できます。最後に、HTMLコンテンツ全体が添付されています
<！Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <titl> <titl </<title> <relink> <link> </title> 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" stiled = "font-weight：normal;"> ueditor test </label> <div id = "divid"> <script id = "ueid"タイプ= ""> plain ">"> < name = "inputname" style = "height：0px; border：0px; margin：0px; padding：0px"/> </div> </div> <div> <buttonタイプ= "id =" btn_save "> save </button> </div> </form> </body> </html> <src =" jquery-1.. src = "scripts/bootstrap.min.js"> </script> <script src = "bootstrapvalidator.min.js"> </scrip> <script src = "ueeditor/ueditor.js"> </script> <script src = "ueeditor/ueeditor.all.al.jin.js"> < src = "zh_cn.js"> </script> <script src = "ueeditor/lang/zh-cn/zh-cn.js"> </script> <script type = "text/javascript"> $（）{editor = ue.geteditor（ "ueid"、{icerviertframeheight：40}）。 ue.geteditor（ "Ueid"）; $（ '＃ueid'）。find（ 'iframe'）。 null）.validatefield（ 'inputname'）; $（ '＃ueid div'）[0]）。 （e）{fn（）; $（$（ '＃ueid div'）[0]）。 Glyphicon-Remove '、検証：「Glyphicon Glyphicon-refresh'}、fields：{//送信コントロール名属性メッセージ：「送信されたデータは空にすることはできません」、バリデーター：{//非emptyメッセージ： 'ferement in emant " （e）{e.preventdefault（）;使用しているものにブートストラップとjQueryを追加することを忘れないでください。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。