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 中的 call 和 apply使用介绍
Feb 22 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
用console.table()调试javascript
Sep 04 Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
解决百度Echarts图表坐标轴越界的方法
Oct 17 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 Javascript
vue绑定数字类型 value为数字的实例
Aug 31 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获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
对联广告js flash激活
2006/10/19 Javascript
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
js原型链原理看图说明
2012/07/07 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
Python自动登录126邮箱的方法
2015/07/10 Python
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
详解Python 函数如何重载?
2019/04/23 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
django页面跳转问题及注意事项
2019/07/18 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
美国校园市场:OCM
2017/06/08 全球购物
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
办公室人员先进事迹
2014/01/27 职场文书
阳光体育活动总结
2014/04/30 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
顶岗实习协议书
2015/01/29 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
一文解答什么是MySQL的回表
2022/08/05 MySQL