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

  • 相关阅读:
    ES6 学习记录
    Windows 服务开发 以及 重启IIS应用池
    IIS部署.net core 3.1踩坑总结
    VS 2019背景全透明以及插件、特效
    深拷贝和浅拷贝的区别
    Vue全家桶以及常用知识点
    C#设计模式
    博客园装扮教程
    Exp5 单元测试
    Exp4 代码评审
  • 原文地址:https://www.cnblogs.com/xizhu/p/9783929.html
Copyright © 2020-2023  润新知