지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

bootstrapValidator를 사용하여 UEditor 확인

WBOY
풀어 주다： 2016-09-14 09:24:02
원래의
1465명이 탐색했습니다.

우리 프로젝트에서는 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 등을 추가하는 것을 잊지 마세요. 곧 추석이 다가옵니다. 모두들 즐거운 연휴 보내세요!

관련 라벨：
用bootstrapValidator来验证UEditor
원천：php.cn
이전 기사：HTML 태그는 페이지의 모든 링크에 대한 기본 주소 또는 기본 대상을 지정합니다. 다음 기사：모바일 H5 - 강의 1 CSS
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
SAPUI5 callFunction()이 호출된 후 Errorhandler가 호출되지 않습니다. SAPUI5의 마법사에서 IBAN의 유효성을 검사하려고 합니다. 이를 위해 V2ODataModel(sap.ui.model.odata.v2.ODataModel)에서...
에서 2024-04-04 18:06:36
0
1
400
Zoom URL을 가로채는 Cypress 테스트 Zoom 링크로 리디렉션되는 테스트 사례가 있습니다. 테스트를 올바르게 완료하고 브라우저 세션을 중단하고 JavaScript 실행을 중지하지 않고 브라우저가 실제...
에서 2024-04-04 16:16:37
0
1
340
React JSX에서 양식 유효성 검사 문제에 대한 솔루션은 무엇입니까? React에서 유효성 검사 양식을 만들려고 하는데 사용자 등록 데이터 저장을 추가하니 문제가 많이 발생합니다. importReact,{useState}from&q...
에서 2024-04-03 11:53:49
0
1
315
Google OAuth 사용자 데이터를 추출하고 getRedirectResult 메소드를 사용하여 Firebase Firestore에 저장하는 방법은 무엇입니까? 저는 이메일/비밀번호와 GoogleOAuth 로그인이라는 두 가지 방법으로 웹사이트에서 사용자를 인증하기 위해 Firebase 인증을 사용하고 있습니다. 사용자가...
에서 2024-04-02 15:32:42
0
1
367
유효한 이메일 주소에도 불구하고 Javascript를 사용한 이메일 확인이 작동하지 않습니다. 저는 html과 javascript를 사용하여 두 개의 양식을 만들고 있습니다. 하나는 "로그인"용이고 다른 하나는 "등록"용...
에서 2024-03-30 14:49:34
0
1
333
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿