使用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 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
javascript 树形导航菜单实例代码
Aug 13 Javascript
通过url查找a元素并点击
Apr 09 Javascript
jqGrid读取选择的多行的某个属性代码
May 18 Javascript
javascript 回调函数详解
Nov 11 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
Dec 26 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 Javascript
angular仿支付宝密码框输入效果
Mar 25 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 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启动时候提示PHP startup的解决方法
2013/05/07 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
Python语言描述随机梯度下降法
2018/01/04 Python
pandas删除指定行详解
2019/04/04 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
如何利用python生成MD5并去重
2020/12/07 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
数据库连接池的工作原理
2012/09/26 面试题
华三通信H3C面试题
2015/05/15 面试题
中学优秀班主任事迹材料
2014/05/01 职场文书
英文导游词
2015/02/13 职场文书
护士自我推荐信范文
2015/03/24 职场文书
企业愿景口号
2015/12/25 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书
微信小程序实现轮播图指示器
2022/06/25 Javascript