使用bootstrap validator的remote验证代码经验分享(推荐)


Posted in Javascript onSeptember 21, 2016

这里需要说一下,bootstrapvalidator的帮助文档写的比较简单,对于remote验证器的说明更是如此,在经历多方测试之后才明白如何使用这个验证器。

一个典型的ajax验证代码如下:

使用bootstrap validator的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...
});
});
});

以上所述是小编给大家介绍的使用bootstrap validator的remote验证经验分享(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
JS判断数组里是否有重复元素的方法小结
May 21 Javascript
工作中常用js功能汇总
Nov 07 Javascript
Vue实现点击当前行变色
Dec 14 Vue.js
D3.js实现柱状图的方法详解
Sep 21 #Javascript
AngularJS ng-style中使用filter
Sep 21 #Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 #Javascript
JS实现简单的tab切换选项卡效果
Sep 21 #Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 #Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 #Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 #Javascript
You might like
php smarty函数扩展
2010/03/15 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
jquery 问答知识整理
2010/02/11 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
Vue-Router模式和钩子的用法
2018/02/28 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
python socket 超时设置 errno 10054
2014/07/01 Python
举例区分Python中的浅复制与深复制
2015/07/02 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
python脚本第一行如何写
2020/08/30 Python
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
运动会致辞稿50字
2014/02/04 职场文书
勾股定理课后反思
2014/04/26 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
查摆问题自查报告范文
2014/10/13 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
中学音乐课教学反思
2016/02/18 职场文书