우리의 프로젝트는 프론트 엔드 검증을 위해 부트 스트랩 볼리 디터를 사용하지만 양식에는 ueditor가 있습니다. BootstrapValidator를 사용할 때는 영향을 미치지 않습니다. 통합 페이지 스타일을 위해 수정하고 수정하십시오.
먼저 수정 된 효과를 살펴 보겠습니다
위의 ueditor는이 시점까지 조정해야합니다. 먼저 기본 구조를 먼저 봅시다.
<form style = "padding-top : 15px; width : 100%"id = "defaultform"> <div> <label id = "labelId"style = "font-weight :"font-weight : "> ueditor test> <div id ="divid "> <script id ="ueid "type ="text/plan "> 스타일 = "높이 : 0px; 테두리 : 0px; 마진 : 0px; 패딩 : 0px"/> </div> </div> <div> <버튼 유형 = "제출"id = "btn_save"> 저장 </button> </div> </form>
특별한주의를 기울이면 Ueditor 뒤에 텍스트 상자를 추가했습니다. 이 텍스트 상자의 목적은 ueditor의 내용을 저장하는 것입니다. ueditor가 검증을 위해 Bootstrapvalidator를 사용할 수 없으므로 검증에 사용할 수있는 텍스트 상자를 추가 한 다음 Style = "Height : 0px; Porder : 0px; Margin : 0px; 패딩 : 0px;" 방법. 디스플레이로 숨길 수 없다는 특별한주의를 기울이십시오. 없으므로 검증이 함께 숨겨집니다.
그러면 지금은 작동하지 않습니다. 지금 텍스트 상자 콘텐츠 확인을 추가해 봅시다.
$ ( '#defaultform'). bootstrapvalidator ({메시지 : '검증 실패', 피드백 시콘 : {valid : 'glyphicon glyphicon-ok', 유효하지 않음 : 'Glyphicon Glyphicon-remove', Validating : 'Glyphicon Glyphicon-Refresh'}, fields : {// inputname : ^ inputname : ^ inputname. '제출 된 데이터가 비어질 수 없다', 유효성 검사기 : {notempty : {// 비어있는 메시지 : '데이터가 채워질 수 없다'},}}). on ( 'success.form.bv', function (e) {e.preventDefault (); var $ form = $ (e.targget); $ .post ( 'address', {data : "data"}, function (ret) {alert (result);});Ueditor와 숨겨진 텍스트 내용이 아직 동기화되지 않았으므로 Ueditor에 컨텐츠를 입력 할 때 동기화되어야하기 때문에 실제로 작동하지 않습니다.
그래서 우리는 Ueditor의 ContentChange 이벤트에서 동기화됩니까? ?
처음에는 문제가없는 것 같습니다. 그러나 *&%￥와 같은 특수 기호는 입력 할 때 ContentChange 이벤트를 트리거하지 않을 것입니다.
지금 당황 스럽습니다. 계속 해결해 봅시다!
여기서 우리는 두 가지 문제를 해결해야합니다. 하나는 ContentChange 이벤트, 특수 상징이 트리거 될 수없는 문제, 과제 및 재배치 문제입니다.
먼저, 특별한 기호를 트리거 할 수없는 첫 번째 문제를 살펴보십시오. 먼저 Ueditor가 생성 된 후 어떻게 보이는지 살펴 보겠습니다.
여기에서 iframe이 발견되었습니다. Ueditor의 내용이 여기에 숨겨져있는 것 같습니다. 콘텐츠 변경 이벤트를 듣는 한 첫 번째 문제를 해결해야합니다.
두 번째 질문이 있습니다. 코드를 업로드하면됩니다
editor = ue.getEditor ( "ueid", {initialframeHeight : 40}). ready (function () {var editor = ue.getEditor ( "ueid"); /* ueditor* / var contents = $ ( '#ueid'). 찾기 ( 'iframe'). $ ( "#inputId"). val ( "ueid"). getContent (); 데이터 ( 'bootstrapvalidator') // inputname .updatestatus ( 'inputname', 'not_validate' {//document.all은 IE와 IE 내용에 따라 (0) .attachevent (onpropertyChange ', function (e) {fn ();};할당 후 BootstrapValidator의 Updatestatus 및 ValidateField 메소드를 사용하여 다시 검토 한 다음 다시 시도해 봅시다.
자세히 살펴보면 내부에 세 가지 문제가 있습니다. 하나는 테두리가 색상을 함께 바꾸지 않는다는 것입니다. 두 번째는 오른쪽에 √와 ×가있는 아이콘이 없다는 것입니다. 세 번째는 직접 포인트 저장이 확인을 트리거하지 않는다는 것입니다.
좋아, 하나씩 해결합시다! 첫째, 왜 국경이 변하지 않았습니까? 실제로, 우리는 숨겨진 텍스트 상자를 확인하기 때문에 정상입니다. 색상이 변경되면 텍스트 상자 여야합니다.
좋아, 그러면 우리는 JS 조각을 추가하고 왼쪽 레이블 색상과 동일하게 테두리 색상을 만들므로 Ueditor의 각 재검토 후 코드를 추가합니다.
$ ($ ( '#ueid div') [0]). css ( 'border-color', $ ( '#raildid'). css ( 'color'));
두 번째 문제는 √ ×를 표시하는 것입니다. 이것은 약간 번거로운 것입니다. 스타일을 조금씩 조정했습니다. 마침내 해결책을 찾았습니다. ueditor.css 파일에서 .edui-default .edui-editor 클래스를 찾아 위치로 변경하십시오. 그런 다음 ueditor의 준비된 방법에서 마진을 도구 모음과 동일하게 조정하십시오.
var margintop = $ ($ ( '#ueid .edui-editor-toolbarbox') [0]). 높이 ();
$ ($ ( '#divid i') [0]). css ( 'margin-top', margintop);
마지막은 가장 잘 해결 된 것입니다. 그러한 코드를 추가하여 제출하십시오.
$ ( '#defaultform'). 제출 (function () {$ ( '#defaultform'). data ( 'bootstrapvalidator') .updatestatus ( 'inputname', 'not_validated', null) .validatefield ( 'inputname'); $ ( '#ueid div') [0]. $ ( '#labelid'). CSS ( 'Color'));마지막으로, 우리는 최종 효과를 볼 수 있으며 양식을 제출할 때 텍스트 상자의 val ()을 직접 가져갈 수 있으며 (ueditor) {....} 인 경우 추가 판단을 추가하고 싶지 않습니다. 마지막으로 전체 HTML 컨텐츠가 첨부됩니다
<! docType html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <inlink href = "script/bootstrats" rel = "스타일" /> <link href = "bootstrapvalidator.min.css"rel = "Stylesheet" /> <sty> .form-control-feedback {margin-right : 10px; } </style> </head> <body> <form style = "padding-top : 15px; width : width : 100%"id = "defaultform"> <div> id = "lableId"style = "font-weight :"일반; "> ueditor test </label> <div id ="divid "> <script id ="ueid "type ="text "> id = "inputid"name = "inputname"style = "높이 : 0px; 테두리; 경계 : 0px; 마진 : 0px; 패딩 : 0px"/> </div> </div> <div> <버튼 = "제출"id = "btn_save"> 저장 </button> </div> </body> </html> </html> src = "jquery-1.9.1.min.js"> </script> <script src = "scripts/bootstrap.js"> </script> <script src = "bootstrapvalidator.min.js"> </script> <script src = "ueeditor.config.js"> src = "ueeditor/ueditor.all.min.js"> </script> <script src = "zh_cn.js"> </script> <script> <script> <ueeditor/lang/zh-cn/zh-cn.js "> </script> <script> <script> <text/javascript"> $ () {편집자 = ue.getEditor ( "ueid", {initialframeHeight : 40}). ready (function () {var editor = ue.getEditor ( "ueid"); /*ueditor* / var margintop = $ ($ ( '#ueid .edui-editor-toolbarbox') [0]; I ') [0]. CSS ('margin-top ', margintop). $ ( '#defaultform'). data ( 'bootstrapvalidator') // revalidate inputname .updatestatus ( 'inputname', 'not_validated', null) .validatefield ( 'inputname'); $ ( '#labelid'). CSS ( 'Color'); if (document.all) {//document.get.get (0). $ ( '#defaultform'). 제출 (function () {$ ( '#defaultform'). data ( 'bootstrapvalidator') .updatestatus ( 'inputname', 'not_validated', null) .validatefield ( 'inputname'); $ ( '#ueid div') [0]. $ ( '#lableId'). CSS ( 'Color'))) $ ( '#defaultform'). bootstrapvalidator ({villification : {glyphicon glyphicon-ok ', invalid :'glyphicon glyphicon-remove ' 필드 : {inputName : {// 제출 된 제어 이름 속성 메시지 : '제출 된 데이터는 비어질 수 없습니다', 유효성 검사기 : {notempty : {// 비어 있지 않은 메시지 : '채워진 데이터는 비어있을 수 없습니다'},}},}). $ form.data ( 'bootstrapvalidator'); // $ .post ( 'addrenge', {data "}, function) {alert (result);}) </script>;사용하는 것들에 부트 스트랩과 jQuery를 추가해야합니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.