BootstrapValidator超详细教程(推荐)


Posted in Javascript onDecember 07, 2016

一、引入必要文件

下载地址:(https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip)

<link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/path/to/dist/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="/path/to/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script>
// 带众多常用默认验证规则的
<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator-all.js"></script>
// 不带常用规则,需自定义规则
<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.min.js"></script>
//此方法是我编写常用的自定义规则的,也可直接写到对应的表单的js中
<script type="text/javascript" src="/path/to/dist/js/validator/atfmCustomValidatorRules.js"></script>

二、编写HTML

在表单中,若对某一字段想添加验证规则,默认需要以<div class=”form-group”></div>包裹(对应错误提示会根据该class值定位),内部<input class="form-control" />标签必须有name属性值,此值为验证匹配字段。

注:该值不是绝对的,也可以通过js手动指定错误提示位置和验证的输入框(后续会讲解到)。

<form class="form-horizontal">
<div class="form-group">
<label class="col-lg-3 control-label">Username</label>
<div class="col-lg-9">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email address</label>
<div class="col-lg-9">
<input type="text" class="form-control" name="email" />
</div>
</div>
</form>

三、添加验证规则

1、添加到HTML上

<div class="form-group">
<label class="col-lg-3 control-label">Username</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="username"
data-bv-message="The username is not valid"
required
data-bv-notempty-message="The username is required and cannot be empty"
pattern="[a-zA-Z0-9]+"
data-bv-regexp-message="The username can only consist of alphabetical, number" />
</div>
</div>

2、添加到js上

注:以下参数上面的赋值都为默认值,不添加该参数即使用默认值

$(formSelector).bootstrapValidator({
/**
* 指定不验证的情况
* 值可设置为以下三种类型:
* 1、String ':disabled, :hidden, :not(:visible)'
* 2、Array 默认值 [':disabled', ':hidden', ':not(:visible)']
* 3、带回调函数 
[':disabled', ':hidden', function($field, validator) {
// $field 当前验证字段dom节点
// validator 验证实例对象 
// 可以再次自定义不要验证的规则
// 必须要return,return true or false; 
return !$field.is(':visible');
}]
*/
excluded: [':disabled', ':hidden', ':not(:visible)'],
/**
* 指定验证后验证字段的提示字体图标。(默认是bootstrap风格)
* Bootstrap 版本 >= 3.1.0
* 也可以使用任何自定义风格,只要引入好相关的字体文件即可
* 默认样式 
.form-horizontal .has-feedback .form-control-feedback {
top: 0;
right: 15px;
}
* 自定义该样式覆盖默认样式
.form-horizontal .has-feedback .form-control-feedback {
top: 0;
right: -15px;
}
.form-horizontal .has-feedback .input-group .form-control-feedback {
top: 0;
right: -30px;
}
*/
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
/**
* 生效规则(三选一)
* enabled 字段值有变化就触发验证
* disabled,submitted 当点击提交时验证并展示错误信息
*/
live: 'enabled',
/**
* 为每个字段指定通用错误提示语
*/
message: 'This value is not valid',
/**
* 指定提交的按钮,例如:'.submitBtn' '#submitBtn'
* 当表单验证不通过时,该按钮为disabled
*/
submitButtons: 'button[type="submit"]',
/**
* submitHandler: function(validator, form, submitButton) {
* //validator: 表单验证实例对象
* //form jq对象 指定表单对象
* //submitButton jq对象 指定提交按钮的对象
* }
* 在ajax提交表单时很实用
* submitHandler: function(validator, form, submitButton) {
// 实用ajax提交表单
$.post(form.attr('action'), form.serialize(), function(result) {
// .自定义回调逻辑
}, 'json');
}
* 
*/
submitHandler: null,
/**
* 为每个字段设置统一触发验证方式(也可在fields中为每个字段单独定义),默认是live配置的方式,数据改变就改变
* 也可以指定一个或多个(多个空格隔开) 'focus blur keyup'
*/
trigger: null,
/**
* Number类型 为每个字段设置统一的开始验证情况,当输入字符大于等于设置的数值后才实时触发验证
*/
threshold: null,
/**
* 表单域配置
*/
fields: {
//多个重复
<fieldName>: {
//隐藏或显示 该字段的验证
enabled: true,
//错误提示信息
message: 'This value is not valid',
/**
* 定义错误提示位置 值为CSS选择器设置方式
* 例如:'#firstNameMeg' '.lastNameMeg' '[data-stripe="exp-month"]'
*/
container: null,
/**
* 定义验证的节点,CSS选择器设置方式,可不必须是name值。
* 若是id,class, name属性,<fieldName>为该属性值
* 若是其他属性值且有中划线链接,<fieldName>转换为驼峰格式 selector: '[data-stripe="exp-month"]' => expMonth
*/
selector: null,
/**
* 定义触发验证方式(也可在fields中为每个字段单独定义),默认是live配置的方式,数据改变就改变
* 也可以指定一个或多个(多个空格隔开) 'focus blur keyup'
*/
trigger: null,
// 定义每个验证规则
validators: {
//多个重复
//官方默认验证参照 http://bv.doc.javake.cn/validators/
// 注:使用默认前提是引入了bootstrapValidator-all.js
// 若引入bootstrapValidator.js没有提供常用验证规则,需自定义验证规则哦
<validatorName>: <validatorOptions>
}
}
}
});

四、定义自定义验证规则

该规则是拓展插件的validators方法。

我将项目中常用的方法放到了一个单独js中,也就是上面第一步引用的自定义方法。

使用方法如下:

(function($) {
//自定义表单验证规则
$.fn.bootstrapValidator.validators = {
<validatorName> : {
/**
* @param {BootstrapValidator} 表单验证实例对象
* @param {jQuery} $field jQuery 对象
* @param {Object} 表单验证配置项值
* @returns {boolean}
*/
validate: function(validator, $field, options) {
// 表单输入的值
// var value = $field.val();
//options为<validatorOptions>对象,直接.获取需要的值
// 返回true/false
//也可返回{ valid : true/false, message: 'XXXX'}
return reg.test( $field.val() );
}
},
};
}(window.jQuery));

五、常用事件

1、重置某一单一验证字段验证规则

$(formName).data(“bootstrapValidator”).updateStatus("fieldName", "NOT_VALIDATED", null );

2、重置表单所有验证规则

$(formName).data("bootstrapValidator").resetForm();

3、手动触发表单验证

//触发全部验证
$(formName).data(“bootstrapValidator”).validate();
//触发指定字段的验证
$(formName).data(“bootstrapValidator”).validate('fieldName');

4、获取当前表单验证状态

// flag = true/false 
var flag = $(formName).data(“bootstrapValidator”).isValid();

5、根据指定字段名称获取验证对象

// element = jq对象 / null
var element = $(formName).data(“bootstrapValidator”).getFieldElements('fieldName');

六、表单提交

1、当提交按钮是普通按钮

手动触发表单验证

示例:

$("buttonName").on("click", function(){
//获取表单对象
var bootstrapValidator = form.data('bootstrapValidator');
//手动触发验证
bootstrapValidator.validate();
if(bootstrapValidator.isValid()){
//表单提交的方法、比如ajax提交
}
});

2、当提交按钮的[type=”submit”]时

会在success之前自动触发表单验证

var bootstrapValidator = form.data('bootstrapValidator');
bootstrapValidator.on('success.form.bv', function (e) {
e.preventDefault();
//提交逻辑
});

以上所述是小编给大家介绍的BootstrapValidator超详细教程(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 #Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 #Javascript
jquery实现文本框的禁用和启用
Dec 07 #Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 #Javascript
简单理解js的prototype属性及使用
Dec 07 #Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 #Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 #Javascript
You might like
文件上传的实现
2006/10/09 PHP
php面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
php实现简易计算器
2020/08/28 PHP
Javascript的一种模块模式
2010/09/08 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
Python Subprocess模块原理及实例
2019/08/26 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
《识字五》教学反思
2014/03/01 职场文书
城市创卫标语
2014/06/17 职场文书
管理标语大全
2014/06/24 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
职工食堂管理制度
2015/08/06 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫
详解Python中__new__方法的作用
2022/03/31 Python