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

使用前提,需要加载jquery和bootstrap库。
并且引入bootstrapValidator.js和bootstrapValidator.css文件
然后建立一个form表单,添加表单控件,表单控件需要有绝对定位。不然会报错
例如:
<form class="form-horizontal clearfix" onsubmit="return false">
  <div class="form-group col-sm-12 col-md-12">
    <label for="discuss_editor_item_text" class="col-sm-2 col-md-2 control-label">评论内容:</label>
      <div class="col-sm-10 col-md-10">
        <textarea id="discuss_editor_item_text" class="form-control" name="text" rows="8">{{:text}}</textarea>
        <p class="help-block"></p>
      </div>
  </div>
</form>
js部分编写文件如下:
setValidator:function() {
  $('form',‘#discuss_editor’).bootstrapValidator({
  message:'必须填写',//不满足条件时的提示消息
  feedbackIcons: { //根据验证结果显示出来的各种图标
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
},
fields:{
  text:{
    validators:{
      notEmpty:{}, //检测非空
      stringLength: { //检测长度
        max: 3000,
        utf8Bytes: true,
        message: "不能超过1000字"
        }
      }
    }
  }
})
}
validate: function() {
  $('form', ‘#discuss_editor’).data('bootstrapValidator').validate();
  return $('form', ‘#discuss_editor’).data('bootstrapValidator').isValid();
}
*******************************
*验证部分要有form-group包裹 
*input要有class="form-control"
*name属性规定验证机制的名字 
*******************************
除了检测是否空值和长度以外,还有很多种检测如regexp(正则检测)、remote(将内容发送到指定页面检测)、different(与指定的文本框比较内容)、emailAddress(email地址检测)等等,具体可参考http://bootstrapvalidator.votintsev.ru/settings/ 官网

posted @ 2018-10-13 19:53  JanzKing  阅读(185)  评论(0编辑  收藏  举报