使用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 相关文章推荐
获取JavaScript用户自定义类的类名称的代码
Mar 08 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 Javascript
js实现表单检测及表单提示的方法
Aug 14 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
如何实现echarts markline标签名显示自己想要的
Jul 20 Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 Javascript
JS实现百度搜索框
Feb 25 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
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
php远程下载类分享
2016/04/13 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
js date 格式化
2017/02/15 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
vue.js中过滤器的使用教程
2017/06/08 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
深入浅析javascript函数中with
2018/10/28 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
python正则表达式之对号入座篇
2018/07/24 Python
Python基础之文件读取的讲解
2019/02/16 Python
Python实现某论坛自动签到功能
2019/08/20 Python
详解python中各种文件打开模式
2020/01/19 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
中国医药集团国药在线:国药网
2017/02/06 全球购物
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
三年级语文教学反思
2014/02/01 职场文书
保护动物倡议书
2014/04/15 职场文书
工作证明书
2015/06/15 职场文书
分享几个简单MySQL优化小妙招
2022/03/31 MySQL
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS