HTML5的新特性--基础知识（2）
2017-03-06 09:19
369 查看
复习：
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("事件类型",f
4000
unctionName,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地址，格式必须正确
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("事件类型",f
4000
unctionName,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地址，格式必须正确
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5基础知识一、新特性解读
- HTML5的新特性--基础知识（6）
- HTML5的新特性--基础知识（1）
- HTML5基础知识汇总_(2)自己定义属性及表单新特性
- HTML5基础知识汇总_(2)自定义属性及表单新特性
- HTML5的新特性--基础知识（3）
- HTML5基础知识汇总_(2)自定义属性及表单新特性
- HTML5基础知识整理（二）—— 新特性
- html5基础知识
- 关于HTML5的一些基础知识
- 黑马程序员之基础加强之IDE基础知识和Java5新特性
- html5基础知识
- HTML5 基础知识，第 1 部分
- 黑马程序员----------java基础知识之JDK5.0新特性总结
- C++基础知识（五）C++的一些特性
- 基础知识之11g新特性用extended statistics 解决列相关性
- html5 css3基础知识
- 无需编程知识，Wix让你零基础打造HTML5页面
- 无需编程知识，Wix让你零基础打造HTML5页面
- html5 canvas基础特性