这里需要说一下，bootstrapvalidator的帮助文档写的比较简单，对于remote验证器的说明更是如此，在经历多方测试之后才明白如何使用这个验证器。
一个典型的ajax验证代码如下:
服务端验证代码(使用spring mvc)如下:
rush:js;">
/*
* 返回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 lstemployees = employeeService.getAllEmployees();
for (Employee employee : lstemployees) {
if (employee.getName().equals(name)) {
result = false;
break;
}
}
Map 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格式的数据 :
rush:js;">
{"valid":false} //表示不合法，验证不通过
{"valid":true} //表示合法，验证通过
如果返回任何其他的值，页面验证将获取不到验证结果导致无法验证。
附一段完整的远程remote验证的代码加说明：
rush:js;">
$(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: '密码不能为空'
},identical: {//相同
field: 'password',//需要进行比较的input name值
message: '两次密码不一致'
},different: {//不能和用户名相同
field: 'username',//需要进行比较的input name值
message: '不能和用户名相同'
},message: 'The username can only consist of alphabetical,number,dot and underscore'
}
}
},repassword: {
message: '密码无效',validators: {
notEmpty: {
message: '用户名不能为空'
},message: '两次密码不一致'
},message: '不能和用户名相同'
},regexp: {//匹配规则
regexp: /^[a-zA-Z0-9_\.]+$/,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...
});
});
});
以上所述是小编给大家介绍的使用bootstrap validator的remote验证经验分享(推荐)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
