使用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 相关文章推荐
js程序中美元符号$是什么
Jun 05 Javascript
JavaScript CSS修改学习第六章 拖拽
Feb 19 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
Angular的$http与$location
Dec 26 Javascript
纯js实现倒计时功能
Jan 06 Javascript
javascript实现考勤日历功能
Nov 29 Javascript
vue实现购物车小案例
Sep 27 Javascript
element 动态合并表格的步骤
Dec 31 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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
php中static静态变量的使用方法详解
2010/06/04 PHP
php学习之简单计算器实现代码
2011/06/09 PHP
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
php简单获取复选框值的方法
2016/05/11 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
编写Js代码要注意的几条规则
2010/09/10 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
法院先进个人事迹材料
2014/05/04 职场文书
代收款委托书范本
2014/10/01 职场文书
保险公司增员口号
2015/12/25 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
数据库之SQL技巧整理案例
2021/07/07 SQL Server