jquery插件bootstrapValidator表单验证详解


Posted in Javascript onDecember 15, 2016

Bootstrap Validator是为Bootstrap3设计的一款表单验证jQuery插件,非常适合基于Bootstrap框架的网站。
看作者的github,这款插件已经不再更新了,而推荐使用FormValidation,不过现在还是先介绍一下BootstrapValidator的使用。

准备工作

BootstrapValidator文档地址:http://bv.doc.javake.cn/

下载源码后,将其中的bootstrapValidator.min.css和bootstapValidator.min.js导入项目,并在页面中引入这些组件,如下:

<link rel="stylesheet" type="text/css" href="path/bootstrapValidator.min.css">
<script type="text/javascript" src="path/bootstrapValidator.min.js"></script>

其中path是对应文件导入项目的路径

简单应用

文档中给出调用插件的方法是:

$(document).ready(function() {
 $(formSelector).bootstrapValidator({
 excluded: ...,
 feedbackIcons: ...,
 live: 'enabled',
 message: 'This value is not valid',
 submitButtons: 'button[type="submit"]',
 submitHandler: null,
 trigger: null,
 fields: {
 <fieldName>: {
 enabled: true,
 message: 'This value is not valid',
 container: null,
 selector: null,
 trigger: null,
 // Map the validator name with its options
 validators: {
 ...
 <validatorName>: <validatorOptions>
 ...
 }
 }
 ...
 }
 });
});

下面针对一个简单的表单来进行说明:

<form id="logForm" class="form-horizontal">
 <div class="form-group">
 <label class="col-lg-3 control-label">用户名</label>
 <div class="col-lg-5">
 <input type="text" class="form-control" name="username" />
 </div>
 </div>
 <div class="form-group">
 <label class="col-lg-3 control-label">邮箱</label>
 <div class="col-lg-5">
 <input type="text" class="form-control" name="email" />
 </div>
 </div>
 <div class="form-group">
 <label class="col-lg-3 control-label">密码</label>
 <div class="col-lg-5">
 <input type="password" class="form-control" name="password" />
 </div>
 </div>
 <button type="submit" class="btn btn-md">提交</button>
</form>

对于上面这个表单应用BootstrapValidator非常简单,fieldName 对应表单中每一项的 name 属性,然后BV还内置了很多 validator 供用户选择,详细可参考文档的 validators 部分,可以看到,邮箱格式的验证正是其中之一,不需要用户自己写正则了。

$(document).ready(function() {
 $('#signup-form').bootstrapValidator({
 fields: {
 username: {
 validators: {
 notEmpty: {
 message: '用户名不能为空'
 },
 stringLength: {
 min: 3,
 max: 6,
 message: '用户名只能在3-6个字符之间哦~'
 }
 }
 },
 email: {
 validators: {
 emailAddress: {
 message: '邮箱格式有误'
 }
 }
 },
 password: {
 validators: {
 notEmpty: {
 message: '密码不能为空'
 },
 stringLength: {
 min: 6,
 max: 8,
 message: '密码必须在6-8个字符之间~'
 },
 regexp: {
 regexp: /^[a-zA-Z0-9]+$/,
 message: '密码只能由字母、数字组成~'
 }
 }
 }
 }
 });
});

不符合验证要求时,会显示错误提示的message,并且禁用提交按钮,提示信息的颜色字体等等都可以重写css来设置,效果展示如下:

jquery插件bootstrapValidator表单验证详解

注:图中的注册按钮处于禁用状态

下面再介绍一下fields的 selector,因为表单数据往往是属于某一个注册用户所有,为方便与后台进行数据交互,我们往往按如下的形式设置name,这时候就不能直接利用name属性来进行验证了,而是使用selector来定义fields:

<form class="form-horizontal">
 <div class="form-group">
 <label class="col-lg-3 control-label">用户名</label>
 <div class="col-lg-5">
 <input type="text" id="user" class="form-control" name="login_user.userName" />
 </div>
 </div>
 <div class="form-group">
 <label class="col-lg-3 control-label">密码</label>
 <div class="col-lg-5">
 <input type="password" id="pass" class="form-control" name="login_user.password" />
 </div>
 </div>
 <button type="submit" id="submitBtn" class="btn btn-md">提交</button>
</form>

对应的js代码:

$(document).ready(function() {
 $('#signup-form').bootstrapValidator({
 fields: {
 user: {
 selector: '#user', 
 validators: {
 notEmpty: {
 message: '用户名不能为空'
 },
 stringLength: {
 min: 3,
 max: 6,
 message: '用户名只能在3-6个字符之间哦~'
 }
 }
 },
 pass: {
 selector: '#pass',
 validators: {
 notEmpty: {
 message: '密码不能为空'
 },
 stringLength: {
 min: 6,
 max: 8,
 message: '密码必须在6-8个字符之间~'
 },
 regexp: {
 regexp: /^[a-zA-Z0-9]+$/,
 message: '密码只能由字母、数字组成~'
 }
 }
 }
 }
 });
});

如果你嫌弃这样写代码累赘,可以直接应用相应的HTML属性,详细可参考文档的 settings 部分

jquery插件bootstrapValidator表单验证详解

还想深入学习表单验证的朋友,可以点击专题:jquery表单验证大全 JavaScript表单验证大全

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上只是BootstrapValidator的一个非常简单的应用, 官方文档 很详细,感兴趣的话就继续查阅,来深入了解它的强大功能吧

Javascript 相关文章推荐
基于jQuery的公告无限循环滚动实现代码
May 11 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
完美解决iview 的select下拉框选项错位的问题
Mar 02 Javascript
webpack4.0打包优化策略整理小结
Mar 30 Javascript
angularjs实现的购物金额计算工具示例
May 08 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
May 16 Javascript
JS定义函数的几种常用方法小结
May 23 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 Javascript
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
jQuery中的100个技巧汇总
Dec 15 #Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 #Javascript
详解jQuery中的事件
Dec 14 #Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 #Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 #Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 #Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 #Javascript
You might like
详谈PHP编码转换问题
2015/07/28 PHP
php判断目录存在的简单方法
2019/09/26 PHP
js 操作符汇总
2014/11/08 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
JavaScript定时器实现的原理分析
2016/12/06 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
Python利用Django如何写restful api接口详解
2018/06/08 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
大数据分析用java还是Python
2020/07/06 Python
通过代码实例了解Python异常本质
2020/09/16 Python
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
简历中自我评价怎么写
2014/02/12 职场文书
服务理念标语
2014/06/18 职场文书
小学生读书活动总结
2014/06/30 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
个人授权委托书样本
2014/09/13 职场文书
导游词怎么写
2015/02/04 职场文书
工程合作意向书范本
2015/05/09 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
Golang 并发编程 SingleFlight模式
2022/04/26 Golang
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers