BootStrapValidator表单验证插件的学习和使用
BootStrapValidator表单验证插件的学习和使用
引入标签
<script type="text/javascript" src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
//--------------------------------下方都是bootstrap的基本依赖-----------------------
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.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>
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="inputName1" 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="inputName1"
placeholder="请输入商品价格">
</div>
</div>
</div>
<!--第二个 数值范围验证-->
<div class="box-body">
<div class="form-group">
<label for="inputName2" 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="inputName2"
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: {
// 第一个验证
price: {
validators: {
numeric: {
message: '价格必须为数值'
}
}
},
// 第二个验证
max_num: {
validators: {
lessThan: { //最大值验证
value: 100,
inclusive: false, //是否包含当前值，false不包含，true包含。默认为true
message: '值不能大于或等于100'
},
greaterThan: { //最小值验证
value: 10,
inclusive: true,
message: '值不能小于10'
}
}
}
}
});
});
</script>
注意点：
<div class="form-group"></div>来包裹才可以生效
整体代码，复制即可用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆界面</title>
<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>
<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: '价格必须为数值'
}
}
},
// 第二个验证
max_num: {
validators: {
lessThan: { //最大值验证
value: 100,
inclusive: false, //是否包含当前值，false不包含，true包含。默认为true
message: '值不能大于或等于100'
},
greaterThan: { //最小值验证
value: 10,
inclusive: true,
message: '值不能小于10'
}
}
}
}
});
});
</script>
</head>
<body>
<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="inputName1" 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="inputName1"
placeholder="请输入商品价格">
</div>
</div>
</div>
<!--第二个 数值范围验证-->
<div class="box-body">
<div class="form-group">
<label for="inputName2" 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="inputName2"
placeholder="请输入10-100之间的值">
</div>
</div>
</div>
</form>
</div>
</body>
</html>
BootStrapValidator表单验证插件的学习和使用的更多相关文章
- bootstrapValidator表单验证插件
bootstrapValidator——一个很好用的表单验证插件,再也不用手写验证规则啦! bootstrapValidator官方文档:http://bootstrapvalidator.votin ...
- jQuery学习之：Validation表单验证插件
http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...
- 【jQuery基础学习】06 jQuery表单验证插件-Validation
jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...
- jQuery Validate 表单验证插件----Validate简介，官方文档，官方下载地址
一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- 表单验证插件--formvalidation
表单验证是一个非常基础的功能,当你的表单项少的时候,可以自己写验证,但是当你的表单有很多的时候,就需要一些验证的插件.今天介绍一款很好用的表单验证插件,formvalidation.其前身叫做boot ...
- jQuery html5Validate基于HTML5表单验证插件
更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
- BootstrapValidator 表单验证超详细教程
一. 引入js 和css文件 在有jquery和bootstrap的页面里引入 bootstrapValidator.js bootstrapValidator.css 链接: https://pan ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
随机推荐
- Docker多主机管理（八）
docker多主机管理 前面我们的实验环境中只有一个 docker host,所有的容器都是运行在这一个 host 上的.但在真正的环境中会有多个 host,容器在这些 host 中启动.运行.停止和 ...
- git代码管理——克隆项目到本地仓库及上传本地项目到仓库
一.克隆项目到本地仓库 1.github网站操作 1.1 登录github 首先创建一个仓库,点击“New” 1.2 输入仓库信息 1.3 创建完成后,会多出一个仓库 2.安装git客户端 2.1 安 ...
- idea配置springboot项目记录
配置文件application.properties server.port=80 server.servlet.context-path=/bookManage spring.mvc.static- ...
- 学习使用PSTools工具中的psping
目录 初识PsTools psping 1.使用ICMP ping 2.使用TCP ping 3.延迟测试 4.带宽测试 5.同功能的tcping工具 总结 初识PsTools 在工作中我们都 ...
- Spring 标签纸property
转载自https://www.cnblogs.com/zzb-yp/p/9968849.html Spring中XML文件配置Bean的简单示例,如下: <bean id="car&q ...
- google protocol buffer——protobuf的问题和改进2
这一系列文章主要是对protocol buffer这种编码格式的使用方式.特点.使用技巧进行说明,并在原生protobuf的基础上进行扩展和优化,使得它能更好地为我们服务. 在上一篇文章中,我们举例了 ...
- shiro-重写标签功能----shiro：hasPermission 标签重写
public abstract class ShiroAuthorizingRealm extends AuthorizingRealm{ private static final String OR ...
- google chrome安装非官方市场插件方法
1. 下载 Chrome组策略管理模板"chrome.adm"(下载地址):2. Win+R 打开运行,输入 gpedit.msc,确定:3. 依次展开 本地计算机策略 > ...
- RCTF 2019 web
写在正文前 神仙题,压根不会. 听说跟着神仙的思路走一遍印象会深点,Just mo it .2333 正文 nextphp 整体思路:phpinfo得知存在preload.php文件,并与opcach ...
- 【题解】[国家集训队]happiness
题目戳我 \(\text{Solution:}\) 显然还是一个分组问题.对于理科和文科我们可以看出最小割模型,而处理同时选择某一学科的时候,需要我们根据套路建立虚点处理. 同 小M的作物 一题,这题 ...