【HTML5新表单】

1.type:

- email ：

验证逻辑不完整，只验证是否包含 @ ；

- search ：

- url ：

验证逻辑不完整，只判断是否包含 http:// ；

- tel ：

电话号码类型:

只能在移动端有效果，会弹出数字键盘；只能输入数字；

pc端，可以输入英文；

- number :

数字类型：3个属性；

min:

max:

step: 默认值1；

- range ：

范围类型:

min：

max：

step：

value：当前值；

- color ：

颜色类型：取色器；

- date :

日期类型；

- week : 周

- month : 月

2.新表单元素

- datalist元素

定义备选项，与option

与input text搭配使用，input的list属性指向datalist的id；

特点：

数据与结构分离；预定义数据在datalist，结构input；

请选择

北京

南京

天津

- progress元素

进度条；

不同浏览器效果不同；2属性；

- max 没有min属性，最小默认为0；

- value 当前进度值；

functionmychange(){varprogress=document.getElementById("progress");varvalue=progress.value;

value++;

progress.value=value;if(value== 100){

clearTimeout(t);

}

t=setTimeout("mychange()",100);

}

mychange();

- meter元素

刻度；

- min

- max

- value

- low  低预警值

- high 高预警值

- output元素

输出；

for属性

3.表单新属性

- placeholder属性：

类似于value； placeholder="请输入用户名";

默认文本是灰色，并且 文本框获取焦点，输入时，默认文字自动消除；

- multiple属性：

允许文本框中输入多个值，用","隔开；

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

- autofocus属性

自动获取焦点

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

- form属性

值等于表单元素的id值；

允许表单元素定义在表单之外；

4.表单新验证

1.验证属性

- required :

验证为空；

提交时才提示；

- pattern  ：

不要斜线；pattern="[a-z]{6,12}"

使用正则表达式验证元素值是否匹配；

验证不了空；

提交时才提示；

- min max

验证当前元素值的最小值和最大值；

适用于type=number类型

提交时才提示；

- minlength maxlength

验证当前元素值的最小长度和最大长度；

提示是英文的；

minlength:提交时才提示；不是H5的新属性；

maxlength:输入时长度就不能大于指定值；

- validity

表单验证在H5中提供一个有效状态；有效状态通过validityState对象获取到，

validityState对象可以通过validity属性得到；

2.验证(有效)状态

validityState对象提供一系列有效状态

***所有验证状态要配合验证属性使用；

- valid

元素所有"验证都通过"就返回true；

Elem.validity.valid;

以下验证返回true，都是验证错误；

- valueMissing

判断当前元素值是否为空。返回true false;

配合required使用；

Elem.validity.valueMissing;

- typeMismatch

判断当前元素是否匹配类型type；返回true false;

配合email，number，url使用；

email.validity.typeMismatch;

- patternMismatch

判断当前元素是否匹配正则表达式；返回true false;

配合pattern使用；

Elem.validity.patternMismatch;

- tooLong

判断当前元素是否匹配长度；返回true false;

配合maxlength；

**使用maxlength属性后，长度不会超出maxlength的值，tooLong很难出现这种情况；****逻辑完整性；

- rangeUnderflow

输入内容值小于min的值时，返回true；

只能匹配min 不能与max比较；

Elem.validity.rangeUnderflow;

- stepMismatch

判断当前元素值是否与step设置相同；

只能匹配step，不和min max比较；

Elem.validity.stepMismatch;

- customError

配合setCustomValidity()方法使用；只要用了此方法，customError就返回true；

setCustomValidity()：

作用：设置验证失败后的默认提示信息；

问题：一旦使用该方法修改默认提示信息后，即使输入正确，错误提示信息依旧出现；

解决：当输入正确时，调用该方法将信息设置为空"";

表单验证状态(完整)用户名:
email地址:
密码:
确认密码:
年龄:
成绩:

varuser=document.getElementById("user");

user.οnblur= function(){if(user.validity.valueMissing){

console.log("用户名不能为空.");

}

}varemail=document.getElementById("email");

email.οnblur= function(){if(email.validity.typeMismatch){

console.log("email输入格式错误.");

}

}varpwd=document.getElementById("pwd");

pwd.οnblur= function(){if(pwd.validity.patternMismatch){

console.log("密码输入错误.");

}

}varrepwd=document.getElementById("repwd");

repwd.οnblur= function(){if(repwd.validity.tooLong){

console.log("密码输入过长.");

}

}varage=document.getElementById("age");

age.οnblur= function(){if(age.validity.rangeUnderflow){

console.log("年龄过小,不符合!");

}

}varscore=document.getElementById("score");

score.οnblur= function(){if(score.validity.valid){

console.log("成绩输入正确.");

}else if(score.validity.stepMismatch){

console.log("成绩输入不符.");

}

}