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

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

上面的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生成之后是什么样子的吧

这里找到了一个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方法重新验证一遍,然后我们再试一试吧

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

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

好的,那我们就加一段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的更多相关文章

  1. bootstrapValidator常用验证规则总结

    bootstrapValidator常用验证规则总结 一 .bootstrapValidator引入 在使用bootstrapValidator前我们需要引入bootstrap和bootstrapVa ...

  2. 【bootstrapValidator 不验证】使用bootstrapValidator 验证效果不起作用

    虽然在页面ready的时候 就绑定了验证表单 ,但是在点击提交按钮之后 依旧没有验证的效果 . 那就在提交按钮的点击事件中 添加一句话: $(document).ready( function () ...

  3. bootstrapvalidator常用验证解析和使用

    学这个博主的:https://www.cnblogs.com/wang-kai-xuan/p/11031733.html BootStrapValidator表单验证插件的学习和使用 引入标签     ...

  4. 双重保险——前端bootstrapValidator验证+后台MVC模型验证

    我们在前端使用BoostrapValidator插件验证最基本的格式要求问题,同时在后台中,使用MVC特有的模型验证来做双重保险.对于boostrapValidator我就不说了,具体请看<bo ...

  5. bootstrapValidator.js,最好用的bootstrap表单验证插件 简单实用方法

    实用方法 1.引入 在有jquery和bootstrap的页面里引入bootstrapValidator.js和bootstrapValidator.css文件 2. 按照bootstrap的表单组件 ...

  6. 云平台项目--学习经验--BootstrapValidate表单验证插件

    使用前提,需要加载jquery和bootstrap库.并且引入bootstrapValidator.js和bootstrapValidator.css文件然后建立一个form表单,添加表单控件,表单控 ...

  7. bootstrap正则表达式验证手机 座机 邮箱

    $('#CusForm').bootstrapValidator({ fields : { //验证手机 'customer.mobile' : { //input中的name 值 validator ...

  8. Awesome Javascript(中文翻译版)

    [导读]:GitHub 上有一个 Awesome – XXX 系列的资源整理.awesome-javascript 是 sorrycc 发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架 ...

  9. javascript功能插件大集合,写前端的亲们记得收藏

    伯乐在线已在 GitHub 上发起「JavaScript 资源大全中文版」的整理.欢迎扩散.欢迎加入. https://github.com/jobbole/awesome-javascript-cn ...

随机推荐

  1. labview事件结构

    等待事件发生,并执行相应条件分支,处理该事件.事件结构 包括一个或多个子程序框图或事件分支,结构处理时间时,仅有一个子程序框图或分支在执行.等待事件通知时,该结构可超时. 连线边框左上角的“超时”接线 ...

  2. centos安装postfixadmin

    postfixadmin的安装,跟普通网站安装没什么区别 配置好虚拟目录,然后在数据库中创建数据库postfix 修改config.inc.php文件,详细搜索谷歌 访问http://www.你的域名 ...

  3. 检测iOS的APP性能的一些方法

    首先如果遇到应用卡顿或者因为内存占用过多时一般使用Instruments里的来进行检测.但对于复杂情况可能就需要用到子线程监控主线程的方式来了,下面我对这些方法做些介绍: Time Profiler ...

  4. web/jdbc数据库带实例名连接2008

    --------------------------数据库带实例名连接2008-------------------------------------<property name=" ...

  5. Left join 中On和Where的作用范围

    SQL语句如下: SELECT * FROM 表1 LEFT JOIN 表2 ON 表1.id = 表2.id AND 表2.Name != 'ff'WHERE 表1.NAME != 'aa' Lef ...

  6. 【转】Android 实现蘑菇街购物车动画效果

    原文出处:http://blog.csdn.net/wangjinyu501/article/details/38400479 1.思路   目前想到两种方式实现这种效果,一是使用Tween动画,直截 ...

  7. OC:继承、初始化方法、便利构造器

    A继承 的作用就是为了,节省代码.     继承 :子类会继承父类 里面所有的内容     思想 :凡是继承过来的实例变量和方法 都是自己的(是从父类遗传过来的)     继承的使用场景 : 当我们多 ...

  8. win10的安装、win10启动盘制作

    需要的材料 win10映像 U盘 UltraISO软件 1.下载对应的win10映像 有64位和32位可选(自己找地方下) 2.下载UltraISO软件 3.准备一只U盘,插入电脑 4.启动Ultra ...

  9. LVS 单独完成--负载均衡

    原文地址:http://blog.sina.com.cn/s/blog_5f54f0be0101eyiu.html LVS 是通过 IPVS 模块来实现的.IPVS是LVS集群的核心,主要用于完成用户 ...

  10. memcached Logging

    For reasons now relegated to history, Spy has its own logging implementation. However, it is compati ...