bootstrapvalidator常用验证解析和使用
学这个博主的:https://www.cnblogs.com/wang-kai-xuan/p/11031733.html
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>
常用方法指南:
验证方式 | 属性 | 描述 |
---|---|---|
字符串长度验证 | tringLength:{ min:2, max:10, message: 'xx长度必须在2~10之间' }, | 一定范围内 |
非空 | notEmpty:{ message: '不能为空' } | 提交之前进行非空验证 |
正则密码 | regexp:{ regexp: /(?!\\d+$)(?![a-zA-Z]+You can't use 'macro parameter character #' in math mode).{8,}/, //正则规则用两个/包裹起来 message: '1、密码必须由数字、字符、特殊字符三种中的两种组成;\n' + '2、密码长度不能少于8个字符;' }, | 密码验证 不带确认密码 |
身份证号 | regexp:{ regexp: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))((0-2)|10|20|30|31)\d{3}[0-9Xx]$/, //正则规则用两个/包裹起来 message: '请输入正确的身份证号码' }, | 18位身份证号验证 |
手机号 | regexp:{ regexp: /^13-9{9}$/, //正则规则用两个/包裹起来 message: '请输入正确的手机号' }, | 国内手机号 |
bootstrapvalidator常用验证解析和使用的更多相关文章
- bootstrapValidator常用验证规则总结
bootstrapValidator常用验证规则总结 一 .bootstrapValidator引入 在使用bootstrapValidator前我们需要引入bootstrap和bootstrapVa ...
- Apache入门 篇(二)之apache 2.2.x常用配置解析
一.httpd 2.2.x目录结构 Cnetos 6.10 YUM安装httpd 2.2.x # yum install -y httpd 程序环境 主配置文件: /etc/httpd/conf/ht ...
- PHP常用验证正则表达式
PHP常用验证正则表达式 数字.手机号.QQ号.Url地址合法性校验 1.验证是否为整数 1 function isNumber($val) 2 { 3 if(ereg("^[0-9]+$& ...
- 用bootstrapValidator来验证UEditor
我们的项目使用了bootstrapValidator来作为前端校验,但是表单里面有一个UEditor,它用bootstrapValidator是没有效果的,为了页面风格统一,只好修修改改咯 首先来看一 ...
- Ext 常用组件解析
Ext 常用组件解析 Panel 定义&常用属性 //1.使用initComponent Ext.define('MySecurity.view.resource.ResourcePanel' ...
- Ionic 常用组件解析
Ionic 常用组件解析 $ionicModal(弹出窗口): //创建一个窗口 //此处注意目录的起始位置为app $ionicModal.fromTemplateUrl('app/security ...
- Python爬虫beautifulsoup4常用的解析方法总结
摘要 如何用beautifulsoup4解析各种情况的网页 beautifulsoup4的使用 关于beautifulsoup4,官网已经讲的很详细了,我这里就把一些常用的解析方法做个总结,方便查阅. ...
- java后台常用json解析工具问题小结
若排版紊乱可查看我的个人博客原文地址 java后台常用json解析工具问题小结 这里不细究造成这些问题的底层原因,只是单纯的描述我碰到的问题及对应的解决方法 jackson将java对象转json字符 ...
- angular-cli.json配置参数解析,常用命令解析
1.angular-cli.json配置参数解析 { "project": { "name": "ng-admin", //项目名称 &qu ...
随机推荐
- 阿里服务器docker部署
首先本人是购买的阿里云服务器,虽然是1g的内存,不过部署一些项目还是没问题的,学生也有一个优惠服务器,好像是70多2g内存的,还是很舒服的,学生党可以试着部署一下,下面呢我就说一下我自己部署的步骤: ...
- 部署cobbler服务器
部署cobbler服务器 1.准备环境使用nat或者仅主机模式,不要使用桥接模式,方式获取的IP不是自己的 2. 配置yum源[epel]name=epelenabled=1gpgcheck=0bas ...
- 【转】Locust性能-零基础入门系列(3)-压力权重
本文将继续对Locust性能测试进行持续讲解,主要是讲解虚拟用户数分配和权重的关系.在locust file中进行多用户类的实现和操作.我们这次先上完整的代码: from locust import ...
- Java Web学习(五)session、cookie、token
文章更新时间:2020/09/14 一.引言 动态网页兴起后,会话管理变成开发者需要考虑的一个问题,由于HTTP请求是无状态的,为了区分每个用户,此时引入了会话标识(sessionId)的概念,但是存 ...
- Lucene索引库维护、搜索、中文分词器
删除索引(文档) 需求 某些图书不再出版销售了,我们需要从索引库中移除该图书. 1 @Test 2 public void deleteIndex() throws Exception { 3 // ...
- spring cloud微服务快速教程之(十四)spring cloud feign使用okhttp3--以及feign调用参数丢失的说明
0-前言 spring cloud feign 默认使用httpclient,需要okhttp3的可以进行切换 当然,其实两者性能目前差别不大,差别较大的是很早之前的版本,所以,喜欢哪个自己选择: 1 ...
- Kubernetes客户端和管理界面大集合
今天给大家介绍目前市面上常用的kubernetes管理工具,总有一款适合您~~~ 简介 Kubectl K9s Kubernetes-Dashboard Rancher Kuboard Lens Oc ...
- Spring Boot 项目打成 war 包部署
Spring Boot 一个非常方便的功能就是支持内置的 Servlet 容器,一般我们部署 Spring Boot 应用时都是打成一个可执行的 Jar 包进行部署.其实 Spring Boot 也是 ...
- python3-day1
一.python的优缺点: 先看优点 Python的定位是"优雅"."明确"."简单",所以Python程序看上去总是简单易懂,初学者学Py ...
- ARCENGINE 10 开发遇到的一些问题
许多版友在刚刚使用ArcGIS 10做开发的时候,都会遇到这样那样的问题.在担任实习版主的这一个多月里,看到了这么几个与开发环境相关的问题,重复被提到相当多,于是我就做了这个FAQ.Q:哪儿有10的A ...