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 相关文章推荐
JavaScript 节点操作 以及DOMDocument属性和方法
Dec 06 Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
详解javascript对数组和json数组的操作
Apr 15 Javascript
JavaScript变量Dom对象的所有属性
Apr 30 Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 Javascript
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 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
javascript求日期差的方法
2016/03/02 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
Python读写Excel文件的实例
2013/11/01 Python
Python中列表(list)操作方法汇总
2014/08/18 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
《Python学习手册》学习总结
2018/01/17 Python
美国老牌主机服务商:iPage
2016/07/22 全球购物
一套PHP的笔试题
2013/05/31 面试题
法院实习人员自我鉴定
2013/09/26 职场文书
质检部部长职责
2013/12/16 职场文书
优秀毕业生求职信范文
2014/01/02 职场文书
项目投资意向书
2014/04/01 职场文书
青岛导游词
2015/02/12 职场文书
小学大队委竞选口号
2015/12/25 职场文书
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android