你的位置:首页 > 网页设计

[网页设计]用bootstrapValidator来验证UEditor


我们的项目使用了bootstrapValidator来作为前端校验,但是表单里面有一个UEditor,它用bootstrapValidator是没有效果的,为了页面风格统一,只要修修改改咯

首先来看一下修改后的效果

 

上面的UEditor是我们的业务需要调整成这样的,首先我们我们先把基本的结构写一写

<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测试
       </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后面加了一个文本框,这个文本框的作用就是为了存储UEditor的内容的,既然你UEditor不能使用bootstrapValidator来做校验,那我就加一个能用做校验的文本框呗,然后把input用这种方式隐藏起来,特别注意的是不能用display:none来隐藏,这样的话验证也会随之一起隐藏起来的。

然后现在自然是不起作用的啦,我们现在加上对文本框内容的验证就好了吧

 $('#defaultForm').bootstrapValidator({      message: '验证未通过',      feedbackIcons: {        valid: 'glyphicon glyphicon-ok',        invalid: 'glyphicon glyphicon-remove',        validating: 'glyphicon glyphicon-refresh'      },      fields: {        inputName: {//所提交的控件name属性          message: '所提交的数据不能为空',          validators: {            notEmpty: { //非空提示              message: '填写的数据不能为空'            },          }        },      }    }).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);      });    });  

试一试,果然不行,因为咱们的UEditor和隐藏的文本内容还没有同步呢,而且应该在我们在UEditor输入内容的时候就进行同步!

所以我们就在UEditor的contentChange事件里面去同步吗??

咋一看好像没什么问题,但是你会发现,这些按*&%¥之类的特殊符号在输入的时候根本就不会触发contentChange事件,

这下子就尴尬了,继续解决吧!

这里我们要解决2个问题,一个是contentChange事件,特殊符号无法触发的问题,还一个赋值,重新验证的问题。

首先看第一个问题特殊符号无法触发的问题,先看看UEditor生成之后是什么样子的吧

这里找到了一个iframe,看来UEditor的内容都藏在这里面了吧,只要监听这里面的内容改变事件,就应该可以解决第一个问题了吧

还有第二个问题,直接上代码

 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')//重新验证inputName         .updateStatus('inputName', 'NOT_VALIDATED', null)         .validateField('inputName');                 }      if (document.all) {//document.all识别是否在IE下,在IE下为true        contents.get(0).attachEvent('onpropertychange', function (e) {          fn();        });      } else {        contents.on('input', fn);      }    });

这里赋值之后必须 用bootstrapValidator的updateStatus加validateField方法重新验证一遍,然后我们再试一试吧

仔细看一看,里面还有三个问题,一个问题是边框没有随着一起变颜色,第二个是右边没有√和×的图标,第三个是直接点保存是不触发验证的。

好吧,咱们一个一个来解决!第一个,边框为什么没有变颜色呢?其实很正常,因为我们是对一个隐藏的文本框做的验证,要变色应该也是那个文本框变吧

好的,那我们就加一段js,让边框的颜色和左边label的颜色一样就可以了,所以在UEditor的每次重新验证之后里加一段代码

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

第二个问题,让√×显示出来,这个就有点麻烦,一点一点的调样式,最终发现一个解决办法,在ueditor.css文件中找到.edui-default .edui-editor这个类

把它的position变为 position: initial;然后在UEditor的ready方法中将它的margin-top调成和工具栏一样就可以了

 var margintop = $($('#UEId .edui-editor-toolbarbox')[0]).height(); $($('#divId i')[0]).css('margin-top', margintop);

最后一个最好解决,在form的submit中加这样一段代码就好了

$('#defaultForm').submit(function () {      $('#defaultForm').data('bootstrapValidator')
        .updateStatus('inputName', 'NOT_VALIDATED', null)
        .validateField('inputName');
$($('#UEId div')[0]).css('border-color', $('#labelId').css('color')); })

终于可以看到最终的效果了,而且我们提交表单的时候可以直接拿文本框的val()了,不想要多加一个判断if(是UEditor){....}了.最终附上整个html的内容

<!DOCTYPE html><html ="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测试
      </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')//重新验证inputName .updateStatus('inputName', 'NOT_VALIDATED', null) .validateField('inputName'); $($('#UEId div')[0]).css('border-color', $('#labelId').css('color')); } if (document.all) {//document.all识别是否在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: '验证未通过', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { inputName: {//所提交的控件name属性 message: '所提交的数据不能为空', validators: { notEmpty: { //非空提示 message: '填写的数据不能为空' }, } }, } }).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啥的自己记得加上去,另外中秋佳节快要到了,提前祝大家节日快乐!