使用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中的常用事件总结
Dec 27 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
Jun 08 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
Jun 18 Javascript
如何实现iframe父子传参通信
Feb 05 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
PHILIPS AE3805收音机的分析打磨
2021/03/02 无线电
PHP安全配置详细说明
2011/09/26 PHP
php 模拟get_headers函数的代码示例
2013/04/27 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
2017/07/28 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
决策树的python实现方法
2014/11/18 Python
python验证码识别实例代码
2018/02/03 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
Python zip函数打包元素实例解析
2019/12/11 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
企业统计员岗位职责
2013/12/13 职场文书
创业计划书的主要内容有哪些
2014/01/29 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
三下乡活动心得体会
2016/01/23 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
Python机器学习之PCA降维算法详解
2021/05/19 Python
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL