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 相关文章推荐
document.compatMode介绍
May 21 Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
caller和callee的区别介绍及演示结果
Mar 10 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
理解javascript中的MVC模式
Jan 28 Javascript
JavaScript中获取时间的函数集
Aug 16 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
利用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
深思 PHP 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
php 设计模式之 工厂模式
2008/12/19 PHP
zf框架的registry(注册表)使用示例
2014/03/13 PHP
PHP页面实现定时跳转的方法
2014/10/31 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
使用纯php代码实现页面伪静态的方法
2015/07/25 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
Vue中Axios从远程/后台读取数据
2019/01/21 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
一文了解Vue中的nextTick
2019/05/06 Javascript
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
python比较2个xml内容的方法
2015/05/11 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
python发送告警邮件脚本
2018/09/17 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
Python实现一个论文下载器的过程
2021/01/18 Python
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
电气工程师岗位职责
2014/01/01 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
乡镇爱国卫生月活动总结
2014/06/25 职场文书
森林防火宣传标语
2014/06/27 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python