技术标签： java-Web bootstrap validate
目录
validate是别人封装好的第三方工具
1.导入jquery.js（依赖于jQuery）
2.导入validate.js
3.在页面加载成功之后 对表单进行校验 $("选择器").validate()
4.在validate中编写校验规则（类似json）规则
$("选择器").validate({
rules:{},
messages:{}
});
格式1:
字段的name属性:"校验器"
格式2:
字段的name属性:{校验器:值,校验器:值}
例如:
username:"required",
password:{
required:true,
digits:true
},
repassword:{
equalTo:"[name='password']"
},
zuixiaozhi:{
min:5
},
shuzhiqujian:{
range:[5,10]
}
格式1:
字段的name属性:"提示信息"
格式2:
字段的name属性:{校验器:"提示信息",校验器:提示信息"}
例如:
username:"用户名不能为空",
password:{
required:"密码不能为空",
digits:"密码只能是数字"
},
repassword:{
equalTo:"两次输入的内容不一致"
},
zuixiaozhi:{
min:"最小值应该大于{0}"
},
shuzhiqujian:{
range:"输入的范围在{0}~{1}之间"
}
校验类型
取值
描述
required
true|false
必填字段
“@”或者”email”
邮件地址
url
路径
date
数字
日期
dateISO
字符串
日期（YYYY-MM-dd）
number
数字（负数，小数）
digits
整数
minlength
数字
最小长度
maxlength
数字
最大长度
rangelength
[minL,maxL]
长度范围
min
最小值
max
最大值
range
[min,max]
值范围
equalTo
jQuery表达式
两个值相同
remote
url路径
ajax校验
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script> <!--validate校验库--> <script type="text/javascript" src="../js/jquery.validate.js" ></script> <!--国际化库，中文提示--> <script type="text/javascript" src="../js/messages_zh.js" ></script> <script type="text/javascript"> $(function(){ $("#formId").validate({ rules:{ // 字段的name属性:"校验器" username:"required",//必填 //字段的name属性:{校验器:值,校验器:值} password:{ required:true,//必填——值为Boolean值 digits:true//整数 }, repassword:{ equalTo:"[name='password']"//jQuery表达式——属性选择器 }, zuixiaozhi:{ min:5 }, shuzhiqujian:{ range:[5,10] } }, messages:{//自定义提示信息 //字段的name属性:"提示信息" username:"用户名不能为空", //字段的name属性:{校验器:"提示信息",校验器:"提示信息"} password:{ required:"密码不能为空", digits:"密码只能是数字" }, repassword:{ equalTo:"两次输入的内容不一致" }, zuixiaozhi:{ min:"最小值应该大于{0}"//{0} 动态获取第一个值 }, shuzhiqujian:{ range:"输入的范围在{0}~{1}之间" } } }); }) </script>
通过validate插件来校验表单
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script> <script type="text/javascript" src="../js/jquery.validate.js" ></script> <script type="text/javascript" src="../js/messages_zh.js" ></script> <script> $(function(){ $("#formid").validate({ rules:{ username:"required", password:{ rangelength:[3,6],//长度区间 required:true }, repassword:{ equalTo:"#password" }, email:"email", sex:"required" }, messages:{ username:"用户名不能为空", password:{ rangelength:"密码长度在{0}~{1}之间", required:"密码不能为空" } } }); }) </script>
- webcss框架,
- 集合了html/css/jquery为一家
- 创建响应式的页面
- 响应式:适配不同的上网设备
1.下载bootstarp
网站:http://www.bootcss.com/
下载:用于生产环境的 Bootstrap
2.导入bootstarp.css
3.导入jquery.js
4.导入bootstrap.js
5.添加一个meta标签 支持移动设备
<meta name="viewport" content="width=device-width, initial-scale=1">6.将所有的内容放入到布局容器中.
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类
方式1:（有留白）
<div class="container"></div>
方式1:
<div class="container-fluid"></div>
注意:
bootstrap将每一行分成12份
假如大屏幕,每行显示6个
超大电脑,屏幕分辨率>1200 使用: col-lg-2
假如屏幕小点,每行显示4个
992<屏幕分辨率<1200 使用: col-md-3
再小点,每行显示2个
768<屏幕分辨率<992 使用: col-sm-6
继续小,每行显示1个
屏幕分辨率<768 使用:col-xs-12<div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
全局css样式--定义了一套css样式
<div class="container"> <!--<h1>我是h1</h1>我是跟随者--> <span class="h1">我是h1</span>我是跟随者 <hr> <a href="#" class="btn btn-primary">sdfsadf</a> </div>组件--定义了很多可以直接使用的组件 例如:字体图标 导航条
js插件--例如:轮播图 选项卡
创建一套页面,可以根据上网设备的不同自动调节显示的效果.
1.先有一个模版页面
2.先创建一个导航条
3.下面创建一个轮播图
4.下面再创建3个div
中等屏幕的时候 3个在一行
小屏幕的时候 2个一行
最小屏幕的时候1个一行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- 导入 css-->
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<!--导入jquery.js-->
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<!--导入bootstrap.js-->
<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
</head>
<body>
<!--<div class="container">
<div style="border: 1px solid red;">123</div>
</div>-->
<!--<div class="container-fluid">
<div style="border: 1px solid red;">123</div>
</div>-->
<div class="container">
<!--导航条-->
<div class="row">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">程序员学院</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">JAVA学院 <span class="sr-only">(current)</span></a></li>
<li><a href="#">UI学院</a></li>
<li><a href="#">C++学院</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">其他学院<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">IOS学院</a></li>
<li><a href="#">电子商务</a></li>
<li><a href="#">前端</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">幼儿园</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left pull-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!--轮播图-->
<div class="row">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!--需要几张图片 就得添加几个 li 还需要在下面的div提供几个 class=item的div-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- 显示的图片 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../img/1.jpg" alt="">
<div class="carousel-caption">
我是第一张图片
</div>
</div>
<div class="item">
<img src="../img/2.jpg" alt="...">
<div class="carousel-caption">
i'am second
</div>
</div>
<div class="item">
<img src="../img/3.jpg" alt="...">
<div class="carousel-caption">
third
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!--div-->
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<h2>欢迎大家来到csdn</h2>
<p>相信大家一定会有一个美好的未来,勿忘初心,方得始终.</p>
<a href="#" class="btn btn-danger pull-right">more</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<h2>欢迎大家来到csdn</h2>
<p>相信大家一定会有一个美好的未来,勿忘初心,方得始终.</p>
<a href="#" class="btn btn-danger pull-right">more</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<h2>欢迎大家来到csdn</h2>
<p>相信大家一定会有一个美好的未来,勿忘初心,方得始终.</p>
<a href="#" class="btn btn-danger pull-right">more</a>
</div>
</div>
</div>
</body>
</html>
当屏幕为小屏幕的时候和超小屏幕的时候隐藏热门商品中的左边那张图片
当屏幕为超小屏幕隐藏middle图片
hidden-xxxx
1.布局页面
2.创建8个div
3.第一个:logo
3个div
小屏幕 2个一行
超小屏幕一个一行
4.第二个div:导航条
5.第三个div:轮播图
6.第四个div:最新商品
先分成左右两个div
左边的div 放一张图片
中等屏幕 占2份
屏幕为小屏幕的时候和超小屏幕的时候 隐藏<div class="col-md-2 hidden-sm hidden-xs" style="height: 400px;"> <img src="../img/big01.jpg" style="height: 100%;"/> </div>右边的div
中等屏幕 占10份
屏幕为小屏幕的时候和超小屏幕的时候 占12份<div class="col-md-10 col-sm-12" style="height: 400px;">middle
中等屏幕 6份
小屏幕 12份
超小屏幕 隐藏<div class="col-md-6 col-sm-12 hidden-xs" style="height: 200px;"> <img src="../img/middle01.jpg" style="height: 200px;"/> </div>商品:
中等屏幕 2份
小屏幕 4份
超小屏幕 12份<div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;"> <img src="../img/small08.jpg" /> </div>
<!--
中等屏幕 占10份
屏幕为小屏幕的时候和超小屏幕的时候 占12份
-->
<div class="col-md-10 col-sm-12" style="height: 400px;">
<!--middle
中等屏幕 6份
小屏幕 12份
超小屏幕 隐藏：
-->
<div class="col-md-6 col-sm-12 hidden-xs" style="height: 200px;">
<img src="../img/middle01.jpg" style="height: 200px;"/>
</div>
<!--
中等屏幕 2份
小屏幕 4份
超小屏幕 12份
-->
<div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
<img src="../img/small08.jpg" />
</div>
<div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
<img src="../img/small08.jpg" />
</div>
<div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
<img src="../img/small08.jpg" />
</div>
<div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
<img src="../img/small08.jpg" />
</div>
<div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
<img src="../img/small08.jpg" />
</div>
<div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
<img src="../img/small08.jpg" />
</div>
<div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
<img src="../img/small08.jpg" />
</div>
<div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
<img src="../img/small08.jpg" />
</div>
<div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
<img src="../img/small08.jpg" />
</div>
</div>使用步骤:
1.导入jquery.js
2.导入validate.js
3.在页面加载成功之后 $(function(){})
4.对表单进行校验
$(function(){
$("选择器").validate();
})
5.编写校验的规则
$(function(){
$("选择器").validate({
rules:{},
messages:{}
});
})
6.编写具体的规则
$(function(){
$("选择器").validate({
rules:{
// name属性值:"校验器"
// name属性值:{校验器:值,校验器:值}
},
messages:{
//name属性值:"提示信息"
//name属性值:{校验器:"提示信息",校验器:"提示信息"}
}
});
})
常用的校验器
必填: required
最值: min|max
取值范围:range 值:[min,mix]
相等: equalTo 值:jquery表达式
长度: minlength|maxlength
长度范围:rangelength 值:[min长度,max长度]
使用步骤:
1.导入bootstarp.css
2.导入jquery.js
3.导入bootstarp.js
4.在head标签添加一个meta标签 支持移动设备
5.必须将所有的内容防止一个布局容器中
方式1:
放入一个class为.container容器中
方式1:
放入一个class为.container-fluid容器中
屏幕分辨率>1200px 样式:col-lg-x
992<屏幕分辨率<1200px 样式:col-md-x 中等屏幕
768<屏幕分辨率<992px 样式:col-sm-x 小屏幕
屏幕分辨率<768px 样式:col-xs-x 最小屏幕hidden-xs 在最小屏幕时候隐藏
将一个超链接伪装成一个按钮
class="btn btn-primary"浮动到右边
class="pull-right"
文章浏览阅读194次。人工智能近期发生的大事件
文章浏览阅读819次，点赞32次，收藏11次。Map 就是用来存储“键(key)－值(value) 对”的。Map 类中存储的“键值对”通过键来标 识，所以“键对象”不能重复。Map 接口的实现类有 HashMap、TreeMap、HashTable、Properties 等。
文章浏览阅读1.5k次，点赞4次，收藏19次。《利用CSS3制作网页动画》一、CSS3变形1.早期的动画和特效要依赖于图片、flash或者JavaScript来实现2.CSS3提供了很多新特性，使得动画制作跟以前相比简单且高效了很多3.CSS3动画分2D动画和3D动画，这里重点讲解2D动画，3D动画用法类似4.transform：变化，改变，变形 transformer变形金刚5.通过常用的变形函数，可以实现变形..._css官网动画
文章浏览阅读956次。logcat_logcat输出到文件
文章浏览阅读2.1k次，点赞5次，收藏47次。基于问题的线性规划和混合整数规划求解(problem_based linear programming)。 在MatLab中，线性规划类问题的求解基本上有两种解决方案，最简单的是直接调用求解器(solver)求解，这叫做solver-based linear programming，求解的命令是linprog和intlinprog。这种方案简单，但需要我们手动列出所有系..._基于场景的线性规划模型怎么求解
文章浏览阅读2k次，点赞6次，收藏8次。文章目录前言一、从数组选择随机项目二、用不同概率选择项目1.概率：2.随机排序：3.从一组项目中非重复选取：4.空间中的随机点：总结前言随机选取项目或值在很多游戏中非常重要。该部分说明如何使用 Unity 内置随机函数执行一些常见的游戏机制。一、从数组选择随机项目可随机挑选数组元素：1.是因为能够选择零到数组最大索引值（等于数组长度减去一）之间的随机整数。2.使用内置 Random.Range 函数就可轻松做到：var element = myArray[Random.Range(0, m._unity引入随机模块
文章浏览阅读8.9k次，点赞8次，收藏34次。文章目录设置下载源利用conda创建python3.5的环境安装tensorflow_gpu1.15.0首先我们需要安装anaconda,这个需要读者自动解决。设置下载源在windows系统自己用户的目录下面新建一txt文件，更名为.condarc，写入以下信息channels: - defaultsshow_channel_urls: truedefault_channels: - https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/m_windows tensorflow1.15下载
文章浏览阅读139次。导语 |QQ音乐 Android 客户端的 Web 页面日均 PV 达到千万量级，然而页面的打开耗时与 Native 页面相距甚远，需要系统性优化。本文将介绍 QQ 音乐 Android 客户端在进行 Web 页面通用性能优化过程中的问题、思路、方案和效果，并尝试对跨端场景的常见瓶颈和对策进行归纳。文章作者：关岳，QQ音乐客户端开发工程师。一、问题与目标作为一款注重于内容运营的应用程序..._webview 离屏预渲染
文章浏览阅读846次。_init和__initdata告诉内核这些函数和数据只在初始化期间使用，一旦初始化完成，它们就不再需要，从而可以释放掉它们占用的内存，从而提高系统的性能和效率。将函数helloworld_init注册为当前内核模块的初始化函数，当这个内核模块被加载到系统中时，内核会自动调用这个函数来完成其初始化工作。__exit告诉内核这些函数只在模块卸载时使用，一旦模块被卸载，它们就不再需要，从而可以释放掉它们占用的内存，从而提高系统的性能和效率。是一个 Linux 内核模块中的宏，用于声明模块的许可证信息。_linux输出hello world
文章浏览阅读1.5k次。云是一种服务，就像我们去餐厅吃饭一样，只需要点菜，不需要知道厨师怎样烹饪食物。在云中，用户也只需要告诉云需要什么服务，不需要了解底层技术的细节，只需要知道如何使用云来实现自己的业务需求，同时云提供商也会对云中的数据和服务进行管理和维护，保证用户的数据和服务安全和可靠。_openstac的特点
文章浏览阅读519次，点赞8次，收藏9次。而PMSM旋转坐标系SMO算法，则是在旋转坐标系基础上，结合滑模观测器的特点和优势，利用电机自身动态响应特性，实现对电机机械运动状态的观测和估计。综上所述，本文基于旋转坐标系的永磁同步电机滑模观测器仿真模型，结合PMSM旋转坐标系SMO算法，基于matlab simulink进行搭建，旨在帮助读者更加深入地了解PMSM电机控制中的速度观测问题，提高电机控制的精度和效率。在永磁同步电机控制中，旋转坐标系是非常重要的概念，它可以将交流电量进行坐标转换，使得电机控制的计算更加简洁明了。_永磁同步发电机失磁故障滑膜观测器仿真
文章浏览阅读2.7k次，点赞3次，收藏15次。研究中经常会用到将加速度数据积分成速度和位移，对前几年编写的程序重新进行了改写。为了测试和验证peer2acc函数、dirFolder函数和acc2vd函数，编写了一个简单的测试程序acc2vd函数主要信息如下：%% Main information% Developed by Decai@hfut 2014/11/14% Calculate velocity & displacemen..._加速度积分得到速度和位移