bootstrapValidator常用验证规则总结一 、bootstrapValidator引入在使用bootstrapValidator前我们需要引入bootstrap和bootstrapValidator对应的js和css文件。<link rel="stylesheet" href="css/bootstrap.min.css" />  <link rel="stylesheet"  href="bootstarp-validator/bootstrapValidator.css}"/><!-- 1、Jquery组件引用  --><script src="js/jquery-1.10.2.min.js"  th:src="@{/js/jquery-1.10.2.min.js}"></script> <!-- 2、bootstrap组件引用  --><script src="js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script><!-- 3、引入bootstrapValidator的js  --><script type="text/javascript"  th:src="@{js/bootstraptable/bootstrapValidator.js}"></script>

二、绑定验证的js代码<div class="modal-dialog"><div class="modal-content"><div class="modal-body"><form id="form-wizard" enctype="multipart/form-data"name="form-wizard" class="form-horizontal"><div class="form-group"><label class="control-label col-lg-3" for="username">用户名</label><div class="col-lg-6"><input type="text"  class="form-control" name="username" id="username"    placeholder="username"></div></div><div class="form-group"><label class="control-label col-lg-3">密码</label><div class="col-lg-6"><input type="password" class="form-control" name="password" /></div></div><div class="form-group"><label class="control-label col-lg-3" for="remark">备注</label><div class="col-lg-6"><input type="text"  class="form-control" name="remark" id="remark"    placeholder="remark"></div></div></form></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary" id="saveButton">提交</button></div></div></div>$(function() {$('#form-wizard').bootstrapValidator({        // excluded: [':disabled', ':hidden', ':not(:visible)'],//默认指定不验证的情况message : 'This value is not valid',feedbackIcons : {valid : 'glyphicon glyphicon-ok',invalid : 'glyphicon glyphicon-remove',validating : 'glyphicon glyphicon-refresh'},fields : {username: {  /*键名username和input name值对应*/message: '用户名不能为空',//默认提示信息
                        validators: {notEmpty: { /*非空提示*/message: '用户名必填不能为空'},stringLength: { /*长度提示*/min: 6,max: 30,message: '用户名长度不能小于6位或超过30位'},regexp: { /*正则校验*/regexp: /^[a-zA-Z0-9_\.]+$/,message: '用户名只能由字母、数字、点和下划线组成。'},}},password: {message:'密码无效',validators: {notEmpty: {message: '密码不能为空'},stringLength: {min: 6,max: 30,message: '密码长度必须在6到30之间'}}},remark : {validators : {notEmpty : {message : '备注必填'},stringLength : {min : 2,max : 200,message : '备注长度必须2-200字符'} }},  }});//提交按钮,所有验证通过方可提交$("#saveButton").click(function() {var flag = $('#form-wizard').bootstrapValidator('validate').data('bootstrapValidator').isValid();if (flag) {alert("校验通过");                    }});});
注意:

bootstrapValidator默认配置对于“隐藏域(:hidden)、禁用域(:disabled)、不可见域(:not (visible))”是不进行验证的。通过excluded: [':disabled']配置,表示只对于禁用域不进行验证,其他的表单元素都要验证.

三.在validators中一些验证规则的总结

1.判断字段是否为空notEmpty: {message: '用户名必填不能为空'},2.字段长度判断stringLength: {min: 6,max: 30,message: '长度不能小于6位或超过30位'},3.通过正则表达式进行验证regexp: {regexp: /^[A-Z\s]+$/i,message: '只能由字母字符和空格组成。'},4.大小写验证stringCase: {message: '姓氏必须只包含大写字符。',case: 'upper'//其他值或不填表示只能小写字符
                },5.两个字段不相同的判断different: {field: 'password',message: '用户名和密码不能相同。'},6.email验证emailAddress: {message: 'The input is not a valid email address'},7.日期格式验证date: {format: 'YYYY/MM/DD',message: '日期无效'},8.纯数字验证digits: {message: '该值只能包含数字。'},9.ajax验证threshold :  6 , //有6字符以上才发送ajax请求,(input中输入一个字符,插件会向服务器发送一次,设置限制,6字符以上才开始)remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值,获得一个json            数据。例表示正确:{"valid",true}  url: 'exist2.do',//验证地址message: '用户已存在',//提示消息delay :  2000,//每输入一个字符,就发ajax请求,服务器压力还是太大,设置2秒发送一次ajax(默认输入一个字                符,提交一次,服务器压力太大)type: 'POST'//请求方式
     },10.复选框验证choice: {min: 2,max: 4,message: '请选择2-4项'},11.密码确认identical: {field: 'Password',   //指定控件name  message: 'The password and its confirm are not the same'},12.判断输入数字是否符合大于等于18并且小于等于65greaterThan: {value: 18},lessThan: {value: 65}四、常用事件1、重置某一单一验证字段验证规则$(formName).data(“bootstrapValidator”).updateStatus("fieldName",  "NOT_VALIDATED",  null );2、重置表单所有验证规则$(formName).data("bootstrapValidator").resetForm();3、手动触发表单验证//触发全部验证
    $(formName).data(“bootstrapValidator”).validate();//触发指定字段的验证$(formName).data(“bootstrapValidator”).validateField('fieldName');4、获取当前表单验证状态// flag = true/false var flag = $(formName).data(“bootstrapValidator”).isValid();5、根据指定字段名称获取验证对象// element = jq对象 / nullvar element = $(formName).data(“bootstrapValidator”).getFieldElements('fieldName');

学习 :http://www.bootcdn.cn/

  http://bootstrapvalidator.votintsev.ru/getting-started/

相关链接: https://blog.csdn.net/u013938465/article/details/53507109

    https://blog.csdn.net/qq_26431469/article/details/52022345

对隐藏域值校验: https://blog.csdn.net/zsg88/article/details/72597956

转载于:https://www.cnblogs.com/Steven5007/p/8796709.html

bootstrapValidator常用验证规则总结相关推荐

  1. bootstrap必填红心_bootstrap插件bootstrapValidator常用验证规则总结

    在validators中一些验证规则的总结 1.判断字段是否为空 notEmpty: { message: '用户名必填不能为空' } 2.字段长度判断 stringLength: { min: 6, ...

  2. Yii2.0 rules常用验证规则

    设置一个修改方法,但是save(),没有成功,数据修改失败,查了好久,一般情况就是不符合rules规则,而我没有设置rules规则,重新设置了一个不能为空,然后就修改成功,rules里面什么也不写,也 ...

  3. bootstrapvalidator已定义的验证规则

    bootstrapvalidator已定义的验证规则 说明 查找bootstrapValidator的选项options 查找bootstrapValidator的已验证规则 常用规则 说明 这里使用 ...

  4. JQuery validate 各项验证规则讲解

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 使用样例见:http://blog.csdn.net/jiangyu1013/article/det ...

  5. php字段验证规则,详解ThinkPHP中自动验证及验证规则

    本篇文章详细介绍了thinkphp中自动验证及验证规则的方法,希望对学习thinkphp的朋友有帮助! 详解ThinkPHP中自动验证及验证规则 ThinkPHP 内置了数据对象的自动验证功能来完成模 ...

  6. php自动验证,ThinkPHP 自动验证及验证规则详解

    ThinkPHP 自动验证 ThinkPHP 内置了数据对象的自动验证功能来完成模型的业务规则验证.自动验证是基于数据对象的,而大多情况下数据对象是基于 $_POST表单 (不是绝对的)创建的. 基本 ...

  7. MVC数据验证原理及自定义ModelValidatorProvider实现无编译修改验证规则和错误信息...

    Asp.net MVC中的提供非常简单易用的数据验证解决方案. 通过System.ComponentModel.DataAnnotations提供的很多的验证规则(Required, StringLe ...

  8. php字段验证规则,ThinkPHP 自动验证及验证规则详解

    ThinkPHP 自动验证及验证规则详解 ThinkPHP 自动验证 ThinkPHP 内置了数据对象的自动验证功能来完成模型的业务规则验证.自动验证是基于数据对象的,而大多情况下数据对象是基于 $_ ...

  9. iview 表单 验证_iview必备技能一、表单验证规则

    iView表单组件使用async-validator验证器对表单域中数据进行验证,给 Form 设置属性 rules,同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可. 完整的 ...

  10. 建立索引常用的规则如下

    建立索引常用的规则如下:  1.表的主键.外键必须有索引: 2.数据量超过300的表应该有索引: 3.经常与其他表进行连接的表,在连接字段上应该建立索引: 4.经常出现在Where子句中的字段,特别是 ...

最新文章

  1. wireshark从入门到精通(协议排错安全篇)7
  2. Netty之SimpleChannelInboundHandler
  3. IT界程序员几大恶习能立即让你变穷,你有吗?
  4. 【奥运代表团加油】ABAP字符处理杂例
  5. tensorflow生成图片标签_Tensorboard高维向量可视化 + 解决标签和图片不显示BUG
  6. 生成step文件_利用opencv给彦女王生成一副蒙太奇画像
  7. 《设计模式详解》结构型模式 - 代理模式
  8. 畅通工程(kruskal算法)
  9. 染用计算机语言,着色器语言
  10. 全日制大专计算机专业一天几节课,大学一节课多长时间 一天上几节
  11. Delphi-日期时间函数
  12. 读李尚龙《你只是看起来很努力》摘录的句子
  13. 基于Web实现在线绘画拓扑图[GraphEditor]
  14. 优酷视频如何登录优酷账号?
  15. 在线进行立体几何画图——GeoGebra
  16. 软件工程几门课程之间的关系
  17. ubuntu windows 分别安装openslide
  18. oracle转trs,TRS数据库数据的导入导出2.doc
  19. linux7防火墙端口映射,使用centos7防火墙firewall实现端口映射,实现远程内网3389桌面...
  20. SSH tunnel tips

热门文章

  1. 浅谈 HTTPS 和 SSL -TLS 协议的背景与基础
  2. SqlServer常用对象查询
  3. IE6下png图片透明设置
  4. Process Explorer 进程管理及排错利器(上)
  5. 07. Declare destructors virtual in polymorphic base classes
  6. 用字符串模拟两个大数的相加
  7. java语言 跨平台_Java语言不一定就跨平台
  8. flask如何查询mysql_如何从Flask应用中的MySQL查询返回数据?
  9. 爬虫实例4 爬取网络小说
  10. c语言数组题库答案,C语言数组百道练习题含答案.pdf