我們的項(xiàng)目使用了bootstrapValidator來(lái)作為前端校驗(yàn)，但是表單里面有一個(gè)UEditor，它用bootstrapValidator是沒(méi)有效果的，為了頁(yè)面風(fēng)格統(tǒng)一，只要修修改改咯
首先來(lái)看一下修改后的效果
上面的UEditor是我們的業(yè)務(wù)需要調(diào)整成這樣的，首先我們我們先把基本的結(jié)構(gòu)寫一寫
<form style="padding-top:15px;width:100%" id="defaultForm"> <div class="col-sm-12 form-group"> <label id="labelId" class="control-label col-sm-1 form-group" style="font-weight:normal;"> UEditor測(cè)試 </label> <div class="col-sm-11 form-group" id="divId"> <script id="UEId" type="text/plain"></script> <input class="form-control" type="text" id="inputId" name="inputName" style="height:0px;border:0px;margin:0px;padding:0px" /> </div> </div> <div class="modal-footer col-sm-12"> <button type="submit" class="btn btn-primary" id="btn_save">保存</button> </div> </form>
特別注意，我在UEditor后面加了一個(gè)文本框，這個(gè)文本框的作用就是為了存儲(chǔ)UEditor的內(nèi)容的，既然你UEditor不能使用bootstrapValidator來(lái)做校驗(yàn)，那我就加一個(gè)能用做校驗(yàn)的文本框唄，然后把input用style="height:0px;border:0px;margin:0px;padding:0px;"這種方式隱藏起來(lái)，特別注意的是不能用display:none來(lái)隱藏，這樣的話驗(yàn)證也會(huì)隨之一起隱藏起來(lái)的。
然后現(xiàn)在自然是不起作用的啦，我們現(xiàn)在加上對(duì)文本框內(nèi)容的驗(yàn)證就好了吧
$('#defaultForm').bootstrapValidator({ message: '驗(yàn)證未通過(guò)', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { inputName: {//所提交的控件name屬性 message: '所提交的數(shù)據(jù)不能為空', validators: { notEmpty: { //非空提示 message: '填寫的數(shù)據(jù)不能為空' }, } }, } }).on('success.form.bv', function (e) { e.preventDefault(); var $form = $(e.target); var bv = $form.data('bootstrapValidator'); //這里提交表單 $.post('address', { data: "data" }, function (result) { alert(result); }); }); 試一試，果然不行，因?yàn)樵蹅兊腢Editor和隱藏的文本內(nèi)容還沒(méi)有同步呢，而且應(yīng)該在我們?cè)赨Editor輸入內(nèi)容的時(shí)候就進(jìn)行同步！
所以我們就在UEditor的contentChange事件里面去同步嗎？？
咋一看好像沒(méi)什么問(wèn)題，但是你會(huì)發(fā)現(xiàn)，這些按*&%￥之類的特殊符號(hào)在輸入的時(shí)候根本就不會(huì)觸發(fā)contentChange事件，
這下子就尷尬了，繼續(xù)解決吧！
這里我們要解決2個(gè)問(wèn)題，一個(gè)是contentChange事件，特殊符號(hào)無(wú)法觸發(fā)的問(wèn)題，還一個(gè)賦值，重新驗(yàn)證的問(wèn)題。
首先看第一個(gè)問(wèn)題特殊符號(hào)無(wú)法觸發(fā)的問(wèn)題，先看看UEditor生成之后是什么樣子的吧
這里找到了一個(gè)iframe，看來(lái)UEditor的內(nèi)容都藏在這里面了吧，只要監(jiān)聽(tīng)這里面的內(nèi)容改變事件，就應(yīng)該可以解決第一個(gè)問(wèn)題了吧
還有第二個(gè)問(wèn)題，直接上代碼
editor = UE.getEditor("UEId", { initialFrameHeight: 40 }).ready(function () { var editor = UE.getEditor("UEId"); /*找到UEditor的iframe*/ var contents = $('#UEId').find('iframe').contents(); var fn = function () { $("#inputId").val(UE.getEditor("UEId").getContent()); $('#defaultForm').data('bootstrapValidator')//重新驗(yàn)證inputName .updateStatus('inputName', 'NOT_VALIDATED', null) .validateField('inputName'); } if (document.all) {//document.all識(shí)別是否在IE下，在IE下為true contents.get(0).attachEvent('onpropertychange', function (e) { fn(); }); } else { contents.on('input', fn); } });這里賦值之后必須 用bootstrapValidator的updateStatus加validateField方法重新驗(yàn)證一遍，然后我們?cè)僭囈辉嚢?nbsp;
仔細(xì)看一看，里面還有三個(gè)問(wèn)題，一個(gè)問(wèn)題是邊框沒(méi)有隨著一起變顏色，第二個(gè)是右邊沒(méi)有√和×的圖標(biāo)，第三個(gè)是直接點(diǎn)保存是不觸發(fā)驗(yàn)證的。
好吧，咱們一個(gè)一個(gè)來(lái)解決！第一個(gè)，邊框?yàn)槭裁礇](méi)有變顏色呢？其實(shí)很正常，因?yàn)槲覀兪菍?duì)一個(gè)隱藏的文本框做的驗(yàn)證，要變色應(yīng)該也是那個(gè)文本框變吧
好的，那我們就加一段js，讓邊框的顏色和左邊label的顏色一樣就可以了，所以在UEditor的每次重新驗(yàn)證之后里加一段代碼
$($('#UEId div')[0]).css('border-color', $('#labelId').css('color'));
第二個(gè)問(wèn)題，讓√×顯示出來(lái)，這個(gè)就有點(diǎn)麻煩，一點(diǎn)一點(diǎn)的調(diào)樣式，最終發(fā)現(xiàn)一個(gè)解決辦法，在ueditor.css文件中找到.edui-default .edui-editor這個(gè)類，把它的position變?yōu)?position: initial;然后在UEditor的ready方法中將它的margin-top調(diào)成和工具欄一樣就可以了
var margintop = $($('#UEId .edui-editor-toolbarbox')[0]).height();
$($('#divId i')[0]).css('margin-top', margintop);
最后一個(gè)最好解決，在form的submit中加這樣一段代碼就好了
$('#defaultForm').submit(function () { $('#defaultForm').data('bootstrapValidator') .updateStatus('inputName', 'NOT_VALIDATED', null) .validateField('inputName');$($('#UEId div')[0]).css('border-color', $('#labelId').css('color')); }) 終于可以看到最終的效果了，而且我們提交表單的時(shí)候可以直接拿文本框的val()了，不想要多加一個(gè)判斷if(是UEditor){....}了.最終附上整個(gè)html的內(nèi)容
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="Scripts/bootstrap.css" rel="stylesheet" /> <link href="bootstrapValidator.min.css" rel="stylesheet" /> <style> .form-control-feedback { margin-right: 10px; } </style></head><body> <form style="padding-top:15px;width:100%" id="defaultForm"> <div class="col-sm-12 form-group"> <label id="labelId" class="control-label col-sm-1 form-group" style="font-weight:normal;"> UEditor測(cè)試 </label> <div class="col-sm-11 form-group" id="divId"> <script id="UEId" type="text/plain"></script> <input class="form-control" type="text" id="inputId" name="inputName" style="height:0px;border:0px;margin:0px;padding:0px" /> </div> </div> <div class="modal-footer col-sm-12"> <button type="submit" class="btn btn-primary" id="btn_save">保存</button> </div> </form></body></html><script src="jquery-1.9.1.min.js"></script><script src="Scripts/bootstrap.min.js"></script><script src="bootstrapValidator.min.js"></script><script src="UEeditor/ueditor.config.js"></script><script src="UEeditor/ueditor.all.min.js"></script><script src="zh_CN.js"></script><script src="UEeditor/lang/zh-cn/zh-cn.js"></script><script type="text/javascript"> $(function () { editor = UE.getEditor("UEId", { initialFrameHeight: 40 }).ready(function () { var editor = UE.getEditor("UEId"); /*找到UEditor的iframe*/ var margintop = $($('#UEId .edui-editor-toolbarbox')[0]).height(); $($('#divId i')[0]).css('margin-top', margintop); var contents = $('#UEId').find('iframe').contents(); var fn = function () { $("#inputId").val(UE.getEditor("UEId").getContent()); $('#defaultForm').data('bootstrapValidator')//重新驗(yàn)證inputName .updateStatus('inputName', 'NOT_VALIDATED', null) .validateField('inputName'); $($('#UEId div')[0]).css('border-color', $('#labelId').css('color')); } if (document.all) {//document.all識(shí)別是否在IE下，在IE下為true contents.get(0).attachEvent('onpropertychange', function (e) { fn(); }); } else { contents.on('input', fn); } }); $('#defaultForm').submit(function () { $('#defaultForm').data('bootstrapValidator') .updateStatus('inputName', 'NOT_VALIDATED', null) .validateField('inputName'); $($('#UEId div')[0]).css('border-color', $('#labelId').css('color')); }) $('#defaultForm').bootstrapValidator({ message: '驗(yàn)證未通過(guò)', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { inputName: {//所提交的控件name屬性 message: '所提交的數(shù)據(jù)不能為空', validators: { notEmpty: { //非空提示 message: '填寫的數(shù)據(jù)不能為空' }, } }, } }).on('success.form.bv', function (e) { e.preventDefault(); var $form = $(e.target); var bv = $form.data('bootstrapValidator'); //這里提交表單 $.post('address', { data: "data" }, function (result) { alert(result); }); }); })</script>里面用到的一些bootstrap，jquery啥的自己記得加上去。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
