bootstrapValidator表单校验插件使用教程

前期准备

因为bootstrapValidator插件是基于jquery和bootstrap的,所以需要引入jquery和bootstrap对应的js和css文件。

文件引入

1.Jquery

Jquery.js
Jquery.css

2.Bootstrap

Bootstrap.js
Bootstrap.css

3.bootstrapValidator

bootstrapValidator.js
bootstrapValidator.css

注意本次插件引入的是bootstrapValidator插件,而不是bootstrap-validator这两个插件的关系还搞清楚,bootstrapValidator插件中的方法是$('#tmplForm').bootstrapValidator({})lai初始化校验,而bootstrap-validator中是另一个方法。

插件使用

对应的文件引入之后,就可以使用插件了,这是官方API网址:http://bootstrapvalidator.votintsev.ru/api/

添加检验

1.普通节点添加校验
$(function(){/* 初始化*/
 $('#formId').bootstrapValidator({
     excluded: [":hidden", ":disabled"], //[':disabled', ':hidden', ':not(:visible)'] //设置隐藏组件可验证
     feedbackIcons: {
         valid: 'glyphicon glyphicon-ok',//检验时表单显示对勾或叉
         invalid: 'glyphicon glyphicon-remove',
         validating: 'glyphicon glyphicon-refresh'
     },
     //添加验证
     fields: {
         //可以通过input的name属性,为其添加校验(name='username')
         username: {
             \\验证规则
             validators: {
                 //非空验证
                 notEmpty: {
                     message: '用户名不能为空'
                 },
                 stringLength: {
                     min: 6,
                     max: 30,
                     message: '用户名长度必须在6到30之间'
                 },
             }
         },
         //可以通过input的name属性,为其添加校验(name='admin.username')
         'admin.username': {//如果name中包含".",则需要打上引号
             \\验证规则
             validators: {
                 //非空验证
                 notEmpty: {
                     message: '用户名不能为空'
                 }
             }
         },
         //可以通过input的id,为其添加校验(id='password')
         password: {//这个地方的名字似乎可以自定义
             selector: '#password',
             validators: {
                 notEmpty: {
                     message: '密码不能为空'
                 }
             }
         }
     }
 })

其他节点都可以通过name或者id添加校验。

2.动态节点添加校验
 $('#formId').bootstrapValidator('addField', 'admin.username', {
        validators: {
            notEmpty: {
                message: '管理员名称不能为空'
            }
        }
}); //给动态生成的元素增加校验(开启校验)

'addField'是bootstrapValidator的一个function,固定不能修改,'admin.username'是该动态节点的name属性值(name='admin.username'),能否通过id属性为节点添加属性暂时未测试。(应该是可以的吧....)

校验类型

bootstrapValidator已经提供了很多校验的类型,下面来一一介绍一下:

1.不为空校验
   notEmpty: {
          message: '用户名不能为空'
   }
2.字符串长度校验
  stringLength: {
        min: 6,
        max: 30,
        message: '用户名长度必须在6到30之间'
}
3.远程数据校验(与后台Servlet交互)
   //有6字符以上才发送ajax请求,(input中输入一个字符,插件会向服务器发送一次,设置限制,6字符以上才开始)
  threshold :  6 , 
  //远程数据校验
  remote: {
    type: "post",//请求类型
    url: '后台地址',//后台地址
    message: "标识不能重复",
    dataType: 'json',
    data: {
                    //传入后台的值
            username: function() {
                 return $('#username').val();
        }
  },
  //500毫秒请求一次后台
  delay: 500

总结

fields:{
}
里面是需要进行校验的节点,多个通过","号隔开

validators: {
}
里面是某个节点校验的类型加参数,多个通过","号隔开

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容