callback 函数可以写自己的方法校验
issueInvoiceForm.validation = function(){
$('#issueInvoiceForm').on('init.field.bv', function(e, data) {
var $icon = data.element.data('bv.icon'),
options = data.bv.getOptions(), // Entire options
validators = data.bv.getOptions(data.field).validators; // The field validators
if (validators.notEmpty && options.feedbackIcons && options.feedbackIcons.required) {
$icon.addClass(options.feedbackIcons.required).show();
}
}).bootstrapValidator({
container:'popover',
feedbackIcons: {
required: 'glyphicon glyphicon-asterisk requiredStar',
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
invoiceDate:{validators: {notEmpty: {message: '开票日期不能为空'}}},//开票日期
code:{validators: {notEmpty: {message: '发票编码不能为空'}}},
amount:{
validators:{
notEmpty: {message: '发票金额不能为空'},
numeric: {message: '发票金额只能输入数字'},
callback: {
message: '开票金额小于选中金额',
callback: function(value, validator) {
return false;
}
}
}
},
taxRate:{
validators:{
notEmpty: {message: '税率不能为空'},
numeric: {message: '税率只能输入数字'}
}
},
taxAmount:{
validators:{
notEmpty: {message: '税额不能为空'},
numeric: {message: '税额只能输入数字'}
}
},
},group:'.validateDiv'
}).on('success.form.bv', issueInvoiceForm.issueInvoiceFormBtn).on('error.form.bv',function(){
$("#issueInvoiceFormBtn").removeAttr("disabled");//将保存按钮去除disabled
$(".has-error:visible:first").find(":input").focus();
});
};
remote服务器校验
服务端验证代码(使用spring mvc)如下:
/*
* 返回String类型的结果
* 检查用户名的合法性,如果用户已经存在，返回false，否则返回true(返回json数据，格式为{"valid",true})
*/
@RequestMapping(value = "/checkNameExistsMethod1", produces = "application/json;charset=UTF-8")
public @ResponseBody
String checkNameValidMethod1(@RequestParam String name) {
boolean result = true;
List<Employee> lstEmployees = employeeService.getAllEmployees();
for (Employee employee : lstEmployees) {
if (employee.getName().equals(name)) {
result = false;
break;
}
}
Map<String, Boolean> map = new HashMap<>();
map.put("valid", result);
ObjectMapper mapper = new ObjectMapper();
String resultString = "";
try {
resultString = mapper.writeValueAsString(map);
} catch (JsonProcessingException e) {
e.printStackTrace();
}
return resultString;
}
这里需要说明的是bootstrap的remote验证器需要的返回结果一定是json格式的数据 :
{"valid":false} //表示不合法，验证不通过
{"valid":true} //表示合法，验证通过
如果返回任何其他的值，页面验证将获取不到验证结果导致无法验证。
附一段完整的远程remote验证的代码加说明：
$(function(){/* 文档加载，执行一个函数*/
$('#defaultForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {/*input状态样式图片*/
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {/*验证：规则*/
username: {//验证input项：验证规则
message: 'The username is not valid',
validators: {
notEmpty: {//非空验证：提示消息
message: '用户名不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '用户名长度必须在6到30之间'
},
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'//请求方式
/**自定义提交数据，默认值提交当前input value
* data: function(validator) {
return {
password: $('[name="passwordNameAttributeInYourForm"]').val(),
whatever: $('[name="whateverNameAttributeInYourForm"]').val()
};
}
*/
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '用户名由数字字母下划线和.组成'
}
}
},
password: {
message:'密码无效',
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '用户名长度必须在6到30之间'
},
identical: {//相同
field: 'password', //需要进行比较的input name值
message: '两次密码不一致'
},
different: {//不能和用户名相同
field: 'username',//需要进行比较的input name值
message: '不能和用户名相同'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
repassword: {
message: '密码无效',
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '用户名长度必须在6到30之间'
},
identical: {//相同
field: 'password',
message: '两次密码不一致'
},
different: {//不能和用户名相同
field: 'username',
message: '不能和用户名相同'
},
regexp: {//匹配规则
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: '邮件不能为空'
},
emailAddress: {
message: '请输入正确的邮件地址如：123@qq.com'
}
}
},
phone: {
message: 'The phone is not valid',
validators: {
notEmpty: {
message: '手机号码不能为空'
},
stringLength: {
min: 11,
max: 11,
message: '请输入11位手机号码'
},
regexp: {
regexp: /^1[3|5|8]{1}[0-9]{9}$/,
message: '请输入正确的手机号码'
}
}
},
invite: {
message: '邀请码',
validators: {
notEmpty: {
message: '邀请码不能为空'
},
stringLength: {
min: 8,
max: 8,
message: '请输入正确长度的邀请码'
},
regexp: {
regexp: /^[\w]{8}$/,
message: '请输入正确的邀请码(包含数字字母)'
}
}
},
}
})
.on('success.form.bv', function(e) {//点击提交之后
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data 提交至form标签中的action，result自定义
$.post($form.attr('action'), $form.serialize(), function(result) {
//do something...
});
});
});
