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 相关文章推荐
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
JavaScript操作Cookie详解
Feb 28 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
vue-router跳转时打开新页面的两种方法
Jul 29 Javascript
微信小程序学习之自定义滚动弹窗
Dec 20 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
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
python类的继承实例详解
2017/03/30 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
军训的自我鉴定
2013/12/10 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
周年庆典邀请函范文
2014/01/23 职场文书
市场营销调查计划书
2014/05/02 职场文书
大学毕业生求职自荐书
2014/06/05 职场文书
五一促销活动总结
2014/07/01 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
开会通知
2015/04/20 职场文书
拾金不昧通报表扬范文
2015/05/05 职场文书
2015年科普工作总结
2015/07/23 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
Python+Tkinter打造签名设计工具
2022/04/01 Python