前期准备
因为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: {
}
里面是某个节点校验的类型加参数,多个通过","号隔开