zoukankan      html  css  js  c++  java
  • 云平台项目--学习经验--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/ 官网

  • 相关阅读:
    bootstrap图片上传控件 fileinput
    Redis学习总结(一)--Redis入门
    Spring学习之旅(十五)--SpringBoot
    Spring学习之旅(十四)--缓存
    Spring学习之旅(十三)--使用NoSQL数据库
    Spring学习之旅(十二)--持久化框架
    Spring学习之旅(十一)--JDBC
    Spring学习之旅(十)--MockMvc
    Spring学习之旅(九)--SpringMVC高级技术
    Spring学习之旅(八)--SpringMVC请求参数
  • 原文地址:https://www.cnblogs.com/xizhu/p/9783929.html
Copyright © 2011-2022 走看看