bootStrapValidator插件的使用

1.插件的下载和引用

首先要引入bootstrapValidator插件。链接的地址:https://www.bootcdn.cn/jquery.bootstrapvalidator/
可以使用网页中的插件连接,也可以将源码下载到本地使用。
要使用bootstrapValidator插件,代码中还要除了引入bootstrapValidator插件的js和css外,还要引入jQuery.js和bootStrap的js和css。

<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>

注意:所有的表单控件一定要放到类名为from-group的div内部,验证才会生效。html代码如下:

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
<form class="form-horizontal" method="post" action="" id="classes-form">
<div class="box-body">
<div class="form-group">
<label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">班级名称</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="class_name" id="inputName"
placeholder="请输入班级名称">
</div>
</div>
</div>
</form>
</div>

2.bootStrapValidator的常用验证

2.1 非空验证 notEmpty

html代码

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
<form class="form-horizontal" method="post" action="" id="classes-form">
<div class="box-body">
<div class="form-group">
<label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">班级名称</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="class_name" id="inputName"
placeholder="请输入班级名称">
</div>
</div>
</div>
</form>
</div>
 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
<form class="form-horizontal" method="post" action="" id="classes-form">
<div class="box-body">
<div class="form-group">
<label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">班级名称</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="class_name" id="inputName"
placeholder="请输入班级名称">
</div>
</div>
</div>
</form>
</div>

接着加入验证js代码

 <script>
$(function () {
$('#classes-form').bootstrapValidator({
live : 'submitted', //enabled代表当表单控件内容发生变化时就触发验证,默认提交时验证,
// disabled和submitted代表当点击提交按钮时触发验证 feedbackIcons: { //显示表单验证结果的图标
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
class_name: {
validators: {
notEmpty: {
message: '班级名称不能为空'
}
}
}
}
})
})
</script>

2.2 数值验证 numeric

html代码

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
<form class="form-horizontal" method="post" action="" id="classes-form">
<div class="box-body">
<div class="form-group">
<label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">商品价格</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="price" id="inputName"
placeholder="请输入商品价格">
</div>
</div>
</div>
</form>
</div>

js验证代码

 <script>
$(function () {
$('#classes-form').bootstrapValidator({
live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证,默认提交时验证,
// disabled和submitted代表当点击提交按钮时触发验证 feedbackIcons: { //显示表单验证结果的图标
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
price: {
validators: {
numeric: {
message: '价格必须为数值'
}
}
}
}
})
})
</script>

2.3 整数验证 digits

html代码

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
<form class="form-horizontal" method="post" action="" id="classes-form">
<div class="box-body">
<div class="form-group">
<label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">班级人数</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="std_num" id="inputName"
placeholder="请输入班级人数">
</div>
</div>
</div>
</form>
</div>

js验证代码

 <script>
$(function () {
$('#classes-form').bootstrapValidator({
live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证,默认提交时验证,
// disabled和submitted代表当点击提交按钮时触发验证 feedbackIcons: { //显示表单验证结果的图标
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
std_num: {
validators: {
digits: {
message: '价格必须为数值'
}
}
}
}
})
})
</script>

2.4 最大值和最小值验证 lessThan和greaterThan

html代码

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
<form class="form-horizontal" method="post" action="" id="classes-form">
<div class="box-body">
<div class="form-group">
<label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">最大最小值</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="max_num" id="inputName"
placeholder="请输入10-100之间的值">
</div>
</div>
</div>
</form>
</div>

js验证代码

 <script>
$(function () {
$('#classes-form').bootstrapValidator({
live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证,默认提交时验证,
// disabled和submitted代表当点击提交按钮时触发验证 feedbackIcons: { //显示表单验证结果的图标
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
max_num: {
validators: {
lessThan: { //最大值验证
value: 100,
inclusive:false, //是否包含当前值,false不包含,true包含。默认为true
message: '值不能大于或等于100'
},
greaterThan: { //最小值验证
value:10,
inclusive:true,
message: '值不能小于10'
}
}
}
}
})
})
</script>

2.5 数值范围验证 between

html代码

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
<form class="form-horizontal" method="post" action="" id="classes-form">
<div class="box-body">
<div class="form-group">
<label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">年龄</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="age" id="inputName"
placeholder="请输入年龄">
</div>
</div>
</div>
</form>
</div>

js验证代码

<script>
$(function () {
$('#classes-form').bootstrapValidator({
live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证,默认提交时验证,
// disabled和submitted代表当点击提交按钮时触发验证 feedbackIcons: { //显示表单验证结果的图标
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
age: {
validators: {
between:{
max:60,
min:18,
message: '年龄必须在18~60之间'
}
}
}
}
})
})
</script>

2.6 字符串长度验证 stringLength

html代码

<div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
<form class="form-horizontal" method="post" action="" id="classes-form">
<div class="box-body">
<div class="form-group">
<label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">用户名</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="age" id="inputName"
placeholder="请输入用户名">
</div>
</div>
</div>
</form>
</div>

js验证代码

 <script>
$(function () {
$('#classes-form').bootstrapValidator({
live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证,默认提交时验证,
// disabled和submitted代表当点击提交按钮时触发验证 feedbackIcons: { //显示表单验证结果的图标
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
age: {
validators: {
stringLength:{
min:8,
max:15,
message: '用户名长度必须在8~15之间'
}
}
}
}
})
})
</script>

2.7 邮箱地址验证 emailAddress

html代码

<div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
<form class="form-horizontal" method="post" action="" id="classes-form">
<div class="box-body">
<div class="form-group">
<label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">邮箱</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="email" id="inputName"
placeholder="请输入邮箱地址">
</div>
</div>
</div>
</form>
</div>

js验证代码

 <script>
$(function () {
$('#classes-form').bootstrapValidator({
live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证,默认提交时验证,
// disabled和submitted代表当点击提交按钮时触发验证 feedbackIcons: { //显示表单验证结果的图标
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
email: {
validators: {
emailAddress:{
message: '请输入正确的邮箱地址'
}
}
}
}
})
})
</script>

2.8 IP地址验证 ip

html代码

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
<form class="form-horizontal" method="post" action="" id="classes-form">
<div class="box-body">
<div class="form-group">
<label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">IP</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="ip" id="inputName"
placeholder="请输入IP地址">
</div>
</div>
</div>
</form>
</div>

js验证代码

 <script>
$(function () {
$('#classes-form').bootstrapValidator({
live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证,默认提交时验证,
// disabled和submitted代表当点击提交按钮时触发验证 feedbackIcons: { //显示表单验证结果的图标
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
ip: {
validators: {
ip:{
message: '请输入正确的ip地址'
}
}
}
}
})
})
</script>

2.9 日期格式验证 date

html代码

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
<form class="form-horizontal" method="post" action="" id="classes-form">
<div class="box-body">
<div class="form-group">
<label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">出生日期</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="birthday" id="inputName"
placeholder="请输入出生日期">
</div>
</div>
</div>
</form>
</div>

js验证代码

 <script>
$(function () {
$('#classes-form').bootstrapValidator({
live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证,默认提交时验证,
// disabled和submitted代表当点击提交按钮时触发验证 feedbackIcons: { //显示表单验证结果的图标
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
},
fields: {
birthday: {
validators: {
date:{
format: 'YYYY-MM-DD',
message: '请输入正确的出生日期'
}
}
}
}
})
})
</script>

2.10 正则验证 regexp

通过正则验证,我们可以定制自己所需要的格式的输入验证。如上面的邮箱地址,或者身份证号或手机号等,我们都可以通过正则表达式来进行验证。

下面为手机号验证代码:

html代码

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
<form class="form-horizontal" method="post" action="" id="classes-form">
<div class="box-body">
<div class="form-group">
<label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">手机号</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="phone_num" id="inputName"
placeholder="请输入手机号">
</div>
</div>
</div>
</form>
</div>

js验证代码

 <script>
$(function () {
$('#classes-form').bootstrapValidator({
live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证,默认提交时验证,
// disabled和submitted代表当点击提交按钮时触发验证 feedbackIcons: { //显示表单验证结果的图标
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
phone_num: {
validators: {
regexp:{
regexp: /^1[3-9][\d]{9}$/, //正则规则用两个/包裹起来
message: '请输入正确的手机号'
}
}
}
}
})
})
</script>

3.总结

以上为经常会用到的一些表单验证,若有不正确或需要补充的,欢迎指出。

想了解更多bootStrapValidator的更多验证,也可以进入 https://github.com/nghuuphuoc/bootstrapvalidator 下载源码学习研究。

bootStrap表单验证插件的使用的更多相关文章

  1. bootstrapValidator.js,最好用的bootstrap表单验证插件

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  2. Bootstrap表单验证插件bootstrapValidator使用方法整理

    插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用方法:http://www.cnblogs.com/huangc ...

  3. bootstrapValidator.js,最好用的bootstrap表单验证插件 简单实用方法

    实用方法 1.引入 在有jquery和bootstrap的页面里引入bootstrapValidator.js和bootstrapValidator.css文件 2. 按照bootstrap的表单组件 ...

  4. 表单验证插件--formvalidation

    表单验证是一个非常基础的功能,当你的表单项少的时候,可以自己写验证,但是当你的表单有很多的时候,就需要一些验证的插件.今天介绍一款很好用的表单验证插件,formvalidation.其前身叫做boot ...

  5. bootstrapValidator表单验证插件

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

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

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

  7. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  8. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

  9. jQuery学习之:Validation表单验证插件

    http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...

随机推荐

  1. Gym 100712H

    Gym 100712Hhttps://vjudge.net/problem/195715/origin先缩点,再建立新图,然后跑两遍dfs求树上最长路 #include<iostream> ...

  2. yolo-windows检测高分辨率图像及封装应用

    YOLO训练自己的数据集的一些心得 封装yolo-windows为动态链接库 yolo-windows源码 项目开源代码:LargeImageDetect-yolo-windows 由于项目需要,需要 ...

  3. Maven实战07_依赖

    1:依赖声明 <project> ... <dependencies> <dependency> <groupId>...</groupId> ...

  4. IO流12 --- 转换流InputStreamReader --- 技术搬运工(尚硅谷)

    InputStreamReader 将字节输入流转换为字符输入流 @Test public void test1(){ InputStreamReader isr = null; try { //字节 ...

  5. matlab中disp函数的简单用法

    输出数组类型的数据,也可以把string类型的数据看做数组输出 输出数字 >> num = ; >> disp(num) 输出字符串 >> disp('this i ...

  6. mapreduce join操作

    上次和朋友讨论到mapreduce,join应该发生在map端,理由太想当然到sql里面的执行过程了 wheremap端 join在map之前(笛卡尔积),但实际上网上看了,mapreduce的笛卡尔 ...

  7. LA3882 And Then There Was One

    And Then There Was One https://vjudge.net/problem/UVALive-3882 题目大意:n个数编号1..n排成一圈,第一次删除m,后来每k个删除一个(下 ...

  8. openldap 2.4 centos7 常用配置

    新版的openldap弃用了sldap.conf配置文件,引入一种动态配置,所以尽量不要直接修改配文件 如果直接修改了配置文件可以用slaptest -u命令检查 1.安装openldap,可能需要e ...

  9. Redis源码解析:11RDB持久化

    Redis的RDB持久化的相关功能主要是在src/rdb.c中实现的.RDB文件是具有一定编码格式的数据文件,因此src/rdb.c中大部分代码都是处理数据格式的问题. 一:RDB文件格式 上图就是一 ...

  10. SSM9-Redis的搭建

    1. Redis的安装 1.1. Redis的安装 Redis是c语言开发的. 安装redis需要c语言的编译环境.如果没有gcc需要在线安装.yum install gcc-c++ 安装步骤: 第一 ...