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 相关文章推荐
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
jquery批量控制form禁用的代码
Aug 06 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
jQuery实现邮箱下拉列表自动补全功能
Sep 08 Javascript
vue实现组件之间传值功能示例
Jul 13 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
JavaScript 作用域scope简单汇总
Oct 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 has encountered an Access Violation
2007/01/15 PHP
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
使用PHP Socket写的POP3类
2013/10/30 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
vue实现文字加密功能
2019/09/27 Javascript
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
python装饰器decorator介绍
2014/11/21 Python
简介Python中用于处理字符串的center()方法
2015/05/18 Python
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
Python如何定义接口和抽象类
2020/07/28 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
岗位说明书标准范本
2014/07/30 职场文书
家具商场的活动方案
2014/08/16 职场文书
土地转让协议书
2014/09/27 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android
python实现会员信息管理系统(List)
2022/03/18 Python