Verwenden Sie BootstrapValidator, um UEditor zu überprüfen-HTML-Tutorial-php.cn

Unser Projekt verwendet BootstrapValidator als Front-End-Überprüfung, aber die Verwendung von BootstrapValidator hat keine Auswirkung. Um den Seitenstil zu vereinheitlichen, müssen wir ihn ändern

Werfen wir zunächst einen Blick auf den veränderten Effekt

Der obige UEditor ist das, was unser Unternehmen anpassen muss. Schreiben wir zunächst die Grundstruktur auf

<span style="color: #0000ff;"><</span><span style="color: #800000;">form </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="padding-top:15px;width:100%"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="defaultForm"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-sm-12 form-group"</span><span style="color: #0000ff;">></span>

            <span style="color: #0000ff;"><</span><span style="color: #800000;">label </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="labelId"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="control-label col-sm-1 form-group"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="font-weight:normal;"</span><span style="color: #0000ff;">><br></span>　　　　　　　　UEditor测试<br><span style="color: #0000ff;">　　　　　　　</</span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>

            <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-sm-11 form-group"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="divId"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="UEId"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/plain"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="form-control"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="inputId"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="inputName"<br /></span><span style="color: #ff0000;">               style</span><span style="color: #0000ff;">="height:0px;border:0px;margin:0px;padding:0px"</span> <span style="color: #0000ff;">/></span>
            <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="modal-footer col-sm-12"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">button </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="btn btn-primary"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="btn_save"</span><span style="color: #0000ff;">></span>保存<span style="color: #0000ff;"></</span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span>

Nach dem Login kopieren

Besonderer Hinweis: Ich habe hinter UEditor ein Textfeld hinzugefügt, um den Inhalt von UEditor zu speichern Box und blenden Sie die Eingabe dann mit style="height:0px;border:0px;margin:0px;padding:0px;" aus. Achten Sie besonders darauf, dass Sie sie nicht mit display:none ausblenden können Es wird auch zusammen ausgeblendet.

Natürlich funktioniert es jetzt nicht. Fügen wir einfach eine Überprüfung für den Inhalt des Textfelds hinzu

 $('#defaultForm'<span style="color: #000000;">).bootstrapValidator({
            message: </span>'验证未通过'<span style="color: #000000;">,
            feedbackIcons: {
                valid: </span>'glyphicon glyphicon-ok'<span style="color: #000000;">,
                invalid: </span>'glyphicon glyphicon-remove'<span style="color: #000000;">,
                validating: </span>'glyphicon glyphicon-refresh'<span style="color: #000000;">
            },
            fields: {
                inputName: {</span><span style="color: #008000;">//</span><span style="color: #008000;">所提交的控件name属性</span>
                    message: '所提交的数据不能为空'<span style="color: #000000;">,
                    validators: {
                        notEmpty: { </span><span style="color: #008000;">//</span><span style="color: #008000;">非空提示</span>
                            message: '填写的数据不能为空'<span style="color: #000000;">
                        },
                    }
                },
            }
        }).on(</span>'success.form.bv', <span style="color: #0000ff;">function</span><span style="color: #000000;"> (e) {          
            e.preventDefault();          
            </span><span style="color: #0000ff;">var</span> $form =<span style="color: #000000;"> $(e.target);
            </span><span style="color: #0000ff;">var</span> bv = $form.data('bootstrapValidator'<span style="color: #000000;">);
            </span><span style="color: #008000;">//</span><span style="color: #008000;">这里提交表单</span>
            $.post('address'<span style="color: #000000;">, {
                data: </span>"data"<span style="color: #000000;">
            }, </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (result) {
                alert(result);
            });
        });   </span>

Nach dem Login kopieren

Probieren Sie es aus, aber es funktioniert nicht, da unser UEditor und der verborgene Textinhalt noch nicht synchronisiert sind und sie synchronisiert werden sollten, wenn wir Inhalte in UEditor eingeben!

Also synchronisieren wir es im contentChange-Ereignis von UEditor? ?

Auf den ersten Blick scheint es kein Problem zu geben, aber Sie werden feststellen, dass diese Sonderzeichen wie *&%￥ bei der Eingabe überhaupt kein contentChange-Ereignis auslösen,

Das ist jetzt peinlich, lasst uns weiter daran arbeiten, es zu lösen!

Hier müssen wir zwei Probleme lösen, eines ist das ContentChange-Ereignis, das Problem, dass spezielle Symbole nicht ausgelöst werden können, und das andere ist das Problem der Zuweisung und erneuten Validierung.

Schauen wir uns zunächst das erste Problem an: Sondersymbole können nicht ausgelöst werden. Sehen wir uns zunächst an, wie UEditor nach der Generierung aussieht

Ich habe hier einen Iframe gefunden. Es scheint, dass der Inhalt von UEditor darin verborgen ist. Solange Sie das Inhaltsänderungsereignis hier überwachen, sollten Sie in der Lage sein, das erste Problem zu lösen

Es gibt noch eine zweite Frage, gehen Sie einfach zum Code

 editor = UE.getEditor("UEId"<span style="color: #000000;">, {
            initialFrameHeight: </span>40<span style="color: #000000;">
        }).ready(</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> () {
            </span><span style="color: #0000ff;">var</span> editor = UE.getEditor("UEId"<span style="color: #000000;">);
            </span><span style="color: #008000;">/*</span><span style="color: #008000;">找到UEditor的iframe</span><span style="color: #008000;">*/</span>   
            <span style="color: #0000ff;">var</span> contents = $('#UEId').find('iframe'<span style="color: #000000;">).contents();
            </span><span style="color: #0000ff;">var</span> fn = <span style="color: #0000ff;">function</span><span style="color: #000000;"> () {
                $(</span>"#inputId").val(UE.getEditor("UEId"<span style="color: #000000;">).getContent());
                $(</span>'#defaultForm').data('bootstrapValidator')<span style="color: #008000;">//</span><span style="color: #008000;">重新验证inputName</span>
                  .updateStatus('inputName', 'NOT_VALIDATED', <span style="color: #0000ff;">null</span><span style="color: #000000;">)
                  .validateField(</span>'inputName'<span style="color: #000000;">);                      
            }

            </span><span style="color: #0000ff;">if</span> (document.all) {<span style="color: #008000;">//</span><span style="color: #008000;">document.all识别是否在IE下，在IE下为true</span>
                contents.get(0).attachEvent('onpropertychange', <span style="color: #0000ff;">function</span><span style="color: #000000;"> (e) {
                    fn();
                });
            } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
                contents.on(</span>'input'<span style="color: #000000;">, fn);
            }
        });</span>

Nach dem Login kopieren

Nachdem Sie den Wert hier zugewiesen haben, müssen Sie ihn erneut mit der updateStatus-Methode von bootstrapValidator und der ValidateField-Methode überprüfen. Versuchen wir es dann noch einmal

Schauen Sie genauer hin, und es gibt drei Probleme im Inneren. Ein Problem besteht darin, dass sich die Farbe des Randes nicht ändert, das zweite Problem besteht darin, dass auf der rechten Seite keine √- und ×-Symbole vorhanden sind, und das dritte Problem ist, dass ein direkter Klick auf „Speichern“ keine Überprüfung auslöst.

Okay, lass es uns einzeln lösen! Erstens: Warum ändert sich die Farbe des Randes nicht? Tatsächlich ist das normal, da wir ein ausgeblendetes Textfeld überprüfen. Wenn sich die Farbe ändert, sollte sich auch die Farbe dieses Textfelds ändern

Okay, dann fügen wir ein Stück js hinzu, um die Farbe des Rahmens mit der Farbe des Etiketts auf der linken Seite gleichzusetzen. Fügen Sie also nach jeder erneuten Überprüfung von UEditor ein Stück Code hinzu

  $($('#UEId div')[0]).css('border-color', $('#labelId').css('color'));

Nach dem Login kopieren

Das zweite Problem besteht darin, √× anzuzeigen. Ich habe den Stil nach und nach angepasst und schließlich eine Lösung in der Datei ueditor.css gefunden .

Ändern Sie die Position in position: initial; und passen Sie dann den Rand oben an die Symbolleiste in der Ready-Methode des UEditors an

  <span style="color: #0000ff;">var</span>  margintop = $($('#UEId .edui-editor-toolbarbox')[0<span style="color: #000000;">]).height();
  $($(</span>'#divId i')[0]).css('margin-top', margintop);

Nach dem Login kopieren

Das letzte Problem lässt sich am besten lösen, indem Sie diesen Code zum Absenden des Formulars hinzufügen

$('#defaultForm').submit(<span style="color: #0000ff;">function</span><span style="color: #000000;"> () {
            $(</span>'#defaultForm').data('bootstrapValidator')<br>　　　　　　　　.updateStatus('inputName', 'NOT_VALIDATED', <span style="color: #0000ff;">null</span>)<br>　　　　　　　　.validateField('inputName'<span style="color: #000000;">);<br>$($(</span>'#UEId div')[0]).css('border-color', $('#labelId').css('color')); 
        })

Nach dem Login kopieren

Endlich können wir den endgültigen Effekt sehen, und wenn wir das Formular absenden, können wir val() des Textfelds direkt verwenden. Wir möchten kein zusätzliches Urteil hinzufügen, wenn (es ist UEditor){.. ..}. Zum Schluss der gesamte HTML-Inhalt

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/1999/xhtml"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Content-Type"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="text/html; charset=utf-8"</span> <span style="color: #0000ff;">/></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="Scripts/bootstrap.css"</span><span style="color: #ff0000;"> rel</span><span style="color: #0000ff;">="stylesheet"</span> <span style="color: #0000ff;">/></span>   
    <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="bootstrapValidator.min.css"</span><span style="color: #ff0000;"> rel</span><span style="color: #0000ff;">="stylesheet"</span> <span style="color: #0000ff;">/></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">      
        .form-control-feedback </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            margin-right</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span>       
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">form </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="padding-top:15px;width:100%"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="defaultForm"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-sm-12 form-group"</span><span style="color: #0000ff;">></span>

            <span style="color: #0000ff;"><</span><span style="color: #800000;">label </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="labelId"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="control-label col-sm-1 form-group"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="font-weight:normal;"</span><span style="color: #0000ff;">><br></span>　　　　　　　　UEditor测试<br><span style="color: #0000ff;">　　　　　　</</span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-sm-11 form-group"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="divId"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="UEId"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/plain"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="form-control"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="inputId"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="inputName"<br /></span><span style="color: #ff0000;">　　　　　　　　 style</span><span style="color: #0000ff;">="height:0px;border:0px;margin:0px;padding:0px"</span> <span style="color: #0000ff;">/></span>
            <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="modal-footer col-sm-12"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">button </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="btn btn-primary"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="btn_save"</span><span style="color: #0000ff;">></span>保存<span style="color: #0000ff;"></</span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="jquery-1.9.1.min.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="Scripts/bootstrap.min.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="bootstrapValidator.min.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="UEeditor/ueditor.config.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="UEeditor/ueditor.all.min.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="zh_CN.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="UEeditor/lang/zh-cn/zh-cn.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #000000;">
    $(</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> () {    
        editor </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> UE.getEditor(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">UEId</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">, {
            initialFrameHeight: </span><span style="background-color: #f5f5f5; color: #000000;">40</span><span style="background-color: #f5f5f5; color: #000000;">
        }).ready(</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> () {
            </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> editor </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> UE.getEditor(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">UEId</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">);
            </span><span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">找到UEditor的iframe</span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
           <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;">  margintop </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> $($(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#UEId .edui-editor-toolbarbox</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">)[</span><span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">]).height();
           $($(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#divId i</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">)[</span><span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">]).css(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">margin-top</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">, margintop);
            </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> contents </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> $(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#UEId</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).find(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">iframe</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).contents();
            </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> fn </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> () {
                $(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">#inputId</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).val(UE.getEditor(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">UEId</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).getContent());
                $(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#defaultForm</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).data(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">bootstrapValidator</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">)</span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">重新验证inputName</span>
<span style="background-color: #f5f5f5; color: #000000;">                  .updateStatus(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">inputName</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">, </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">NOT_VALIDATED</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">, </span><span style="background-color: #f5f5f5; color: #0000ff;">null</span><span style="background-color: #f5f5f5; color: #000000;">)
                  .validateField(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">inputName</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">);
               $($(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#UEId div</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">)[</span><span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">]).css(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">border-color</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">, $(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#labelId</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).css(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">color</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">));                
            }

            </span><span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;"> (document.all) {</span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">document.all识别是否在IE下，在IE下为true</span>
<span style="background-color: #f5f5f5; color: #000000;">                contents.get(</span><span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">).attachEvent(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">onpropertychange</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">, </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> (e) {
                    fn();
                });
            } </span><span style="background-color: #f5f5f5; color: #0000ff;">else</span><span style="background-color: #f5f5f5; color: #000000;"> {
                contents.on(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">input</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">, fn);
            }
        });

        $(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#defaultForm</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).submit(</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> () {
            $(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#defaultForm</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).data(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">bootstrapValidator</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">)<br>　　　　　　.updateStatus(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">inputName</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">, </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">NOT_VALIDATED</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">, </span><span style="background-color: #f5f5f5; color: #0000ff;">null</span><span style="background-color: #f5f5f5; color: #000000;">)<br>　　　　　　.validateField(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">inputName</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">);
            $($(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#UEId div</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">)[</span><span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">]).css(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">border-color</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">, $(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#labelId</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).css(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">color</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">)); </span>
<span style="background-color: #f5f5f5; color: #000000;">        })

        $(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#defaultForm</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).bootstrapValidator({
            message: </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">验证未通过</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,
            feedbackIcons: {
                valid: </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">glyphicon glyphicon-ok</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,
                invalid: </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">glyphicon glyphicon-remove</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,
                validating: </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">glyphicon glyphicon-refresh</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">
            },
            fields: {
                inputName: {</span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">所提交的控件name属性</span>
<span style="background-color: #f5f5f5; color: #000000;">                    message: </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">所提交的数据不能为空</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,
                    validators: {
                        notEmpty: { </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">非空提示</span>
<span style="background-color: #f5f5f5; color: #000000;">                            message: </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">填写的数据不能为空</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">
                        },
                    }
                },
            }
        }).on(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">success.form.bv</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">, </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> (e) {          
            e.preventDefault();          
            </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> $form </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> $(e.target);
            </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> bv </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> $form.data(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">bootstrapValidator</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">);
            </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">这里提交表单</span>
<span style="background-color: #f5f5f5; color: #000000;">            $.post(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">address</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">, {
                data: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">data</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">
            }, </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> (result) {
                alert(result);
            });
        });             
    })
</span><span style="color: #0000ff;"></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>

Nach dem Login kopieren

Denken Sie daran, etwas Bootstrap, JQuery usw. hinzuzufügen. Außerdem kommt bald das Mittherbstfest. Ich wünsche allen schon im Voraus einen schönen Feiertag!