javaweb-validate&bootstred

最新推荐文章于 2020-07-02 17:42:49 发布

原创最新推荐文章于 2020-07-02 17:42:49 发布 · 324 阅读

0 ·

CC 4.0 BY-SA版权

JavaWeb 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了JavaWeb中常用的验证插件Validate的使用，包括其规则设置、消息提示等，并详细阐述了Bootstrap框架的基本概念、作用、使用步骤及响应式设计。同时，文章还探讨了Bootstrap的媒体查询和主要组成部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Validate插件

Validate是基于jQuery的一款轻量级验证插件，内置丰富的验证规则，还有灵活的自定义规则接口，HTML、CSS与JS之间的q低耦合能让您自由布局和丰富样式，支持input,select,textarea的验证。

区别：volatile（关键字），这两个单词挺像的，当时都搞蒙了

2.使用步骤

菜鸟教程提供的 1.14.0 版本下载地址：
http://static.runoob.com/download/jquery-validation-1.14.0.zip

validate是别人封装好的第三方工具
   1.导入jquery.js
   2.导入validate.js
   3.在页面加载成功之后对表单进行校验 $("选择器").validate()
   4.在validate中编写校验规则
       $("选择器").validate({
           rules:{},
           messages:{}
       });

3.Validate中的rules使用规则

rules格式:
       格式1:
           字段的name属性:"校验器"
       格式2:
           字段的name属性:{校验器:值,校验器:值}
   例如:
       username:"required",
       password:{
           required:true,
           digits:true
       },
       repassword:{
           equalTo:"[name='password']"
       },
       zuixiaozhi:{
           min:5
       },
       shuzhiqujian:{
           range:[5,10]
       }

4.Validate中的Message使用规则

messages的格式:
       格式1:
           字段的name属性:"提示信息"
       格式2:
           字段的name属性:{校验器:"提示信息",校验器:提示信息"}
   例如:
       username:"用户名不能为空",
       password:{
           required:"密码不能为空",
           digits:"密码只能是数字"
       },
       repassword:{
           equalTo:"两次输入的内容不一致"
       },
       zuixiaozhi:{
           min:"最小值应该大于{0}"
       },
       shuzhiqujian:{
           range:"输入的范围在{0}~{1}之间"
       }

<script type="text/javascript">
			$(function(){
				$("#formId").validate({
					rules:{
						// 字段的name属性:"校验器"
						
						//字段的name属性:{校验器:值,校验器:值}
						username:"required",
						password:{
							required:true,
							digits:true
						},
						repassword:{
							equalTo:"[name='password']"
						},
						zuixiaozhi:{
							min:5
						},
						shuzhiqujian:{
							range:[5,10]
						}
					},
					messages:{
						//字段的name属性:"提示信息"
						//字段的name属性:{校验器:"提示信息",校验器:提示信息"}
						username:"用户名不能为空",
						password:{
							required:"密码不能为空",
							digits:"密码只能是数字"
						},
						repassword:{
							equalTo:"两次输入的内容不一致"
						},
						zuixiaozhi:{
							min:"最小值应该大于{0}"
						},
						shuzhiqujian:{
							range:"输入的范围在{0}~{1}之间"
						}
					}
				});
			})
		</script>

5.boorstrap定义

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的

6.bootstrap作用

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

7.bootstrap的使用

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>

8.Bootstrap中的媒体查询

媒体查询:
   假如大屏幕,每行显示6个
       超大电脑,屏幕分辨率>1200       使用: col-lg-2//跟在class的属性后面的

   假如屏幕小点,每行显示4个
       992<屏幕分辨率<1200           使用: col-md-3

   再小点,每行显示2个
       768<屏幕分辨率<992           使用: col-sm-6

   继续小,每行显示1个
       屏幕分辨率<768               使用:col-xs-12

注意：bootstrap将每一行分成12份
eg://自动适应屏幕大小栅格系统
<div class="container-fluid">
			<div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
			<div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
			<div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
			<div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
	</div>
			

9.组成部分

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

<button type="button" class="btn btn-default">Dafault</button>
<button type="button" class="btn btn-success">Successs</button>
.......
这里只需要修改class的属性就可以获得不同颜色的按钮等等

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

egg:
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <title>Bootstrap 实例 - 导航栏中的按钮</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鸟教程</a>
    </div>
    <div>
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">提交按钮</button>
        </form>
        <button type="button" class="btn btn-default navbar-btn">
            导航栏按钮
        </button>
    </div>
	</div>
</nav>

</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title>
	<link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide">
	<!-- 轮播（Carousel）指标 -->
	<ol class="carousel-indicators">
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>   
	<!-- 轮播（Carousel）项目 -->
	<div class="carousel-inner">
		<div class="item active">
			<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
		</div>
		<div class="item">
			<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
		</div>
		<div class="item">
			<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
		</div>
	</div>
	<!-- 轮播（Carousel）导航 -->
	<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	</a>
</div> 

</body>
</html>