使用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 相关文章推荐
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
基于jquery用于查询操作的实现代码
May 10 Javascript
js获取系统的根路径实现介绍
Sep 08 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
Jul 03 Javascript
vue项目中引入Sass实例方法
Aug 27 Javascript
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
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
PHP模块化安装教程
2016/06/01 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
PHP 实现缩略图
2021/03/09 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
python中threading超线程用法实例分析
2015/05/16 Python
python实现关键词提取的示例讲解
2018/04/28 Python
python矩阵的转置和逆转实例
2018/12/12 Python
python实现按行分割文件
2019/07/22 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
python实现ftp文件传输功能
2020/03/20 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
保洁主管岗位职责
2013/11/20 职场文书
计算机学生求职信范文
2014/01/30 职场文书
加油口号大全
2014/06/13 职场文书
小学生作文评语集锦
2014/12/25 职场文书
试用期自我评价范文
2015/03/10 职场文书
2016党校培训心得体会
2016/01/07 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python