BootStrapValidator初使用教程详解
bootstrap：能够增加兼容性的强大框架.
因为项目需要数据验证，看bootstrapValidator 还不错，就上手一直，完美兼容，话不多说。
需要引用css：
bootstrap.min.css
bootstrapValidator.min.css
js:
jQuery-1.10.2.min.js
bootstrap.min.js
bootstrapValidator.min.js
以上这些都是必须的。
先上个简单的例子,只要导入相应的文件可以直接运行：
<!DOCTYPE html>
<html>
<head>
<title>Using Ajax to submit data</title>
<link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
<link rel="stylesheet" href="css/bootstrapValidator.css" rel="external nofollow" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrapValidator.js"></script>
</head>
<body>
<div class="container">
<!-- class都是bootstrap定义好的样式，验证是根据input中的name值 -->
<form id="defaultForm" method="post" class="form-horizontal" action="aaa.html">
<!-- 下面这个div必须要有，插件根据这个进行添加提示 -->
<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" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email address</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">Password</label>
<div class="col-lg-5">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="submit" class="btn btn-primary">Sign up</button>
</div>
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
/**
* 下面是进行插件初始化
* 你只需传入相应的键值对
* */
$('#defaultForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {/*输入框不同状态，显示图片的样式*/
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {/*验证*/
username: {/*键名username和input name值对应*/
message: 'The username is not valid',
validators: {
notEmpty: {/*非空提示*/
message: '用户名不能为空'
},
stringLength: {/*长度提示*/
min: 6,
max: 30,
message: '用户名长度必须在6到30之间'
}/*最后一个没有逗号*/
}
},
password: {
message:'密码无效',
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '用户名长度必须在6到30之间'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required and can\'t be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
}
}
});
});
</script>
</body>
</html>
当然，以上都是插件写好的规则，如果想自己加匹配规则怎么办呢？
如下只要在input相对应的键值中加入一个regexp:{}键值对（在上面的js基础上修改）
username: {/*键名和input name值对应*/
message: 'The username is not valid',
validators: {
notEmpty: {/*非空提示*/
message: '用户名不能为空'
},
regexp: {/* 只需加此键值对，包含正则表达式，和提示 */
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '只能是数字和字母_.'
},
stringLength: {/*长度提示*/
min: 6,
max: 30,
message: '用户名长度必须在6到30之间'
}/*最后一个没有逗号*/
}
},
以上所述是小编给大家介绍的BootStrapValidator初使用教程详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
使用BootStrapValidator完成前端输入验证
BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证,由于本插件完全基于BootStrap因此可以和UI完美的融合在一起.下面直接上图,看看完成后的结果: 怎么样,还比较和谐把,当然你也可以修改默认样式,让它的显示方式更加美观. 下面来说说他的用法: 1.下载BootStrapValidator 你可以点击BootStrapValidator官方下载地址来下载它. 2.下载后的目录结构 下载完成后,如果是全部文件的化,目录结构如下: 其中可以直接在项目
-
BootStrap Validator使用注意事项(必看篇)
如果你使用的前端框架是bootstrap,那么前端验证框架就不必考虑了,bootstrapvalidator是最好的选择,它和bootstrap的结合最完美,不过要注意版本的问题,针对bootstrap2和bootstrap3有不同的版本. 下面是我遇到的两个注意事项,自己做个笔记: 1.为每个要验证的表单元素添加name属性 例如: <div class="form-group"> <input type="text" placeholder=&
-
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
一.前言 使用bootstrap-datepicker和bootstrapValidator也有一段时间了,在工作中发现两者同时使用时会出现的一种问题,当选择完日期后,并不会正确校验该字段.为了更加直观的展现问题,上图一张. 可以看出,当选择完日期后,校验结果并没有达到预期,是因为bootstrapValidator插件默认情况下,不会重复校验一个已经标记为验证通过或验证不通过的字段.so ,当开始触发校验后,没有通过校验,当正确选择日期后,并不会刷新校验结果,就会导致数据无法正常提交,当手动把
-
Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）
本文给大家介绍如何判断表单验证的实例代码,在没给大家介绍正文之前,先给大家介绍下插件. 插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用提示 中文化: 下载插件后,将\js\bootstrapValidator\language\zh_CN.js 引入文件,即实现中文化 提交前验证表单: 更丰富一点的表单验证例子:http://www.jq22.com/yanshi522,直接上代码: <!DOCTYPE h
-
使用bootstrapValidator插件进行动态添加表单元素并校验
一.前言 实际工作中,要实现表单元素的动态增加,并使用bootstrapValidator插件对动态添加的表单元素进行前台校验.在以前的工作中也使用过bootstrapValidator对表单元素进行校验,但涉及到的表单元素都是固定的,所以在页面载入时,对表单元素进行初始化就可以实现.虽然思路很明确,但由于对bootstrapValidator的用法不熟悉,在这个问题上还是浪费了很多时间,现在就把解决方法和功能效果图贴出来,希望对大家有所帮助. 思路:动态添加表单元素,并调用bootstrapV
-
使用bootstrap validator的remote验证代码经验分享(推荐)
这里需要说一下,bootstrapvalidator的帮助文档写的比较简单,对于remote验证器的说明更是如此,在经历多方测试之后才明白如何使用这个验证器. 一个典型的ajax验证代码如下: 服务端验证代码(使用spring mvc)如下: /* * 返回String类型的结果 * 检查用户名的合法性,如果用户已经存在,返回false,否则返回true(返回json数据,格式为{"valid",true}) */ @RequestMapping(value = "/chec
-
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
BootStrap 是一个强大的前面框架,它用优雅的方式解决了网页问题.最近正在使用其开发网站的表单验证,一点体会记录如下: 注:本文中借鉴了博客Franson 的文章使用bootstrap validator的remote验证代码经验分享(推荐) 一.准备工作 1.你的网站环境中要有 BootStrap,中文网地址:http://www.bootcss.com/ 2.下载BootStrap Validator相关材料,地址:http://bv.doc.javake.cn/ 当然,如果你不想一个
-
BootStrapValidator初使用教程详解
bootstrap:能够增加兼容性的强大框架. 因为项目需要数据验证,看bootstrapValidator 还不错,就上手一直,完美兼容,话不多说. bootstrapValidator的github地址 需要引用css: bootstrap.min.css bootstrapValidator.min.css js: jQuery-1.10.2.min.js bootstrap.min.js bootstrapValidator.min.js 以上这些都是必须的. 先上个简单的例子,只要导入
-
CentOS下安装MySQL5.6.10和安全配置教程详解
注:以下所有操作都在CentOS 6.5 x86_64位系统下完成. #准备工作# 在安装MySQL之前,请确保已经使用yum安装了以下各类基础组件(如果系统已自带,还可以考虑yum update下基础组件): gcc cmake openssl+openssl-devel pcre+pcre-devel bzip2+bzip2-devel libcurl+curl+curl-devel libjpeg+libjpeg-devel libpng+libpng-devel freetype+fre
-
Linux下.tar.xz文件的解压教程详解
前言 对于xz这个压缩相信很多人陌生,但xz是绝大数linux默认就带的一个压缩工具,xz格式比7z还要小. 最近在下载某个源码包的时候遇到的这种压缩格式,乘此机会分享一下xz的压缩与解压方法. 安装 如果系统没有xz命令,需要进行安装,安装方法非常简单, 在centos下,直接运行: yum install xz 也可以使用源码包安装: 先下载该工具源码包http://tukaani.org/xz/ 下载后解压进入该目录运行configure生成makefile文件用-prefix指定安装目录
-
ABP(现代ASP.NET样板开发框架)系列之二、ABP入门教程详解
ABP是"ASP.NET Boilerplate Project (ASP.NET样板项目)"的简称. ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WEB应用程序框架和项目模板. ABP的官方网站:http://www.aspnetboilerplate.com ABP在Github上的开源项目:https://github.com/aspnetboilerplate ABP 的由来 "DRY--避免重复
-
使用 Docker 搭建 Laravel 本地环境的教程详解
Laravel 官方提供 Homestead 和 Valet 作为本地开发环境,Homestead 是一个官方预封装的 Vagrant Box,也就是一个虚拟机,但是跟 docker 比,它占用体积太大,启动速度慢,同时响应速度很慢,现在有了 docker 这种更好的方式,可以轻松方便的搭建整套 PHP 开发环境. 本文就介绍如何使用 docker 搭建 Laravel 本地环境. 安装 docker 首先安装 docker. 克隆 laradock laradock 官方文档: http://
-
windows server2016安装MySQL5.7.19解压缩版教程详解
记录了MySQL 5.7.19 winx64解压缩版安装教程,具体内容如下 系统环境:Win7 x64 软件准备:mysql 5.7.19 winx64 下载网址:https://dev.mysql.com/downloads/mysql/ 配置安装流程 具体安装如下: 1.把 mysql-5.7.19-winx64.zip 压缩文件解压到 C:\MySQL\ 目录下: 2.在 C:\MySQL\ 目录下新建 my.ini 配置文件: 3.用文本编辑器或其他编辑器打开 my.ini 文件,把以下
-
Mysql免安装版设置密码教程详解
方法1: 用SET PASSWORD命令 MySQL -u root mysql> SET PASSWORD FOR 'root'@'localhost' = PASSWORD('newpass'); 方法2:用mysqladmin mysqladmin -u root password "newpass" 如果root已经设置过密码,采用如下方法 mysqladmin -u root password oldpass "newpass" 方法3: 用UPDA
-
CentOS 7 x64下Apache+MySQL(Mariadb)+PHP56的安装教程详解
每次搭建新服务器,都要来来回回把这些包再装一下,来来回回搞了不下20遍了吧,原来都是凭经验,配置过程中重复入坑是难免的,故写此文做个备忘.虽然有像xampp这样的集成包,但是在生产环境的Linux发行版上,还是通过包管理工具安装会放心.这次新买的服务器是CentOS 7(7.2)系统,相关配置也都以此版本为主,为方便操作,直接使用root用户配置. CentOS 7的源比较旧,自带的PHP是PHP 5.4,我们想要的是PHP 5.6,这就需要执行以下命令添加额外的remi源. rpm -ivh
-
MongoDB windows解压缩版安装教程详解
创建目录如下 将mongodb的压缩包解压到mongodb目录下 mongodata下创建data目录存放数据:创建log目录存放目录 cmd 输入命令: D:\mongo\mongodb\bin\mongod.exe --dbpath "D:\mongo\mongodata\data" --logpath "D:\mongo\mongodata\log\MongoDB.log" --install --serviceName "mongo" -
-
Vuejs第一篇之入门教程详解（单向绑定、双向绑定、列表渲染、响应函数）
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 接下来给大家介绍vuejs单向绑定.双向绑定.列表渲染.响应函数基础知识,具体详情如下所示: (一)单向绑定 <div id="app"> {{ message }} </div> <sc