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插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
JSON 数字排序多字段排序介绍
Sep 18 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
vue-cli系列之vue-cli-service整体架构浅析
Jan 14 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 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
各种战术和打法的原创者
2020/03/04 星际争霸
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
javascript基本类型详解
2014/11/28 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
Python中实现的RC4算法
2015/02/14 Python
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
Python读大数据txt
2016/03/28 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
python列表list保留顺序去重的实例
2018/12/14 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
交通安全演讲稿
2014/01/07 职场文书
高中生家长寄语大全
2014/04/03 职场文书
人力资源职位说明书
2014/07/29 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
MySQL命令行操作时的编码问题详解
2021/04/14 MySQL
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android