一、 引入js 和css文件

在有jquery和bootstrap的页面里引入

  1.   bootstrapValidator.js
  2.   bootstrapValidator.css

链接: https://pan.baidu.com/s/1eGMPFGISB618gYFttGPgaw 密码: 请加我qq(2353806846)获取

二、 编写html

然后建立一个form表单,添加表单控件,若对某一字段想添加验证规则,

默认需要以<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 文件

$(function () {
$("#form-test").bootstrapValidator({
live: 'disabled',//验证时机,enabled是内容有变化就验证(默认),disabled和submitted是提交再验证
excluded: [':disabled', ':hidden', ':not(:visible)'],//排除无需验证的控件,比如被禁用的或者被隐藏的
submitButtons: '#btn-test',//指定提交按钮,如果验证失败则变成disabled,但我没试成功,反而加了这句话非submit按钮也会提交到action指定页面
message: '通用的验证失败消息',//好像从来没出现过
feedbackIcons: {//根据验证结果显示的各种图标
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
text: {
validators: {
notEmpty: {//检测非空,radio也可用
message: '文本框必须输入'
},
stringLength: {//检测长度
min: ,
max: ,
message: '长度必须在6-30之间'
},
regexp: {//正则验证
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '所输入的字符不符要求'
},
remote: {//将内容发送至指定页面验证,返回验证结果,比如查询用户名是否存在
url: '指定页面',
message: 'The username is not available'
},
different: {//与指定文本框比较内容相同
field: '指定文本框name',
message: '不能与指定文本框内容相同'
},
emailAddress: {//验证email地址
message: '不是正确的email地址'
},
identical: {//与指定控件内容比较是否相同,比如两次密码不一致
field: 'confirmPassword',//指定控件name
message: '输入的内容不一致'
},
date: {//验证指定的日期格式
format: 'YYYY/MM/DD',
message: '日期格式不正确'
},
choice: {//check控件选择的数量
min: ,
max: ,
message: '必须选择2-4个选项'
}
}
}
}
});
$("#btn-test").click(function () {//非submit按钮点击后进行验证,如果是submit则无需此句直接验证
$("#form-test").bootstrapValidator('validate');//提交验证
if ($("#form-test").data('bootstrapValidator').isValid()) {//获取验证结果,如果成功,执行下面代码
alert("yes");//验证成功后的操作,如ajax
}
});
});

四、前端自定义验证规则

1、回调自定义验证

Bootstrapvalidator的前端自定义验证为callback

"rowkey": {
message: 'rowkey验证失败',
validators: {
stringLength:{
max: ,
message: 'rowkey不能超过1000个字符'
},
callback:{
callback : function(value, validator, $field) {
if ($('input:radio[name="databaseType"]:checked').val() == "Hbase" &&
value == ""){
return {
valid: false,
message: 'rowkey不能为空'
}
}
else{
return true
}
}
}
}
}

2、拓展插件的validators方法

将项目中常用的方法放到了一个单独js中

$(function () {
$.fn.bootstrapValidator.validators.checkIdCard = {
/**
* @param {BootstrapValidator} 表单验证实例对象
* @param {jQuery} $field jQuery 对象
* @param {Object} 表单验证配置项值
* @returns {boolean}
*/
validate: function (validator, $field, options) {
// debugger;
try {
return checkIdCardNo($field.val());
}catch (e){
console.error(e);
}
return false;
}
};
}(window.jQuery));

3、remote 后端自定义验证

Bootstrapvalidator的前端自定义验证为remote,在数据库验重时经常会用到

"tableName": {
message: '表名称验证失败',
validators: {
notEmpty: {
message: '表名称不能为空'
},
stringLength:{
max: ,
message: '表名称不能超过100个字符'
},
remote: {
message: '表名重复',
url: 'check',
data : '',//这里默认会传递该验证字段的值到后端
delay: //这里特别要说明,必须要加此属性,否则用户输入一个字就会访问后台一次,会消耗大量的系统资源,
}
}
},

后端代码:

//检测新增metaTableName是否重复
def check(){
def map = new HashMap()
def result = service.check(params.name)
if(result){
map.put("valid",true)
}else{
map.put("valid",false)
}
render(map as JSON) // 注意后端传到前端的格式必须是带有valid属性的json对象才会被validator识别,
                 // 如果返回任何其他的值,页面验证将获取不到验证结果导致无法验证
}
  1. {"valid":false} //表示不合法,验证不通过
  2. {"valid":true} //表示合法,验证通过

五、常用事件

1、获取validator对象或实例

一般使用校验是直接调用$(form).bootstrapValidator(options)来初始化validator。初始化后有两种方式获取validator对象或实例,可以用来调用其对象的方法,比如调用resetForm来重置表单。有两种方式获取:
1)

// Get plugin instance
var bootstrapValidator = $(form).data('bootstrapValidator');
// and then call method
bootstrapValidator.methodName(parameters)

这种方式获取的是BootstrapValidator的实例,可以直接调用其方法。
2)

两种方式的使用分别如下:

// The first way
$(form)
.data('bootstrapValidator')
.updateStatus('birthday', 'NOT_VALIDATED')
.validateField('birthday'); // The second one
$(form)
.bootstrapValidator('updateStatus', 'birthday', 'NOT_VALIDATED')
.bootstrapValidator('validateField', 'birthday');

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

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

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

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

4、手动触发表单验证

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

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

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

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

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

BootstrapValidator 表单验证超详细教程的更多相关文章

  1. vue表单验证--veevalidate使用教程

    vue表单验证----vee-validate使用教程 官网:https://baianat.github.io/vee-validate/ 一.安装 npm install vee-validate ...

  2. BootStrapValidator表单验证插件的学习和使用

    BootStrapValidator表单验证插件的学习和使用 引入标签 <script type="text/javascript" src="https://cd ...

  3. bootstrapValidator表单验证插件

    bootstrapValidator——一个很好用的表单验证插件,再也不用手写验证规则啦! bootstrapValidator官方文档:http://bootstrapvalidator.votin ...

  4. bootstrapValidator 表单验证

    官网下载地址:http://plugins.jquery.com/bootstrapValidator/ html代码 <!DOCTYPE html> <html> <h ...

  5. 【前端_js】Bootstrap之表单验证

    Bootstrap表单验证插件bootstrapValidator使用方法整理 BootstrapValidator 表单验证超详细教程    

  6. 表单验证——JqueryValidator、BootstrapValidator

    表单验证两种方式: 1.JqueryValidator <!DOCTYPE html> <html lang="en"> <head> < ...

  7. BootstrapValidator超详细教程

    一.引入必要文件 下载地址:(https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip) <link rel=&qu ...

  8. struts2官方 中文教程 系列六:表单验证

    先贴个本帖的地址,以免被爬:struts2教程 官方系列六:表单验证  即 http://www.cnblogs.com/linghaoxinpian/p/6906720.html 下载本章节代码 介 ...

  9. jquery.validate.js 表单验证简单用法

    引入jquery.validate.js插件以及Jquery,在最后加上这个插件的方法名来引用.$('form').validate(); <!DOCTYPE html PUBLIC " ...

随机推荐

  1. C++ Multimap运用实例

    C++ Multimap运用实例 #include <map> #include <string> #include <iostream> #include < ...

  2. Linux部署springboot项目,两种方式

    部署jar包(官方推荐) 在linux服务器上运行Jar文件时通常的方法是: $ java -jar test.jar 这种方式特点是ssh窗口关闭时,程序中止运行.或者是运行时没法切出去执行其他任务 ...

  3. 华硕主板 Vmware虚拟机 二进制转换与此平台上的长模式不兼容

    出现情况如下: 大概遇到过两次这个问题,第一次是在笔记本VM上装虚拟机,第二次是在台式机VM上装虚拟机. 原因是因为虚拟化(Intel Virtualization Technology)技术,在主板 ...

  4. vux中XDialog组件,修改weui-mask(半透明遮罩)

    场景:XDialog组件的遮罩的透明度是background: rgba(0, 0, 0, 0.6);而期望是75%的透明度: 项目构成:vue,vux 最终实现效果: 思路:首先想到了修改组件下we ...

  5. java concurrent并发包使用

    package cn.com.zxf.atomic; import java.util.concurrent.atomic.AtomicInteger; public class AtomicExam ...

  6. vscode-tab按键失效变为切换功能的解决方法

    有一种可能是无意中按到了ctrl+m,此时VSCode右下角会出现Tab Moves focus的字样,如下: 用ctrl + m 可以切换两种状态.没有Tab Moves focus字样的时候,就是 ...

  7. Celery-管理与监控

    1. 监控和管理Workers 1.1 将celery实例放入shell [root@node2 app]# celery -A tasks shell Python 3.6.5 (default, ...

  8. linux 下mysql 关闭 启动

    一. 启动 .使用 service 启动:service mysql start .使用 mysqld 脚本启动:/etc/init.d/mysql start .使用 safe_mysqld 启动: ...

  9. remote origin already exists解决办法

    如图翻译过来就是:致命:远程来源已经存在 此时,我们可以先 git remote -v 查看远程库信息: 可以看到,本地库已经关联了origin的远程库,并且,该远程库指向GitHub. 解决办法如下 ...

  10. 十分钟读懂JavaScript原型和原型链

    原型(prototype)这个词来自拉丁文的词proto,意谓“最初的”,意义是形式或模型.在JavaScript中,原型的探索也有很多有趣的地方,接下来跟随我的脚步去看看吧. 原型对象释义 每一个构 ...