bootstrapValidator를 사용하여 UEditor 확인

우리 프로젝트에서는 bootstrapValidator를 프런트 엔드 검증으로 사용하지만 양식에 UEditor가 있습니다. bootstrapValidator를 사용해도 효과가 없습니다. 페이지 스타일을 통일하려면 수정해야 합니다

먼저 변경된 효과를 살펴보겠습니다

위의 UEditor는 우리 사업에서 조정해야 할 부분입니다. 먼저 기본 구조를 적어보겠습니다.

<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>

특별히 말씀드리자면, UEditor 뒤에 텍스트 상자를 추가했습니다. 이 텍스트 상자의 목적은 UEditor의 내용을 저장하는 것입니다. UEditor는 검증을 위해 bootstrapValidator를 사용할 수 없으므로, 검증 텍스트에 사용할 수 있는 텍스트 상자를 추가하겠습니다. 상자를 선택한 다음 style="height:0px;border:0px;margin:0px;padding:0px;"로 입력을 숨깁니다. 이 경우에는 display:none으로 숨길 수 없다는 점에 유의하세요. 함께 숨겨주세요.

물론 지금은 작동하지 않습니다. 텍스트 상자 내용 확인만 추가해 보겠습니다

 $('#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>

해보시면 작동하지 않습니다. 왜냐하면 UEditor와 숨겨진 텍스트 콘텐츠가 아직 동기화되지 않았고 UEditor에 콘텐츠를 입력할 때 동기화되어야 하기 때문입니다!

그럼 UEditor의 contentChange 이벤트에서 동기화할까요? ?

얼핏 보면 아무 문제 없어 보이지만, *&%PY와 같은 특수 기호를 입력하면 전혀 contentChange 이벤트가 발생하지 않는 것을 알 수 있습니다.

이제 당황스럽네요. 계속해서 해결해 볼까요!

여기서 우리는 두 가지 문제를 해결해야 합니다. 하나는 contentChange 이벤트, 특수 기호가 트리거될 수 없는 문제이고 다른 하나는 할당 및 재검증 문제입니다.

먼저 첫 번째 문제를 살펴보겠습니다. 특수 기호를 실행할 수 없다는 점입니다. 먼저 UEditor가 생성된 후 어떻게 보이는지 살펴보겠습니다.

여기서 iframe을 찾았습니다. 그 안에 UEditor의 컨텐츠가 숨겨져 있는 것 같습니다. 여기에서 컨텐츠 변경 이벤트를 모니터링하면 첫 번째 문제를 해결할 수 있을 것입니다.

두 번째 질문이 있습니다. 코드로 이동하세요

 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>

여기서 값을 할당한 후 bootstrapValidator의 updateStatus와 verifyField 메소드를 사용하여 다시 검증한 후 다시 시도해 보겠습니다

자세히 살펴보니 내부에 3가지 문제가 있는데, 하나는 테두리 색이 같이 바뀌지 않는다는 문제이고, 두 번째 문제는 오른쪽에 √와 × 아이콘이 없다는 점, 세 번째 문제입니다. 저장을 직접 클릭해도 확인이 실행되지 않는다는 점입니다.

자, 하나씩 풀어볼까요! 첫째, 테두리의 색상이 변하지 않는 이유는 무엇입니까? 실제로 숨겨진 텍스트 상자를 확인하는 중이므로 색상이 변경되면 해당 텍스트 상자의 색상도 변경되어야 합니다.

그럼 테두리 색상을 왼쪽 라벨 색상과 동일하게 만들기 위해 js 조각을 추가하겠습니다. UEditor를 재검증할 때마다 코드 조각을 추가하세요

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

두 번째 문제는 √×를 표시하도록 하는 것인데, 조금 번거롭습니다. 조금씩 스타일을 조정하여 ueditor.css 파일에서 .edui-default .edui-editor 클래스를 찾았습니다. .

위치를 position:initial로 변경한 다음 UEditor의 준비 메소드에 있는 도구 모음과 동일하게 여백 상단을 조정합니다.

  <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);

마지막 문제는 양식 제출에 이 코드를 추가하면 가장 잘 해결됩니다

$('#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')); 
        })

마지막으로 최종 효과를 볼 수 있으며, 양식을 제출할 때 텍스트 상자의 val()을 직접 사용할 수 있습니다. (UEditor인 경우){.. ..}. 드디어 전체 HTML 내용이 첨부되었습니다

<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>

여기에 사용된 부트스트랩, jquery 등을 추가하는 것을 잊지 마세요. 곧 추석이 다가옵니다. 모두들 즐거운 연휴 보내세요!