05-javaWeb-validate+bootstrap

目录

jqery validate插件

案例1-表单校验

bootstrap

栅格系统媒体查询:

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

案例3-布局首页

总结                             

---

qery validate插件

• 下载

1. 官网地址：http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip
2. 帮助文档位置：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	“@”或者”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

1.         webcss框架,
2.         集合了html/css/jquery为一家
3.         创建响应式的页面
4.         响应式:适配不同的上网设备

• bootstarp的入门

        1.下载bootstarp

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

        2.导入bootstarp.css

        3.导入jquery.js

        4.导入bootstrap.js

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

       6.将所有的内容放入到布局容器中.

                Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类
                方式1:（有留白）
                       

                方式1:
                       

 

栅格系统媒体查询:

        注意:

                bootstrap将每一行分成12份

        假如大屏幕,每行显示6个
                超大电脑,屏幕分辨率>1200                使用: col-lg-2
                
        假如屏幕小点,每行显示4个
                992<屏幕分辨率<1200                        使用: col-md-3
                        
        再小点,每行显示2个
                768<屏幕分辨率<992                        使用: col-sm-6
        
        继续小,每行显示1个        
                屏幕分辨率<768                                使用:col-xs-12

1

 

• bootstrap组成部分:

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

		

			
			我是h1我是跟随者
			

			sdfsadf
		

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

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

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

• 需求:

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

• 步骤分析:

        1.先有一个模版页面
        2.先创建一个导航条
        3.下面创建一个轮播图
        4.下面再创建3个div
                中等屏幕的时候 3个在一行
                小屏幕的时候 2个一行
                最小屏幕的时候1个一行

	
		
		
		
		
		
		
		
			
		
		
	
	
		
		
		

			
			

				

				  

				    
				    

				      
				        Toggle navigation
				        
				        
				        
				      
				      程序员学院
				    
				
				    
				    

				      

				        
JAVA学院 (current)
				        
UI学院
				        
C++学院
				        

				          其他学院
				          

				            
IOS学院
				            
电子商务
				            
前端
				            

				            
Separated link
				            

				            
幼儿园
				          
				        
				      
				      

				        

				          
				        
				        Submit
				      
				     
				    

				  

				
			
			
			
			
			

				

				  
				  
				  

				    

				    

				    

				  
				
				  
				  

				    

				      
				      

				       	我是第一张图片
				      
				    
				    

				      
				      

				        i'am second
				      
				    
				     

				      
				      

				        third
				      
				    
				  
				
				  
				  
				    
				    Previous
				  
				  
				    
				    Next
				  
				
				
			
			
			
			
			

				

					
欢迎大家来到csdn
					
相信大家一定会有一个美好的未来,勿忘初心,方得始终.
					more
				
				
				

					
欢迎大家来到csdn
					
相信大家一定会有一个美好的未来,勿忘初心,方得始终.
					more
				
				
				

					
欢迎大家来到csdn
					
相信大家一定会有一个美好的未来,勿忘初心,方得始终.
					more
				
			
		
	

案例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份

 

总结                             

• 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"