使用bootstrap中的bootstrapValidator,验证ckeditor富文本框不为空

引入js

 <script src="/components/ckeditor/ckeditor.js" type="text/javascript"></script>
   <script src="/components/ckeditor/adapters/jquery.js" type="text/javascript"></script>

1.jsp页面

  <textarea id="moduleDescribe" name="moduleDescribe"></textarea>

2,js

$('#moduleForm').bootstrapValidator({
      message: '此值没有被验证',
     //excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapValidator的默认配置
      excluded: [':disabled'],    //关键配置,表示只对于禁用域不进行验证,其他的表单元素都要验证
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
    fields: {/*验证:规则*/                           
        moduleDescribe: {//验证input项:验证规则
              message: '此描述无效',               
              validators: {
                  notEmpty: {//非空验证:提示消息
                      message: '详情介绍不能为空'
                  }
              }
          }
    }
})
.on('success.form.bv', function(e) {//点击提交之后
      // Prevent form submission
        e.preventDefault();
        // Get the form instance
        var $form = $(e.target);
        // Get the BootstrapValidator instance
        var bv = $form.data('bootstrapValidator');
        // Use Ajax to submit form data
        //此处调用提交方法
        
         
})
.find('[name="moduleDescribe"]').ckeditor().editor.on('change', function(){
    $('#moduleForm').bootstrapValidator('revalidateField', 'moduleDescribe');
});

标记为红的地方,都为验证富文本编辑器所必须要的代码(验证时已经启用了ckeditor,所以在textarea中不需要再class="ckeditor")


 


 

posted @ 2017-09-11 16:59  磨人小妖精  阅读(2660)  评论(0编辑  收藏  举报