首页
所有分类
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 相关文章推荐
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
js 通用javascript函数库整理
Aug 14 Javascript
Android中资源文件(非代码部分)的使用概览
Dec 18 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象（五）
Jun 04 Javascript
Angular5升级RxJS到5.5.3报错：EmptyError: no elements in sequence的解决方法
Apr 09 Javascript
小程序实现抽奖动画
Apr 16 Javascript
React如何创建组件
Jun 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) 酶(1) 太空(1) 火星(2) 国际空间站(1) 塑料(1) 人造肉(1) 美国航天局(1) NASA(1) 天问一号(1)
You might like
php匹配字符中链接地址的方法
2014/12/22 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
Smarty模板配置实例简析
2019/07/20 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人？
2018/04/05 DOTA
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
python for 循环获取index索引的方法
2019/02/01 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
泰坦健身器材：Titan Fitness
2018/02/13 全球购物
Lululemon加拿大官网：加拿大知名体育服装零售商
2019/04/12 全球购物
数字天堂软件测试面试题
2012/12/23 面试题
护理职业应聘自荐书
2013/09/29 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
国庆节慰问信
2015/02/15 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书