BootstrapValidator 表单验证超详细教程
一、 引入js 和css文件
在有jquery和bootstrap的页面里引入
- bootstrapValidator.js
- 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识别,
// 如果返回任何其他的值,页面验证将获取不到验证结果导致无法验证
}
- {"valid":false} //表示不合法,验证不通过
- {"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 表单验证超详细教程的更多相关文章
- vue表单验证--veevalidate使用教程
vue表单验证----vee-validate使用教程 官网:https://baianat.github.io/vee-validate/ 一.安装 npm install vee-validate ...
- BootStrapValidator表单验证插件的学习和使用
BootStrapValidator表单验证插件的学习和使用 引入标签 <script type="text/javascript" src="https://cd ...
- bootstrapValidator表单验证插件
bootstrapValidator——一个很好用的表单验证插件,再也不用手写验证规则啦! bootstrapValidator官方文档:http://bootstrapvalidator.votin ...
- bootstrapValidator 表单验证
官网下载地址:http://plugins.jquery.com/bootstrapValidator/ html代码 <!DOCTYPE html> <html> <h ...
- 【前端_js】Bootstrap之表单验证
Bootstrap表单验证插件bootstrapValidator使用方法整理 BootstrapValidator 表单验证超详细教程
- 表单验证——JqueryValidator、BootstrapValidator
表单验证两种方式: 1.JqueryValidator <!DOCTYPE html> <html lang="en"> <head> < ...
- BootstrapValidator超详细教程
一.引入必要文件 下载地址:(https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip) <link rel=&qu ...
- struts2官方 中文教程 系列六:表单验证
先贴个本帖的地址,以免被爬:struts2教程 官方系列六:表单验证 即 http://www.cnblogs.com/linghaoxinpian/p/6906720.html 下载本章节代码 介 ...
- jquery.validate.js 表单验证简单用法
引入jquery.validate.js插件以及Jquery,在最后加上这个插件的方法名来引用.$('form').validate(); <!DOCTYPE html PUBLIC " ...
随机推荐
- python工程设置工具(pipenv)
原始安装 pip工具 --- 包安装工具, 可以从Python包索引hub上安装,也可以使用自定义的hub. 命令: pip install xxx 缺点: 1.命令方式, 一次只能安装一个包, 对于 ...
- PMP 1~3章错题总结
工作到了一定的年限,都或多或少想了解管理的知识,PMP是国际认证的一项考试,招聘要求上也有提及. 不需要报名培训班,万能的某宝即可解决报名.PDU.学习资料的问题,但3900的考试费还是免不了的,为了 ...
- microsoft vs code 绿化
下载地址: https://code.visualstudio.com/#alt-downloads 各个版本比较 User Installer System Installer .zip resou ...
- element ui + sortablejs实现表格的行列拖拽
<template> <div class="container"> <el-table :data="tableData" bo ...
- SpringBoot小技巧:统一异常处理
SpringBoot小技巧:统一异常处理 情景描述 对于接口的定义,我们通常会有一个固定的格式,比如: 但是调用方在请求我们的API时把接口地址写错了,就会得到一个404错误,且不同于我们定义的数据格 ...
- SpringBoot之@EnableAutoConfiguration注解
源地址:https://blog.csdn.net/zxc123e/article/details/80222967 虽然定义使用了多个Annotation进行了原信息标注,但实际上重要的只有三个An ...
- 【整理】【docker】【Linux】整理笔记
1.Linux安装docker 参考文章:https://blog.csdn.net/yanpenglei/article/details/78944553 Docker 要求系统的内核版本高于 3. ...
- Spring boot + mybatis + mysql代码生成器
引入依赖: 在pom文件最下边: <build> <plugins> <!--逆向工程--> <plugin> <groupId>org.m ...
- 一致性hash算法应用场景、详解与实现(JAVA)
一.概述 在分布式环境下,开发者通常会遇到一些分布存储的场景,例如数据库的分库分表(比如用户id尾号为1的放入数据库1,id尾号为2的放入数据库2):又如分布式缓存数据的获取(比如根据ip地址进行缓存 ...
- 【剑指offer】平衡二叉树
题目描述 输入一棵二叉树,判断该二叉树是否是平衡二叉树. 分析:采用后序遍历的方式判断左右子树的高度差是否大于1 class Solution { public: bool flag; int f(T ...