利用bootstrapValidator验证UEditor
我们的项目使用了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插件进行动态添加表单元素并校验
一.前言 实际工作中,要实现表单元素的动态增加,并使用bootstrapValidator插件对动态添加的表单元素进行前台校验.在以前的工作中也使用过bootstrapValidator对表单元素进行校验,但涉及到的表单元素都是固定的,所以在页面载入时,对表单元素进行初始化就可以实现.虽然思路很明确,但由于对bootstrapValidator的用法不熟悉,在这个问题上还是浪费了很多时间,现在就把解决方法和功能效果图贴出来,希望对大家有所帮助. 思路:动态添加表单元素,并调用bootstrapV
-
Bootstrap Validator 表单验证
在线演示地址:http://www.shouce.ren/study/api/s/jq--BootstrapValidator--index.html 使用方法,代码如下所示: 1.<form id="defaultForm" method="post" class="form-horizontal" action="target.php"> 2. <div class="form-group&qu
-
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
一.前言 使用bootstrap-datepicker和bootstrapValidator也有一段时间了,在工作中发现两者同时使用时会出现的一种问题,当选择完日期后,并不会正确校验该字段.为了更加直观的展现问题,上图一张. 可以看出,当选择完日期后,校验结果并没有达到预期,是因为bootstrapValidator插件默认情况下,不会重复校验一个已经标记为验证通过或验证不通过的字段.so ,当开始触发校验后,没有通过校验,当正确选择日期后,并不会刷新校验结果,就会导致数据无法正常提交,当手动把
-
BootstrapValidator不触发校验的实现代码
一.前言 BootstrapValidator是基于bootstrap3的jquery表单验证插件,是最适合bootstrap框架的表单验证插件,在工作中用到此框架就写下自己在使用中积累的一些心得 二.问题描述 当按钮的类型为submit时,使用bootstrapValidator的isValid()能够使验证表单正常工作,但当button的type类型为button时,只调用bootstrapValidator的isValid()方法无法正常工作.这时候就需要使用bootstrapValida
-
基于jQuery 实现bootstrapValidator下的全局验证
BootstrapValidator 是一款专门针对Boostrap v3的表单检验jQuery插件,能够实现众多常用的检验功能,并且易于扩展,还支持中文!对于bootstrap用户来说能够开箱即用. 前置: 引入jQuery.bootstrap.bootstrapValidator 问题描述: 项目中要求所有的表单输入框中都不能输入&符号.没有在bootstrap中找到有方法可用,只能自己动手了 思路: 使用正则. 分两种情况,第一种,如果输入框有自身的正则验证则不用去管(一般来说使用正则验证
-
实用又漂亮的BootstrapValidator表单验证插件
本文推荐一款twitter做的bootstrapValidator.js,本身bootstrap就是twitter做的,那么使用原配的validator也就更值得信赖.从百度上搜bootstrapValidator会出现很多款,但我只推荐这款: 一.一睹为快 为了简便的介绍,这里只做为空的check. BootstrapValidator官方下载地址 二.资源引用 下载完资源包后,你可以看到如下的目录. 然后把以下三个文件引入到你项目. <link type="text/css"
-
JS组件Form表单验证神器BootstrapValidator
本文为大家分享了JS组件Form表单验证神器BootstrapValidator,供大家参考,具体内容如下 1.初级用法 来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3.从描述中我们就可以知道它至少需要jQuery.bootstrap的支持.我们首先引入需要的js组件: <script src="~/Scripts/jquery-1.10.2.js"></script> <sc
-
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
1.引入css与js bootstrapValidator.min.css bootstrapValidator.min.js 2.html中的modal代码 <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true&q
-
Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）
本文给大家介绍如何判断表单验证的实例代码,在没给大家介绍正文之前,先给大家介绍下插件. 插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用提示 中文化: 下载插件后,将\js\bootstrapValidator\language\zh_CN.js 引入文件,即实现中文化 提交前验证表单: 更丰富一点的表单验证例子:http://www.jq22.com/yanshi522,直接上代码: <!DOCTYPE h
-
利用bootstrapValidator验证UEditor
我们的项目使用了bootstrapValidator来作为前端校验,但是表单里面有一个UEditor,它用bootstrapValidator是没有效果的,为了页面风格统一,只要修修改改咯 首先来看一下修改后的效果 上面的UEditor是我们的业务需要调整成这样的,首先我们我们先把基本的结构写一写 <form style="padding-top:15px;width:100%" id="defaultForm"> <div class="
-
BootstrapValidator验证用户名已存在（ajax）
Java web项目:bootstrap实现注册页面,mvc模式联合mysql数据库检查用户名的唯一性. 一.实现效果: 重置这里有bug,bootstrapValidator验证不能重置,待解决. 二.代码准备: 引入bootstrap,bootstrapValidator和jquery. <link rel="stylesheet" href="<%=request.getContextPath() %>/css/bootstrap.min.css&qu
-
flask利用flask-wtf验证上传的文件的方法
利用flask-wtf验证上传的文件 定义验证表单类的时候,对文件类型的字段,需要采用FileField这个类型,即wtforms.FileField. 验证器需要从flask_wtf.file中导入.flask_wtf.file.FileRequired和flask_wtf.file.FileAllowed flask_wtf.file.FileRequired是用来验证文件上传不能为空. flask_wtf.file.FileAllowed用来验证上传的文件的后缀名, 如常见图片后缀.jpg
-
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
1.写在前面 这学期因为各种课内考试,竞赛活动,项目,(和女朋友约会 )
-
用Socket发送电子邮件(利用需要验证的SMTP服务器)
<? * 名称:用Socket发送电子邮件 * 描述:本类实现了直接使用需要验证的SMTP服务器直接发送邮件,参考文章<用Socket发送电子邮件>作者:limodou * 此文章比较早,他是用不用验证SMTP服务器发送邮件,现在基本上SMTP服务器都需要验证了,所以这个文章里的类 意义也不是很大!同时参考了[RFC 1869]和PHP手册!!和上文还有不同的是我用的不是fsockopen()函数 具体你自己看吧!!我刚刚测试通过
-
javascript实现的LI列表输出，隔行同色的代码
无标题文档 .mytable {border-collapse:collapse;border:solid #6AA70B;border-width:0px 0 0 0px;width:50%;} .mytable ul li {padding-top:5px;text-indent:2em;list-style:none;background:url(http://www.blueidea.com/img/common/new_flash.gif) 3px 50% no-repeat;bord
-
基于BootstrapValidator的Form表单验证(24)
Form表单进行数据验证是十分必要的,我们可以自己写JS脚本或者使用JQuery Validate 插件来实现.对于Bootstrap而言,利用BootstrapValidator来做Form表单验证是个相当不错的选择,两者完全兼容,我们也不用去关注CSS样式等美工效果. 0x01 引入BootstrapValidator 官网:BootstrapValidator,作为一个纯粹的使用者,我们可以在上面的链接处下载相关文件并引入,也可以利用CDN方式引入: <link href="//cd
-
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
本文实例讲述了Bootstrap简单实用的表单验证插件BootstrapValidator用法.分享给大家供大家参考,具体如下: Bootstrap是现在非常流行的一款前端框架,这篇来介绍一款基于Bootstrap的验证插件BootstrapValidator. 先来看一下效果图(样式是不是还不错O(∩_∩)O哈哈~). Bootstrapvalidator下载地址:https://github.com/nghuuphuoc/bootstrapvalidator/? 引入对应的CSS和JS <l
-
正则验证不能含有中文的实现方法【jQuery与java实现】
本文实例讲述了正则验证不能含有中文的实现方法.分享给大家供大家参考,具体如下: jQuery利用正则验证不能含有中文 var myReg = /^[a-zA-Z0-9_]{0,}$/; if (!myReg.test(input.val())) { $.validation.tip(false, input, "用户名不能含有中文或特殊字符"); return; } Java验证字符串没有中文 if (nickname.getBytes().length != nickname.len
-
iOS中使用正则表达式NSRegularExpression 来验证textfiled输入的内容
何谓正则表达式 正则表达式(regular expression),在计算机科学中,是指一个用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串.在很多文本编辑器或其他工具里,正则表达式通常被用来检索和/或替换那些符合某个模式的文本内容.正则表达式这个概念最初是由Unix中的工具软件(例如sed和grep)普及开的.正则表达式通常缩写成"regex",单数有regexp.regex,复数有regexps.regexes.regexen. 正则表达式组成 正则表达式有两种类型的字符