使用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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
vue如何判断dom的class
Apr 26 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
基于JavaScript 实现拖放功能
Sep 12 Javascript
如何基于js判断浏览器版本
Feb 20 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
php设计模式 Proxy (代理模式)
2011/06/26 PHP
PHP四大安全策略
2014/03/12 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
5 cool javascript apps
2007/03/24 Javascript
JS小框架 fly javascript framework
2009/11/26 Javascript
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
javascript基本类型详解
2014/11/28 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
Vue自定义指令详解
2017/07/28 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
深入理解javascript prototype的相关知识
2019/09/19 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
Python程序设计入门(4)模块和包
2014/06/16 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
网页美工求职信范文
2014/04/17 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
企业公益活动策划方案
2014/08/24 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
医院领导班子整改方案
2014/10/01 职场文书
班主任先进事迹材料
2014/12/17 职场文书
小学生思想品德评语
2014/12/31 职场文书
pytorch实现ResNet结构的实例代码
2021/05/17 Python