利用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下为truecontents.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下为truecontents.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啥的自己记得加上去。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。