Proyek kami menggunakan bootstrapvalidator untuk verifikasi front-end, tetapi ada ueditor dalam formulir. Ini tidak berpengaruh saat menggunakan bootstrapvalidator. Demi gaya halaman terpadu, cukup ubah dan ubah.
Pertama, mari kita lihat efek yang dimodifikasi
Ueditor di atas perlu disesuaikan dengan titik ini. Pertama, mari kita tulis struktur dasar terlebih dahulu.
<Form style = "Padding-Top: 15px; Lebar: 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 "iD =" input = "input =" input "input" input "input =" input "input =" input "input =" input = "input" input = "input" input = "Input" uEid " style = "Tinggi: 0px; Border: 0px; margin: 0px; padding: 0px"/> </div> </div> <vect typeT = "kirim" id = "btn_save"> simpan </button> </div> </form>
Berikan perhatian khusus, saya menambahkan kotak teks di belakang Ueditor. Tujuan dari kotak teks ini adalah untuk menyimpan konten ueditor. Karena ueditor Anda tidak dapat menggunakan bootstrapvalidator untuk verifikasi, saya akan menambahkan kotak teks yang dapat digunakan untuk verifikasi, dan kemudian menyembunyikan input menggunakan style = "Tinggi: 0px; border: 0px; margin: 0px; padding: 0px;" metode. Berikan perhatian khusus yang tidak dapat disembunyikan dengan tampilan: tidak ada, sehingga verifikasi akan disembunyikan bersama.
Maka itu tidak akan berhasil sekarang. Mari kita tambahkan verifikasi konten kotak teks sekarang.
$ ('#DefaultForm'). BootstrapValidator ({pesan: 'Verifikasi Gagal', umpan balik: {valid: 'Glyphicon Glyphicon-Ok', tidak valid: 'Glyphicon Glyphicon-remove', Validasi: 'Glyphicon glyphicon-refresh', {Glyphicon Glyphicon-refresh '{Glyphicon {Glyphicon-reficon' {Glyphicon {glyphicon '{Glyphicon {glyphicon' {glyphicon '{glyphicon' {glyphicon ' 'Data yang dikirim tidak dapat kosong', validator: {notempty: {// pesan non-kosong: 'Data yang diisi tidak dapat kosong'},}},}}). On ('Success.bv.bv', function (e) {e.preventdefault (); var $ form = $ (e.target); var bv = $ form (boots (); var $ form = $ (e.target); var bv = $ form (BOOT (); BOOT (E.TARGET); var bv = $ {bV = $ (boots); var $ form = $ (e.target); var bv = $ $ {bv = bvait (’bV = $ $ .post ('alamat', {data: "data"}, function (hasil) {waspada (hasil);});Mari kita coba, itu benar -benar tidak berhasil, karena ueditor kami dan konten teks tersembunyi belum disinkronkan, dan itu harus disinkronkan ketika kami memasukkan konten di ueditor!
Jadi, apakah kita menyinkronkan dalam acara Contentchange dari Ueditor? ?
Tampaknya tidak ada masalah pada awalnya, tetapi Anda akan menemukan bahwa simbol -simbol khusus ini seperti *&%￥ tidak akan memicu acara Contentchange saat memasukkan.
Ini memalukan sekarang, mari kita terus menyelesaikannya!
Di sini kita perlu menyelesaikan dua masalah, satu adalah peristiwa Contentchange, masalah yang tidak dapat dipicu oleh simbol khusus, dan masalah penugasan dan verifikasi ulang.
Pertama, lihat masalah pertama yang tidak dapat dipicu oleh simbol khusus. Pertama -tama mari kita lihat seperti apa bentuk Ueditor setelah dihasilkan.
Sebuah iframe ditemukan di sini. Tampaknya isi Ueditor disembunyikan di sini. Selama Anda mendengarkan acara perubahan konten di dalamnya, masalah pertama harus diselesaikan.
Ada pertanyaan kedua lagi, cukup unggah kode
editor = ue.getEditor ("ueid", {initialframeHeight: 40}). siap (function () {var editor = ue.getEditor ("ueid"); /* temukan iframe ueditor* / var contents = $ ('#ueid'). find ('iframe'). $ ("#inputid"). Val (ue.geteditor ("UEID"). GetContent ()); {//document.all mengakui apakah itu benar di bawah IE dan di bawah IE Contents.get (0) .AttachEvent ('OnpropertyChange', Function (e) {fn ();});Setelah penugasan, kita harus menggunakan metode UpdateStatus dan ValidateField dari BootstrapValidator untuk memverifikasi ulang, dan kemudian mari kita coba lagi.
Jika Anda melihat lebih dekat, ada tiga masalah di dalamnya. Salah satunya adalah perbatasan tidak berubah warna bersama. Yang kedua adalah tidak ada ikon dengan √ dan × di sebelah kanan. Yang ketiga adalah bahwa save poin langsung tidak memicu verifikasi.
Oke, mari kita selesaikan satu per satu! Pertama, mengapa perbatasan tidak berubah warna? Sebenarnya, itu normal, karena kami memverifikasi kotak teks tersembunyi. Jika warnanya berubah, itu harus menjadi kotak teks.
Oke, maka kita akan menambahkan sepotong JS dan membuat warna perbatasan sama dengan warna label kiri, jadi tambahkan sepotong kode setelah setiap verifikasi ulang ueditor
$ ($ ('#Ueid div') [0]). CSS ('Border-color', $ ('#labelID'). CSS ('Color'));
Masalah kedua adalah membiarkan √ × menampilkannya. Ini agak merepotkan. Saya menyesuaikan gayanya sedikit demi sedikit. Akhirnya, saya menemukan solusi. Temukan kelas .edui-default .edui-Editor di file ueditor.css dan ubah posisinya ke posisi: inisial; Kemudian sesuaikan margin-topnya yang sama dengan toolbar dalam metode siap ueditor.
var margintop = $ ($ ('#ueid .edui-editor-toolbarbox') [0]). Height ();
$ ($ ('#divid i') [0]). CSS ('margin-top', margintop);
Yang terakhir paling baik diselesaikan, cukup tambahkan sepotong kode untuk membentuk kiriman
$ ('#defaultForm'). Kirim (function () {$ ('#defaultForm'). Data ('bootstrapValidator') .upDatestatus ('inputName', 'not_validated', null) .validatefield ('inputName'); $ ($ ('#ueid'). $ ('#labelID'). CSS ('Color'));Akhirnya, kita dapat melihat efek akhir, dan ketika kita mengirimkan formulir, kita dapat secara langsung mengambil Val () dari kotak teks, dan kita tidak ingin menambahkan penilaian tambahan jika (itu UEDITOR) {....}. Akhirnya, seluruh konten HTML terlampir
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content" content = "text/html; charset = UTF-8"/<ity-type "title>" Text/html; charset = UTF-8 "/<title> title> title> title" html; rel = "stylesheet" /> <link href = "bootstrapvalidator.min.css" rel = "stylesheet" /> <tyle> .Form-control-beedback {margin-right: 10px; } </style></head><body> <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 = "Tinggi: 0px; Border: 0px; margin: 0px; padding: 0px"/> </div> </div> <v> <typute type = "kirim" id = "btn_save"> simpan </buttpon> </div> </bentuk> </body> </html> </body src = "jQuery-1..9.1.min.js"> </script> <script src = "Scripts/bootstrap.min.js"> </script> <script src = "bootstrapvalidator.min.js"> </script> <cript> <cript/script = "ueeditor/ueditor.config.config.config.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 = "teks/javascript"> $ ("{" {"{" {"> {u-cn"> {u-cn "> InitialFrameHeight: 40}). Ready (function () {var editor = ue.getEditor ("ueid"); /*menemukan iframe dari ueditor* / var margintop = $ ($ ('#ueid .edui-editor-toolbarbox') [0]). Tinggi (); $ ($ ('#', '') [0]. Margintop); .updatestatus ('inputName', 'not_valided', null) .validatefield ('inputName'); Content.get (0) .AttachEvent ('OnPropertyChange', Function (E) {fn ();}); .updatestatus ('inputName', 'not_valided', null) .validatefield ('inputName'); Gagal ', umpan balik: {valid:' Glyphicon glyphicon-ok ', tidak valid:' Glyphicon glyphicon-remove ', memvalidasi:' glyphicon glyphicon-refresh '}, {inputname', {// tidak ada {non-{non-{non-{non-{non-{{non-{{non-{/ {non-{{{{{{inpon {/ {{{/ {{/ {{/ {{/ {{/ {/ {{/ {/ {{/ {/ {/ {{{/ {{{/ { Pesan: 'Data yang diisi tidak dapat kosong'},}},}}). On ('Success.Form.bv', fungsi (e) {e.preventDefault (); var $ form = $ (e.target); var bv = $ form.data ('bootstrapvalidator'); // kirimkan form $. peringatan (hasil);});Ingatlah untuk menambahkan beberapa bootstrap dan jQuery ke yang Anda gunakan.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.