Java Web学习04---jQuery_validate和BootStrap

jQuery-validate是jQuery的一个插件, 有助于我们进行表单校验, 而BootStrap是一个HTML+CSS+JavaScript的类库.

jQuery-validate

jQuery-validate是jQuery的一个插件, 它可以用来进行表单校验, 它必须在jQuery的基础上面进行运行. 所以首先需要导入jQuery.js, 然后需要在页面加载成功之后校验.
官网下载地址
帮助文档位置

• 检验器查询表

校验类型	取值	描述
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校验

• 格式

<script type=”text/javascript”>
  $(function(){
    $(“form元素的选择器”).validate({
      rules:{
        //下面只能写一个校验器
        name字段名:”校验器”,
        //下面可以写多个校验器
        name字段名:{
          校验器:”取值”,
          校验器:”取值”
          },
        name字段名:{
          校验器:”取值”,
          校验器:”取值”
          }
      },
      //messages是文本描述可以去掉
      messages:{
        name字段名:{
          校验器:”提示”,
          校验器:”提示”
          },
        name字段名:{
          校验器:”提示”,
          校验器:”提示”
          }
      }
    });
  });
</script>

• 使用说明和API
  • 查看
• 使用示例
  //导入jQuery库

<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:{
        debug: true //只验证不提交, 在调试时很方便
      },
      rules:{
        username:required,
        password:{
          required: true,//必填
          required: “#aa:checked”,//表达式为真必须校验
          required: function(){},//函数返回值为真必须校验
          rangelength:[6, 20]//长度范围
        },
        repassword:{
          required: true,
          rangelength:[6, 20],
          equalTo:”[name=’password’]”//相等
        }
        minValue:{
          min: 5//最小值5
        }
      },
      //这里是消息, 也可以不写
      messages:{
        password:{
          required: “密码不能为空”,
          rangelength:”密码长度在6-20位”
        },
        repassword:{
          required: “重复密码不能为空”,
          rangelength:”重复密码长度在6-20位”,
          equalTo: “两次密码不一致”
        },
        minValue:{
          min: “最小值不能小于{0}”//{index}可以动态获取rules里面的对象校验器的值
        }
      }
    });
  });
</script>

BootStrap

Bootstrap是由动态CSS语言Less写成, 是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件, 它是响应式设计.

• 下载
  • BootStrap中文网

• 使用

  • 在导入BootStrap之前需要导入jQuery.js

    <link rel=”stylesheet” type=”text/css” href=”../css/bootstrap.min.css”/>

    <script src=”../js/jquery-1.11.0.js”></script>//先导入jQuery.js
    <script src=”../js/bootstrap.min.js”></script>

  • 移动设备优先, 对于移动设备有了很好的支持.

    <meta name=”viewport” content=”width=device-width, initial-scale=1”/>

    • width:可视区域的宽度，值可为数字或关键词device-width
    • height:同width
    • intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
    • maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
      • maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
    • user-scalable:是否可对页面进行缩放，no 禁止缩放
  • Boostrap需要把所有标签都放到布局容器中
    • .container类 用于固定宽度并支持响应式布局的容器

      <div class=”container”></div>

    • .container-fluid类 用于100%宽度, 占据全部视口(viewport)的容器

      <div class=”container-fluid”></div>

    • .container和.container-fluid不同嵌套.

• 栅格系统
  Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

  • 媒体查询, BootStrap把屏幕成为四种

    • 超小屏幕(手机, 小于768px), 没有相关代码, 在Boostrap中是默认的
      • 类前缀 .col-xs-(需要占的列数, 小于12), 如col-xs-6(每行显示2个)

    • 小屏幕(平板, 大于大于768px)

      @media (min-width: @screen-sm-min) { … }

      • 类前缀 .col-sm-(需要占的列数, 小于12), 如col-sm-4(每行显示3个)

    • 中等屏幕(桌面显示器, 大于等于992px)

      @media (min-width: @screen-md-min) { … }

      • 类前缀 .col-md-(需要占的列数, 小于12), 如col-md-3(每行显示4个)

    • 大屏幕(大桌面显示器, 大于等于1200px)

      @media (min-width: @screen-lg-min) { … }

      • 类前缀 .col-lg-(需要占的列数, 小于12), 如col-lg-2(每行显示6个)
• 示例

  <script type=”text/javascript”>
    //在页面加载完成之后
    $(function() {
      //布局容器中的元素添加class值, 使其在大屏幕下显示6个(col-lg-2—-gt;12 / 2), 中等屏幕下显示4个
      (col-md-3—->12 / 3), 小屏幕下显示3个(col-sm-4—-gt; 12 / 4), 超小屏幕下显示2个(col-xs-6—-gt; 12 / 6).
      $(“#container-fluid>div”).addClass(“col-lg-2”).addClass(“col-md-3”).addClass(“col-sm-4”)
      .addClass(“col-xs-6”);
    });
  </script>

• 组件, 一些可复用的组件, 如字体图标、下拉菜单、导航、警告框、弹出框等,具体可以查看官网或者

  • 字体图标

    • 使用注意
      • 不要和其他组件混合使用, 图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 标签，并将图标类应用到这个 标签上。
      • 只对内容为空的元素起作用, 图标类只能应用在不包含任何文本内容或子元素的元素上。

        <button type=”button” class=”btn btn-default” aria-label=”Left Align”>
         <span class=”glyphicon glyphicon-align-left” aria-hidden=”true”></span>
        </button>

        <button type=”button” class=”btn btn-default btn-lg”>
         <span class=”glyphicon glyphicon-star” aria-hidden=”true”></span> Star
        </button>

  • 下拉菜单, 用于显示链接列表的可切换、有上下文的菜单。

    • 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。

      <div class=”dropdown”>
       <button class=”btn btn-default dropdown-toggle” type=”button” id=”dropdownMenu1” data-toggle=”dropdown” aria-haspopup=”true” aria-expanded=”true”>
        Dropdown
        <span class=”caret”></span>
       </button>
       <ul class=”dropdown-menu” aria-labelledby=”dropdownMenu1”>
        <li><a href=”#”>Action</a></li>
        <li><a href=”#”>Another action</a></li>
        <li><a href=”#”>Something else here</a></li>
        <li role=”separator” class=”divider”></li>
        <li><a href=”#”>Separated link</a></li>
       </ul>
      </div>

  • 导航条
    • 在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。
    • 务必使用 <nav>元素，或者，如果使用的是通用的 <div> 元素的话，务必为导航条设置 role=”navigation” 属性，这样能够让使用辅助设备的用户明确知道这是一个导航区域。
    • 通过添加 .navbar-inverse 类可以改变导航条的外观。
• JavaScript 插件, 提供了过渡效果、模态框、下拉菜单、滚动监听、标签页、工具提示、弹出框、警告框、按钮、轮播图等.