• 云平台项目--学习经验--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/ 官网

  • 相关阅读:
    vue中使用better-scroll实现滑动效果
    better-scroll一个好用的页面滑动工具
    display:table和display:table-cell结合使用
    大小图片
    axios的使用
    vue中两种路由跳转拼接参数
    Android 核心分析 之七Service深入分析
    Android 核心分析 之六 IPC框架分析 Binder,Service,Service manager
    Android 核心分析 之五基本空间划分
    Android核心分析之四手机的软件形态
  • 原文地址:https://www.cnblogs.com/xizhu/p/9783929.html
Copyright © 2020-2023  润新知