HTML5表单验证特性

      HTML5表单中新增表单验证方法

     1.运用伪类为验证添加样式：

required(必填)和option(option):根据字段中是否包含错误来应用不同的样式。

valid(有效)和invalid(无效)：根据控件中是否包含错误来应用不同的样式。注意，只有提交表单的时候，浏览器才能发现值是否有效

in-range(在范围内)和out-of-range(超出范围)：根据控件的min和max属性判断输入值是否超出范围，从而为控 件应用样式。

运用样式示例：

<input type="number" min=0 max=100 required />

验证样式：

input:required{background:lightyellow}             //为必填的<input>添加背景颜色

input:required:invalid{background:lightyellow}  //突出那些必填且当前填入无效值的字段

2.自定义验证：

最常用的是setCustomValidity()方法

<textarea id=comments oninput="validateComments(this)"></textarea>

<p id=p1><p>

function validateComments(input){
var input = document.getElementById("comments");
if(input.value.length < 40){
input.setCustomValidity("you need to comment in more detail");
}
else{
input.setCustomValidity ("");
}
p1.innerHTML = input.validationMessage;   //setCustomValidity的值需要通过validationMessage来获取
}   

提示：oninput 是 HTML5 的标准事件，对于检测 textarea, input:text, input:password 和 input:search  这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发

3.其他验证:

willValidate:说明表单控件是否将进行验证，也就是说如果有required，pattern等属性设置在控件上，那么通

                        过willValidate就可以知道该控件是否有验证约束

checkValidity  此函数用户对表单控件进行验证，如果为true则验证通过，false验证不通过

3.取消验证

<form action ="#" method="post" novalidate>

或者

<input type=submit value=“save” formnovalidate>