05-javaWeb-validate+bootstrap

技术2022-07-16 68

jqery validate插件

案例1-表单校验

bootstrap

栅格系统媒体查询:

案例2-创建一个响应式的页面

案例3-布局首页

总结

qery validate插件

下载官网地址：http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip帮助文档位置：http://jqueryvalidation.org/documentation/ validate使用步骤:

validate是别人封装好的第三方工具

1.导入jquery.js（依赖于jQuery）

2.导入validate.js

3.在页面加载成功之后对表单进行校验 $("选择器").validate()

4.在validate中编写校验规则（类似json）规则

$("选择器").validate({ rules:{}, messages:{} });

rules格式:

格式1:

字段的name属性:"校验器"

格式2:

字段的name属性:{校验器:值,校验器:值}

例如:

username:"required", password:{ required:true, digits:true }, repassword:{ equalTo:"[name='password']" }, zuixiaozhi:{ min:5 }, shuzhiqujian:{ range:[5,10] }

messages的格式:

格式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校验

案例1-表单校验

需求:

通过validate插件来校验表单

bootstrap

webcss框架, 集合了html/css/jquery为一家创建响应式的页面响应式:适配不同的上网设备 bootstarp的入门

1.下载bootstarp

网站:http://www.bootcss.com/ 下载:用于生产环境的 Bootstrap

2.导入bootstarp.css

3.导入jquery.js

4.导入bootstrap.js

5.添加一个meta标签支持移动设备

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

bootstrap组成部分:

全局css样式--定义了一套css样式

<div class="container">  <span class="h1">我是h1</span>我是跟随者 <hr> <a href="#" class="btn btn-primary">sdfsadf</a> </div>

组件--定义了很多可以直接使用的组件例如:字体图标导航条

js插件--例如:轮播图选项卡

案例2-创建一个响应式的页面

需求:

创建一套页面,可以根据上网设备的不同自动调节显示的效果.

步骤分析:

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>  <link rel="stylesheet" href="../css/bootstrap.min.css" />  <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>  <script type="text/javascript" src="../js/bootstrap.min.js" ></script> </head> <body>   <div class="container">  <div class="row"> <nav class="navbar navbar-default"> <div class="container-fluid">  <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>  <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> </div> </nav> </div>  <div class="row"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">   <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>  <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 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>

案例3-布局首页

需求:

当屏幕为小屏幕的时候和超小屏幕的时候隐藏热门商品中的左边那张图片当屏幕为超小屏幕隐藏middle图片

技术分析:

hidden-xxxx

步骤分析:

1.布局页面 2.创建8个div 3.第一个:logo 3个div 小屏幕 2个一行超小屏幕一个一行 4.第二个div:导航条 5.第三个div:轮播图 6.第四个div:最新商品先分成左右两个div 左边的div 放一张图片中等屏幕占2份屏幕为小屏幕的时候和超小屏幕的时候隐藏

右边的div 中等屏幕占10份屏幕为小屏幕的时候和超小屏幕的时候占12份

middle 中等屏幕 6份小屏幕 12份超小屏幕隐藏

商品: 中等屏幕 2份小屏幕 4份超小屏幕 12份

<div class="col-md-10 col-sm-12" style="height: 400px;">  <div class="col-md-6 col-sm-12 hidden-xs" style="height: 200px;"> <img src="../img/middle01.jpg" style="height: 200px;"/> </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 class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;"> <img src="../img/small08.jpg" /> </div> </div>

总结

validate

使用步骤: 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长度]

bootstrap:编写一套页面,适应不同的设备(响应式)

使用步骤: 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"

Processed: 0.010, SQL: 9