今日学思

一、 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(了解) : 输出
    
    1. 表单新属性

      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

你可能感兴趣的:(今日学思)