今日学思

一、 HTML5介绍

 注意：

    HTML5永远都不可能脱离javaScript
    HTML5在移动端支持好于PC端

二、 HTML5新表单

1. input新类型

   email:验证是否包含@
   search:搜索框
   url: 验证是否包含http
   tel: 效果只能在移动端出现
   number: 数字选择 min max step
   range: 范围类型 min max step value 
   color: 颜色选择器
   
   date:日期类型
   week:星期类型
   month:月份类型
   

2. 表单新元素

   1）datalist: 定义input的备选框
   
      input的list的值要等于datalist的id值
   
      数据与结构的分离
        数据：预定义数据内容datalist
        结构：显示在页面中的元素input
   
      使用datalist元素定义的数据，可以重复使用
   
   2）progress: 进度条
   
       max - 设置进度条的最大值
       没有min属性 - 最小值为0
       value - 当前的进度值
   
   3）meter : 刻度
   
       min: 最小值
       max: 最大值
       value: 当前值
       low: 低预警值
       high:高预警值
   
   4） output(了解) : 输出
   

   3. 表单新属性

      1. placeholder ： 置空字符

      2. multiple:允许输入多个值

         多个值使用逗号隔开，例如多个邮箱
         　　　　　　 只定义属性名，没有定义属性值

      3）autofocus:自动获取焦点

       只定义属性名，没有定义属性值
      

      4）form：允许将表单元素定义在表单外

       form表单外的表单一定要写form的id
      

三、HTML5 - 表单新验证属性

   1. required:验证当前元素之是否为空

   2. pattern: 使用正则表达式验证当前元素值是否匹配
        
         不能验证内容是否为null

   3. min和max: 验证当前元素值最大值或最小值

         一般使用与number/range等元素

   4. minlength和maxlength:验证当前元素值的最小长度和最大长度

            minlength:并不是html5的新属性

   5）validity:表单验证HTML5提供一种有效状态

         有效状态通过validityState对象获取到
         validityState对象可通过validity属性得到

四、HTML5- 表单新验证状态

 验证(有效)状态-用来替换原来的判断逻辑

 1、 validityState对象提供了一系列的有效状态

      通过有效状态判断，进行判断

      注意：所有验证状态必须配合上诉的验证属性使用

 2、 valueMissing: 

      判断当前元素值是否为空
      配合required属性使用

 3、 typeMismatch

      判断当前元素值得类型是否匹配

      配合email/number/url等属性使用

 4、 patternMismatch

      判断当前元素值是否匹配正则表达式

      配合pattern属性使用

 5. tooLong

      判断当前元素值的长度是否正确
      配合maxlength属性


 6. rangeUnderflow

      判断当前元素值是否小于min属性值
      配合min

 7. stepMismatch

      判断当前元素值是否与step设置相同
      配合step属性，并不与min和max属性值比较

 8. valid : 

      判断当前元素是否正确

       返回true - 表示验证成功
       返回false - 表示验证失败

 9. customError：

      配合setCustomValidity()方法使用

       setCustomValidity() 

            设置自定义的错误提示内容

            一旦使用该方法修改默认错误提示后，即使输入正确也会有提示

            一旦使用该方法，validityState所有状态都返回false