Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
作者：一枕江风 发布时间：2024-04-08 10:55:44
标签：Bootstrap,表单验证插件,BootstrapValidator
本文实例讲述了Bootstrap简单实用的表单验证插件BootstrapValidator用法。分享给大家供大家参考，具体如下：
Bootstrap是现在非常流行的一款前端框架，这篇来介绍一款基于Bootstrap的验证插件BootstrapValidator。
先来看一下效果图（样式是不是还不错O(∩_∩)O哈哈~）。
Bootstrapvalidator下载地址：https://github.com/nghuuphuoc/bootstrapvalidator/?
引入对应的CSS和JS
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="css/bootstrapValidator.css" rel="external nofollow" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/bootstrapValidator.js"></script>
添加验证规则
使用HTML添加验证。
对某一个标签添加验证规则，需要放在<div class="form-group"></div>标签中，input标签必须有name属性值，此值为验证匹配的字段。其实就是要符合bootstrap表单结构。
<div class="form-group">
<label class="col-md-2 control-label">学号</label>
<div class="col-md-6">
<input type="text" class="form-control" name="stuNumber" data-bv-notempty="true" data-bv-notempty-message="用户名不能为空" />
</div>
</div>
初始化bootstrapValidator。
<script type="text/javascript">
$('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对象 指定提交按钮的对象
}
});
</script>
效果图。
使用data-bv-notempty 和 data-bv-notempty-message属性就可以简单进行非空验证。data-bv-notempty 有值就进行非空验证，data-bv-notempty-message 中的值为提示消息。
使用JS添加验证
HTML样式代码。
<div class="form-group">
<label class="col-md-2 control-label">姓名</label>
<div class="col-md-6">
<input type="text" class="form-control" name="name" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">年龄</label>
<div class="col-md-6">
<input type="text" class="form-control" name="age" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">电话</label>
<div class="col-md-6">
<input type="text" class="form-control" name="phoneNumber" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">密码</label>
<div class="col-md-6">
<input type="text" class="form-control" name="pwd" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">确定密码</label>
<div class="col-md-6">
<input type="text" class="form-control" name="pwd1" />
</div>
</div>
JS验证代码，其中fields属性中的值，需要和HTML标签中的name值一样，确定给那个标签添加验证。
<script type="text/javascript">
$('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: '两次密码不一致'
}
}
}
}
});
</script>
效果如下。
AJAX后台交互验证，验证用户名是否存在。
<div class="form-group">
<label class="col-md-2 control-label">用户名</label>
<div class="col-md-6">
<input type="text" class="form-control" name="username" />
</div>
</div>
<script type="text/javascript">
$('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: '此用户名已存在'
}
}
}
}
});
</script>
后台验证返回格式必须为{“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;
}
效果如下。
下面是几个比较常见的验证规则。
notEmpty：非空验证；
stringLength：字符串长度验证；
regexp：正则表达式验证；
emailAddress：邮箱地址验证（都不用我们去写邮箱的正则了~~）
base64：64位编码验证；
between：验证输入值必须在某一个范围值以内，比如大于10小于100；
creditCard：身份证验证；
date：日期验证；
ip：IP地址验证；
numeric：数值验证；
url：url验证；
callback：自定义验证
Form表单的提交
关于提交，可以直接用form表单提交即可。
<div class="form-group">
<div class="col-md-6 col-md-offset-2">
<button id="btn" type="submit" class="btn btn-primary">提交</button>
</div>
</div>
也可以通过AJAX提交，提交按钮代码和form表单的提交按钮代码一样，通过id选中按钮绑定点击事件提交。
$("#btn").click(function () { //非submit按钮点击后进行验证，如果是submit则无需此句直接验证
$("form").bootstrapValidator('validate'); //提交验证
if ($("form").data('bootstrapValidator').isValid()) { //获取验证结果，如果成功，执行下面代码
alert("yes"); //验证成功后的操作，如ajax
}
});
效果图，这里验证通过后通过弹框提示的，方法中可以写AJAX提交代码。
页面完整代码。
<meta charset="UTF-8">
<form action="" class="form-horizontal">
<div class="form-group">
<label class="col-md-2 control-label">学号</label>
<div class="col-md-6">
<input type="text" class="form-control" name="stuNumber" data-bv-notempty="true" data-bv-notempty-message="用户名不能为空" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">用户名</label>
<div class="col-md-6">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">姓名</label>
<div class="col-md-6">
<input type="text" class="form-control" name="name" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">年龄</label>
<div class="col-md-6">
<input type="text" class="form-control" name="age" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">电话</label>
<div class="col-md-6">
<input type="text" class="form-control" name="phoneNumber" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">密码</label>
<div class="col-md-6">
<input type="text" class="form-control" name="pwd" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">确定密码</label>
<div class="col-md-6">
<input type="text" class="form-control" name="pwd1" />
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-2">
<button id="btn" type="submit" class="btn btn-primary">提交</button>
</div>
</div>
</form>
<script type="text/javascript">
$(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
}
});
})
</script>
到这里，BootstrapValidator验证插件的方法已经写的很全面了。不足地方欢迎大家下方留言指出！
可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
希望本文所述对大家基于bootstrap的程序设计有所帮助。
来源：https://blog.csdn.net/qq_40205116/article/details/97027846
0
投稿猜你喜欢
网上找了很多资料，都不理想。其实ubuntu20以后的版本，很多功能都预装好了，安装django也没有以前的版本那么复杂。很简单，只需要几步- 问：Perl下应当如何连接Access数据库答：首先需要安装Win32-ODBC模块，具体的步骤如下：1：从TOOLS栏目中下载Win32-
- 字符串是不可变类型，可以重新赋值，但不可以索引改变其中一个值，只能拼接字符串建立新变量索引和切片索引：越界会报错切片：越界会自动修改不包含右
- iterator循环器(iterator)是对象的容器，包含有多个对象。通过调用循环器的next()方法 (next()方法，在Python
- 一、定义协程asyncio 执行的任务，称为协程，但是Asyncio 并不能带来真正的并行Python 的多线程因为 GIL（全局解释器锁）
- 上线 Django 项目记录，超简单，避免无意义的踩坑！第一步：安装python管理器在宝塔在线面板安装“ python项目管理器 ”第二步
- 首先导入包含apriori算法的mlxtend库，pip install mlxtend调用apriori进行关联规则分析，具体代码如下，其
- 首先，单表的UPDATE语句：UPDATE [LOW_PRIORITY] [IGNORE] tbl_nameSET col_name1=ex
- Mysql慢查询解释MySQL的慢查询日志是MySQL提供的一种日志记录，它用来记录在MySQL中响应时间超过阀值的语句，具体指运行时间超过
- 本文主要介绍了python opencv 找出图像中的最大轮廓并填充，分享给大家，具体如下：import cv2import numpy a
- 1、使用说明首先说明，本文所使用的功能为pycharm专业版所支持，其他版本如社区版，教育版，则不一定支持。作为一名后端开发，我猜你的桌面上
- 实例是具象化的类，它可以作为类访问所有静态绑定到类上的属性，包括类变量与方法，也可以作为实例访问动态绑定到实例上的属性。实例1：class
- 目录技术背景python对Excel表格的处理vaex的安装与使用vaex的安装性能对比数据格式转换总结概要技术背景数据处理是一个当下非常热
- python字典怎么排序？定义一个字典类型mydict = {2: '小路', 3: '黎明', 1: &#
- 前言如果大家在网上搜索Python 正则表达式，你将会看到大量的垃圾文章会这样写代码：import repattern = re.compi
- 本文实例讲述了Python实现OpenCV的安装与使用。分享给大家供大家参考，具体如下：由于下一步要开始研究下深度学习，而深度学习领域很多的
- aspjpeg组件官方下载地址：http://www.persits.com/说明： 1、aspjpeg能对图片水印进行透明度调整
- 今天继续给大家介绍Python相关知识，本文主要内容是Python asyncio异步编程常见问题。一、asyncio编程简单示例首先，我们
- 这回我们看看如何实现判断两个对像的内容是否相等。这里有一个克隆结果原则是针对Java语言的,当然JavaScript也可以胜任。克隆满足的条
- 其所用项目由Asp.Net技术开发，仍然使用的Webform作为前端处理，但某些功能包含了jQuery的功能，他遇到的问题就是无论用IE还是
