首页
所有分类
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 相关文章推荐
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
对采用动态原型方式无法展示继承机制得思考
Dec 04 Javascript
javascript实现yield的方法
Nov 06 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
JavaScript运动框架 多值运动（四）
May 18 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 Javascript
如何在vue 中使用柱状图 并自修改配置
Jan 21 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
S500(1) H-501(1) BCL3000(2) S700(1) Grundig(1) ICF-SW07(1) 低放电路(1) PL450(1) PL990(2) S400(1)
You might like
php实现递归的三种基本方式
2020/07/04 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
php格式文件打开的四种方法
2018/02/24 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
JQuery实现自定义对话框的代码
2008/06/15 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
浅谈JS函数节流防抖
2017/10/18 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
Python的Flask框架中Flask-Admin库的简单入门指引
2015/04/07 Python
python如何使用unittest测试接口
2018/04/04 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
基于django传递数据到后端的例子
2019/08/16 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
HTML5的Video标签有部分MP4无法播放的问题解析（多图）
2017/08/18 HTML / CSS
JS原生实现轮播图的几种方法
2021/03/23 Javascript
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
城市轨道专业个人求职信范文
2013/09/23 职场文书
采购文员岗位职责
2013/11/20 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
房地产开发项目建议书
2014/05/16 职场文书
三问三解心得体会
2014/09/05 职场文书
小班上学期个人总结
2015/02/12 职场文书
员工手册董事长致辞
2015/07/29 职场文书