zoukankan      html  css  js  c++  java
  • 使用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")

    
    
    
    
    
    
  • 相关阅读:
    Android中的httpclient框架发送get请求
    成员函数的重载&amp;&amp;隐藏&amp;&amp;覆盖
    子墨庖丁Android的ActionBar源代码分析 (一)实例化
    Hadoop2.x介绍与源代码编译
    NFS 服务器的配置
    tftp 服务器的配置
    LINUX内核及应用程序移植工作
    u-boot 移植工作目录
    Linux 下工作用户及环境
    zless
  • 原文地址:https://www.cnblogs.com/chen-yun/p/7505791.html
Copyright © 2011-2022 走看看