首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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

利用bootstrapValidator验证UEditor

- Author -

子浩smd

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
js 走马灯简单实例
Nov 21 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
基于vue2.0实现简单轮播图
Nov 27 Javascript
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
蓝屏(1) Sunmao(1) 403(1) 输入法(2) Sentry(1) 声卡驱动(1) svg(1) 404(1) 滚动条(1) sout(1)
You might like
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
2020/04/04 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
Python smallseg分词用法实例分析
2015/05/28 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
详解KMP算法以及python如何实现
2020/09/18 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
美国婚礼礼品网站：MyWeddingFavors
2018/09/26 全球购物
在线购买澳大利亚设计师手拿包和奢华晚装手袋：Olga Berg
2019/03/20 全球购物
研究生自我鉴定范文
2013/10/30 职场文书
英语系毕业生自荐信
2013/10/31 职场文书
英文版餐饮运营管理求职信
2013/11/06 职场文书
信息专业个人的自我评价
2013/12/27 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
初中思品教学反思
2016/02/20 职场文书
python Django框架快速入门教程（后台管理）
2021/07/21 Python
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android