HTML5的新特性–基础知识(2)

 复习:
1.新表单元素
   全部都是由input标签组成
   1.1 email:接收用户录入的email数据并验证
   1.2 url:注意输入的内容必须以http://开头
   1.3 search:显示效果和文本框差不多,只是多了一个删除效果
   1.4 range:一般用于选取颜色、透明度等
         范围:
         属性:min最小值;max最大值;step步长;value当前值
   1.5 number:快速提供数字选取操作
         属性:min最小值;max最大值;step步长;value当前值
   1.6 color:会调出Windows中自带的调色板,返回16进制的颜色值
   1.7 date:直接弹出日期控件,可以选择年月日,值格式:2015-06-01
   1.8 month:格式2015-05
   1.9 week:格式2016-W13
   1.10 datetime:格式2015-06-01T09:15Z(取得是格林威治时间,应该往前推8个小时就是我们的时间)
   1.11 datetime-local得到的是本地客户机时间,但是本地时间用户是可以随便改的,在web应用中,基本上是要获取服务器时间
 2.新表单属性:
   2.1 required  非空验证,只要出现required不论后面写的是不是required="false",都要求非空,要想提交空的,就不写required
   2.2 multiple 在一个表单元素中, 允许录入多段类型相同的数据,但必须由“,”作为分隔符
   2.3 pattern 简化正则表达式,属性值可以直接写正则表达式,能根据用户指定的正则表达式,对数据进行验证
   2.4 autofocus  自动获取焦点
   2.5 form  在表单之外,提交表单元素,关联的form里面要加id,与form关联的input里面的form属性就是表单的id
       <form id="frm"></form>
       <input type="text" form="frm" />
   2.6 placeholder:网页加载时,表单元素上会默认显示一段文字。注意:只用在用户录入数据时,placeholder的值才会消失
 3.新表单元素(显示数据)
   3.1 datalist构建一个数据列表,可以提供给文本框类型的控件使用
       <option value="">display</option> 
       <option value="" label="display" />
       与datalist相关联:<input type="text" list="datalistId">
   3.2 progress 进度条控件
        max:进度完成后的值
        value:当前的进度值
        注意:多数情况下要与setInteval或setTimeout联用
   3.3 meter 刻度表
       属性:min(设置整个刻度的下限值)、max、value、low(设定合理范围下限值,大于等于min)、high(设定合理范围上限值,小于等于max)、optimum(设置最佳位置值)
   3.4 output 显示表单元素当中所计算得到的值,也可以不用output来显示,其他任何一个可以显示的标签也都可以
      for:关联相互计算的控件id值,增加程序的可读性
      value:显示的值
 API:Application Programming Interface
 新内容:
 定制验证消息:setCustomValidity()
 实现表单验证:checkValidity()
 setCustomValidity():如果用户提交了一个包含无效域的表单,支持HTML5的浏览器就会显示一条错误信息。使用setCustomValidity()可以定制验证消息。如果提供的是空消息,错误消息就会被清除。
 语法:表单元素.setCustomValidity("错误消息");
 一旦设置了错误消息,表单不允许被提交的。如果想清除错误消息:input.setCustomValidity("")
 练习1:
 打开上次课的上机练习,完成以下功能
 1.如果用户名称为空的话,给出提示,请输入用户名称,并且阻止表单提交
 2.验证  密码以及验证密码,如果两个密码不一致,在验证密码处给出提示,两次输入的密码必须一致,并阻止表单提交
 3.如果没有问题(输入的时候没有错误、用户改正了错误)允许表单被提交
 通过setCustomValidity()完成
 完成步骤:
 1、初始化网页时,为用户名称 设置错误消息
    初始化网页:window.onload=function(){}
    用户名称:name:loginname,document.forms[0].loginname
 2、清空“用户名称”错误消息
    当鼠标离开时(blur),检查用户名称数据,如果不为空,清空错误信息
 3.处理验证密码的onblur事件
 密码 和验证密码的值是否一致,不一致
 checkValidity()实现表单验证:强制要求在脚本中对元素进行验证,它能够在不提交表单的前提下激活验证过程.如果元素是有效的,方法会返回true
 例:
 <head>
   <meta charset="utf-8" />
   <title>  </title>
     <script>
         function $(id){
             return document.getElementById(id);
         }
         function button_click(){
             //1、验证用户名称以及用户Email
             var txtUName = document.forms[0].txtUName;
             var txtUEmail = document.forms[0].txtUEmail;
             //验证txtUName
             var nameRet = txtUName.checkValidity();
             var emailRet = txtUEmail.checkValidity();
             //2、验证表单是否通过
             var formRet = document.forms[0].checkValidity();
             console.log("txtUName验证结果:" + nameRet);
             console.log("txtUEmail验证结果:"+emailRet);
             console.log("表单验证结果:"+formRet);
             //根据表单整体验证结果 来决定是否提交表单
             if(formRet){
                 document.forms[0].submit();
             }
         }
     </script>
  </head>
  <body>
     <form>
         用户名称 :<input type="text" name="txtUName" required />
         <span id="txtUNameTip">*</span>
         <br />
         用户邮箱:<input type="email" name="txtUEmail" required />
         <span id="txtUEmailTip">*</span>
         <br />
         <input type="submit" value="提交" />
         <input type="button" value="验证" onclick="button_click()" />
     </form>
  </body>
 绑定事件
 方法一:
 <input onclick="text_click()"/>
 <script>
    element.onclick=function(){
    }
 </script>
 方法二:
 addEventListener();
 element.addEventListener("事件类型",functionName,boolean);
 boolean:true,在事件捕获中处理事件
         false,在事件冒泡中处理事件
 新事件:invalid
 验证事件:invalid,每当用户提交表单时,如果检测到无效域时,就会触发invalid事件,它主要关注发生错误的元素
  <head>
   <meta charset="utf-8"/>
   <title> 属性 </title>
   <style>
   </style>
   <script>
      function initial(){
          //为表单绑定invalid事件
          document.forms[0].addEventListener("invalid",form_invalid,true);
          }
     function form_invalid(event){
         //获取引发错误的元素
         var tar=event.target;
         tar.style.background="red";
     }
      window.addEventListener("load",initial,false);
   </script>
  </head>
  <body>
    <form>
      用户名称:<input name="txtUName" required />
      <br/>
      用户邮箱:<input type="email" name="txtUEmail" />
      <br/>
      <input type="submit" value="提交" />
    </form>
  </body>
 ValidityState属性
 当浏览器打开含有表单的页面时,该页面并不支持实时验证。只有单击“提交”按钮时,才会验证这些域。为了增加定制验证过程的实用性,可以使用validityState对象的几个属性
 如何获取ValidityState:是通过validity属性获取的,并且可以通过它的几种状态对表单元素进行验证。
 语法:var valCheck=elem.validity
 状态:封装了一组状态检查属性,可实现自定义验证过程
 valid状态:得到的是一个布尔值,表示当前状态是否通过了所有的验证约束条件,可以把valid特性看做是最终验证结果:如果所有约束条件都通过,valid值就是true,反之就是false
 valueMissing状态:如果表单控件设置了required特性,那么用户填写或者通过代码调用方式填值之前,控件会一直处于无效状态。如,空的文本输入框无法通过必填检查,除非在其中输入任意文本。输入值为空时,valueMissing会返回true
 typeMismatch状态:与表单元素的类型有关。如果输入语法不符合指定的类型,那么这个状态就是true。比较适合验证email等简单的类型
 patternMismatch状态:如果输入内容与所设置模式不匹配,那么这个状态就是true
 tooLong状态:如果输入内容长度大于maxlength属性指定值,那么这个状态就是true
 rangeUnderflow状态:如果输入内容小于min属性声明的值,那么这个状态就是true,一般用在number属性上
 rangeOverflow状态:如果输入内容大于max属性声明的值,那么这个状态就是true,一般用在number属性上
 stepMismatch状态:如果给定的值与min,max,step不一致,那么这个状态就是true
 customError状态:如果元素设置了自定义错误,那么这个状态就是true,如果定义了setCustomValidity且没有被清空,就是true,customError是配合setCustomValidity才能使用的
 ValidityState状态:valid状态,valueMissing状态,typeMismatch状态,patternMismatch状态,tooLong状态,rangeUnderflow状态,rangeOverflow状态,stepMismatch状态,customError状态
 form表单属性 novalidate 取消表单中所有元素的验证操作
 <form novalidate>
   <input required />
 </form>
 上面例子非空不会有提示的,因为设置了novalidate
 form表单练习:
 1、所有的必填项目,如果为空的话,给出相应的提示
 2、用户名称:
   1.由字母数字下划线组成
   2.5-16位
   如果违反,给出相应提示,且表单不能被提交(通过表单的checkValidity()来决定表单是否被提交)
 3、用户密码:
    6-16位  字母数字组成(符号)
    如有违反,给出相应提示,并且不能提交表单
 4、重复密码:
    必须与上面密码保持一致,否则给出提示
 5、email地址,格式必须正确
IT文库 » HTML5的新特性–基础知识(2)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址