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 相关文章推荐
JS 面向对象的5钟写法
Jul 31 Javascript
文本框回车提交与禁止提交示例
Sep 27 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
jQuery实现的简单百分比进度条效果示例
Aug 01 Javascript
详解Javascript中prototype属性(推荐)
Sep 03 Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
浅谈node的事件机制
Oct 09 Javascript
微信小程序实现收藏与取消收藏切换图片功能
Aug 03 Javascript
vue实现学生信息管理系统
May 30 Javascript
vue 导出文件,携带请求头token操作
Sep 10 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
xml+php动态载入与分页
2006/10/09 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
Python帮你识破双11的套路
2019/11/11 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
如何提高JDBC的性能
2013/04/30 面试题
EJB面试题
2015/07/28 面试题
音乐教育感言
2014/03/05 职场文书
2014个人年度工作总结
2014/12/15 职场文书
写给女朋友的保证书
2015/05/09 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
深入解析MySQL索引数据结构
2021/10/16 MySQL
Redis 限流器
2022/05/15 Redis