bootstrapValidator を使用して UEditor を検証する

私たちのプロジェクトはフロントエンド検証として bootstrapValidator を使用していますが、フォームには UEditor があり、ページのスタイルを統一するには、それを変更する必要があります。

まず、変更されたエフェクトを見てみましょう

上記の UEditor は、ビジネスで調整する必要があるものです。まず、基本的な構造を書き留めましょう。

リーリー

特別な注意として、UEditor の後ろにテキスト ボックスを追加しました。このテキスト ボックスの目的は、UEditor が検証に bootstrapValidator を使用できないため、検証に使用できるテキストを追加します。次に、style="height:0px;border:0px;margin:0px;padding:0px;" で入力を非表示にします。特に注意してください。display:none で非表示にしないと、Hidden とともに検証が機能しません。それ。

もちろん、今は機能しません。ここでテキスト ボックスの内容の検証を追加しましょう

リーリー

試してみますが、うまくいきません。UEditor と隠しテキスト コンテンツがまだ同期されておらず、UEditor にコンテンツを入力すると同期されるはずです。

それでは、UEditor の contentChange イベントで同期するのでしょうか? ?

一見何の問題もないように見えますが、*&%￥などの特殊記号は入力時にcontentChangeイベントを全くトリガーしないことがわかります

もう恥ずかしいので、続けて解決しましょう！

ここでは 2 つの問題を解決する必要があります。1 つは contentChange イベント、特殊シンボルをトリガーできない問題、もう 1 つは割り当てと再検証の問題です。

まず、最初の問題を見てみましょう: 特殊シンボルをトリガーできないということです。まず、UEditor が生成された後にどのようになるかを見てみましょう

。 ここで iframe を見つけました。UEditor のコンテンツはすべてその中に隠されているようです。ここでコンテンツ変更イベントを監視する限り、最初の問題は解決できるはずです。

2 番目の質問があります。コードに直接アクセスしてください

リーリー

ここで値を割り当てた後、bootstrapValidator の updateStatus と validateField メソッドを使用して再検証する必要があります。その後、もう一度試してみましょう

よく見てみると、中には3つの問題があります。1つは境界線の色が変化しないこと、2つ目は右側に√と×のアイコンがないこと、そして3つ目は直接的な問題です。 「保存」をクリックしても検証はトリガーされません。

よし、一つずつ解決していきましょう！まず、境界線の色が変わらないのはなぜでしょうか?実際、非表示のテキスト ボックスを確認しているので、色が変わった場合はそのテキスト ボックスが変化するはずです。

それでは、境界線の色を左側のラベルの色と同じにするために JS を追加します。そのため、UEditor を再検証するたびにコードを追加します

リーリー

2番目の問題は√×表示にすることです。これは少し面倒ですが、ueditor.cssファイルの.edui-default.edui-editorクラスを見つけました。

位置をposition:initialに変更し、UEditorのreadyメソッドのツールバーと同じようにマージントップを調整します

リーリー

最後の問題は、フォームの送信に次のようなコードを追加するだけです

リーリー

最後に、最終的な効果を確認できます。フォームを送信するときに、テキスト ボックスの val() を直接使用できます。 if (UEditor){...最後に、HTML コンテンツ全体を添付します

リーリー

それに使用されるブートストラップ、jquery などを追加することを忘れないでください。もうすぐ中秋節がやってきますので、皆さんが楽しい休暇を過ごせることを祈っています。