JS验证代码，其中fields属性中的值，需要和HTML标签中的name值一样，确定给那个标签添加验证。
$('form').bootstrapValidator({
//默认提示
message: 'This value is not valid',
// 表单框里右侧的icon
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
submitHandler: function (validator, form, submitButton) {
// 表单提交成功时会调用此方法
// validator: 表单验证实例对象
// form jq对象 指定表单对象
// submitButton jq对象 指定提交按钮的对象
},
fields: {
username: {
message: '用户名验证失败',
validators: {
notEmpty: { //不能为空
message: '用户名不能为空'
},
remote: { //后台验证，比如查询用户名是否存在
url: 'student/verifyUsername',
message: '此用户名已存在'
}
}
},
name: {
message: '姓名验证失败',
validators: {
notEmpty: {
message: '姓名不能为空'
}
}
},
age: {
message: '年龄验证失败',
validators: {
notEmpty: {
message: '年龄不能为空'
},
numeric: {
message: '请填写数字'
}
}
},
phoneNumber: {
message: '电话号验证失败',
validators: {
notEmpty: {
message: '电话号不能为空'
},
regexp: { //正则验证
regexp: /^1\d{10}$/,
message: '请输入正确的电话号'
}
}
},
email: {
message: 'Email验证失败',
validators: {
notEmpty: {
message: 'Email不能为空'
},
emailAddress: { //验证email地址
message: '不是正确的email地址'
}
}
},
pwd: {
notEmpty: {
message: '密码不能为空'
},
stringLength: { //检测长度
min: 4,
max: 15,
message: '用户名需要在4~15个字符'
}
},
pwd1: {
message: '密码验证失败',
validators: {
notEmpty: {
message: '密码不能为空'
},
identical: { //与指定控件内容比较是否相同，比如两次密码不一致
field: 'pwd',//指定控件name
message: '两次密码不一致'
}
}
}
}
});
效果如下。
AJAX后台交互验证，验证用户名是否存在。
用户名
$('form').bootstrapValidator({
//默认提示
message: 'This value is not valid',
// 表单框里右侧的icon
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
submitHandler: function (validator, form, submitButton) {
// 表单提交成功时会调用此方法
// validator: 表单验证实例对象
// form jq对象 指定表单对象
// submitButton jq对象 指定提交按钮的对象
},
fields: {
username: {
message: '用户名验证失败',
validators: {
notEmpty: { //不能为空
message: '用户名不能为空'
},
remote: { //后台验证，比如查询用户名是否存在
url: 'student/verifyUsername',
message: '此用户名已存在'
}
}
}
}
});
后台验证返回格式必须为{“valid”, true or false} 的json数据格式。后台verifyUsername验证判断方法。
@RequestMapping(value="/verifyUsername")
@ResponseBody
public Map verifyUsername(String username){
Student stu = studentService.findByUsername(username);
Map map = new HashMap();
if (stu == null) {
map.put("valid", true);
}else{
map.put("valid", false);
}
return map;
}效果如下。
下面是几个比较常见的验证规则。
关于提交，可以直接用form表单提交即可。
提交
也可以通过AJAX提交，提交按钮代码和form表单的提交按钮代码一样，通过id选中按钮绑定点击事件提交。
$("#btn").click(function () { //非submit按钮点击后进行验证，如果是submit则无需此句直接验证
$("form").bootstrapValidator('validate'); //提交验证
if ($("form").data('bootstrapValidator').isValid()) { //获取验证结果，如果成功，执行下面代码
alert("yes"); //验证成功后的操作，如ajax
}
});效果图，这里验证通过后通过弹框提示的，方法中可以写AJAX提交代码。
页面完整代码。
学号
用户名
姓名
年龄
电话
Email
密码
确定密码
提交
$(function () {
$('form').bootstrapValidator({
//默认提示
message: 'This value is not valid',
// 表单框里右侧的icon
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
submitHandler: function (validator, form, submitButton) {
// 表单提交成功时会调用此方法
// validator: 表单验证实例对象
// form jq对象 指定表单对象
// submitButton jq对象 指定提交按钮的对象
},
fields: {
username: {
message: '用户名验证失败',
validators: {
notEmpty: { //不能为空
message: '用户名不能为空'
},
remote: { //后台验证，比如查询用户名是否存在
url: 'student/verifyUsername',
message: '此用户名已存在'
}
}
},
name: {
message: '姓名验证失败',
validators: {
notEmpty: {
message: '姓名不能为空'
}
}
},
age: {
message: '年龄验证失败',
validators: {
notEmpty: {
message: '年龄不能为空'
},
numeric: {
message: '请填写数字'
}
}
},
phoneNumber: {
message: '电话号验证失败',
validators: {
notEmpty: {
message: '电话号不能为空'
},
regexp: { //正则验证
regexp: /^1\d{10}$/,
message: '请输入正确的电话号'
}
}
},
email: {
message: 'Email验证失败',
validators: {
notEmpty: {
message: 'Email不能为空'
},
emailAddress: { //验证email地址
message: '不是正确的email地址'
}
}
},
pwd: {
notEmpty: {
message: '密码不能为空'
},
stringLength: { //检测长度
min: 4,
max: 15,
message: '用户名需要在4~15个字符'
}
},
pwd1: {
message: '密码验证失败',
validators: {
notEmpty: {
message: '密码不能为空'
},
identical: { //与指定控件内容比较是否相同，比如两次密码不一致
field: 'pwd',//指定控件name
message: '两次密码不一致'
}
}
}
}
});
$("#btn").click(function () { //非submit按钮点击后进行验证，如果是submit则无需此句直接验证
$("form").bootstrapValidator('validate'); //提交验证
if ($("form").data('bootstrapValidator').isValid()) { //获取验证结果，如果成功，执行下面代码
alert("yes"); //验证成功后的操作，如ajax
}
});
})
Bootstrap是什么
Bootstrap是目前最受欢迎的前端框架，它是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷，它还有一个响应最好的Grid系统，并且能够在手机端通用，而Bootstrap是使用许多可重用的CSS和JavaScript组件，可以帮助实现需要的几乎任何类型的网站的功能，此外，所有这些组件都是响应式的。
以上是“Bootstrap中表单验证插件BootstrapValidator怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
本文题目：Bootstrap中表单验证插件BootstrapValidator怎么用
本文URL：http://cxhlcq.com/article/giopos.html
-
在线咨询
微信咨询
电话咨询
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回顶部
重庆分公司
重庆分公司
