复习:
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.οnlοad=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="验证" οnclick="button_click()" />
</form>
</body>
绑定事件
方法一:
<input οnclick="text_click()"/>
<script>
element.οnclick=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地址,格式必须正确