JavaScript
搜索
分类

利用bootstrapValidator验证UEditor

作者：子浩smd 时间：2024-04-16 08:47:26　

我们的项目使用了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
0
投稿

猜你喜欢

  • ASP:Cookie使用指南

    2007-09-28 12:48:00

  • Perl字符串处理函数大全

    2023-11-25 17:33:35

  • PyTorch中torch.matmul()函数常见用法总结

    2023-03-28 16:01:31

  • package.json版本号符号^和~前缀的区别

    2024-05-02 17:36:11

  • golang beego框架环境搭建过程

    2024-02-13 03:29:39

  • python异常处理、自定义异常、断言原理与用法分析

    2023-06-12 02:36:08

  • MySQL 数据类型和建库策略

    2024-01-20 12:32:40

  • 基于win2003虚拟机中apache服务器的访问

    2023-11-14 11:17:08

  • Python将8位的图片转为24位的图片实现方法

    2021-07-31 12:11:42

  • 如何处理Oracle中较大的文本数据？

    2009-11-11 20:06:00

  • 用VB将ASP代码封装成DLL

    2007-09-28 12:46:00

  • MySQL 那些常见的错误设计规范,你都知道吗

    2024-01-25 18:19:36

  • Sklearn调优之网格搜索与随机搜索原理详细分析

    2022-05-11 10:47:12

  • oracle表空间扩容详情

    2024-01-12 15:31:54

  • Python基于正则表达式实现文件内容替换的方法

    2023-08-23 00:14:09

  • 解决python3捕获cx_oracle抛出的异常错误问题

    2023-01-21 17:51:26

  • 浅谈SQL Server 2016里TempDb的进步

    2024-01-13 20:23:41

  • Golang 函数执行时间统计装饰器的一个实现详解

    2024-05-09 09:46:22

  • MySQL 创建用户、授权用户、撤销用户权限、更改用户密码、删除用户(实用技巧)

    2024-01-25 06:11:46

  • python列表逆序排列的4种方法

    2022-09-19 18:26:21
    • asp之家 网络编程 m.aspxhome.com