利用bootstrapValidator验证UEditor


Posted in Javascript onSeptember 14, 2016

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

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

利用bootstrapValidator验证UEditor

上面的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用style="height:0px;border:0px;margin:0px;padding:0px;"这种方式隐藏起来,特别注意的是不能用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生成之后是什么样子的吧 

利用bootstrapValidator验证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方法重新验证一遍,然后我们再试一试吧 

利用bootstrapValidator验证UEditor

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

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

好的,那我们就加一段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 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测试


</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啥的自己记得加上去。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript While 循环基础教程
Apr 05 Javascript
wordpress之js库集合研究介绍
Aug 17 Javascript
JavaScript 监听textarea中按键事件
Oct 08 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
JavaScript 参数中的数组展开 [译]
Sep 21 Javascript
按钮接受回车事件的三种实现方法
Jun 06 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
canvas实现钟表效果
Feb 13 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
JavaScript鼠标特效大全
Sep 13 #Javascript
javascript表单控件实例讲解
Sep 13 #Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 #Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 #Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 #Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 #Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 #Javascript
You might like
菜鸟修复电子管记
2021/03/02 无线电
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
php中实现简单的ACL 完结篇
2011/09/07 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
select组合框option的捕捉实例代码
2008/09/30 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
js实现网页收藏功能
2015/12/17 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
python删除列表内容
2015/08/04 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
python 读取数据库并绘图的实例
2019/12/03 Python
如何使用repr调试python程序
2020/02/28 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
婚姻出轨保证书
2015/05/08 职场文书
圣诞晚会主持词
2015/07/01 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
施工安全协议书
2016/03/22 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书