Bootstrapvalidator 前端自定义验证和ajax远程访问后端验证

概述

Bootstrapvalidator是一款bootstrap风格的表单验证插件，拥有非常强大的验证功能，如果系统使用的是bootstrap，那么验证插件非此莫属。

Bootstrapvalidator的github地址：https://github.com/nghuuphuoc/bootstrapvalidator/

Bootstrapvalidator的API文档：http://formvalidation.io/api/

Bootstrapvalidator的demo：http://formvalidation.io/examples/

目前Bootstrapvalidator最新版在http://formvalidation.io发布的好像收费了，只能使用github上的早期版本了，然后api及例子文档见：

http://bootstrapvalidator.votintsev.ru/

一般的校验因为demo写的很详细了，所以就不多说了下面介绍两个比较重要的扩展

重点

1.前端自定义验证

Bootstrapvalidator的前端自定义验证为callback，

文档地址：http://bootstrapvalidator.votintsev.ru/validators/callback/ 下面为例子代码：

"rowkey": {
message: 'rowkey验证失败',
validators: {
stringLength:{
max: 1000,
message: 'rowkey不能超过1000个字符'
},
callback:{
callback : function(value, validator, $field) {
if ($('input:radio[name="databaseType"]:checked').val() == "Hbase" &&
value == ""){
return {
valid: false,
message: 'rowkey不能为空'
}
}
else{
return true
}
}
}
}
}

2.ajax后端自定义验证、

Bootstrapvalidator的前端自定义验证为remote，在数据库验重时经常会用到

文档地址：http://bootstrapvalidator.votintsev.ru/validators/remote/ 下面为例子代码：

前端：

"tableName": {
message: '表名称验证失败',
validators: {
notEmpty: {
message: '表名称不能为空'
},
stringLength:{
max: 100,
message: '表名称不能超过100个字符'
},
remote: {
message: '表名重复',
url: 'check',
data : '',//这里默认会传递该验证字段的值到后端
delay:2000 //这里特别要说明，必须要加此属性，否则用户输入一个字就会访问后台一次，会消耗大量的系统资源，
}
}
},

后端：

//检测新增metaTableName是否重复
def check(){
def map = new HashMap()
def result = service.check(params.name)
if(result){
map.put("valid",true)
}else{
map.put("valid",false)
}
render(map as JSON) //注意后端传到前端的格式必须是带有valid属性的json对象才会被validator识别
}