（推荐链接）精通h5编程：http://www.html5zhan.com/jingyanSubjectList/detail/531eab4c2e05e82568b33dc1
一、 自动验证
在HTML 5中，通过对元素使用属性的方法，可以实现在表单提交时执行自动验证的功能。执行示例1后，将在表单提交时自动验证输入的内容是否为数字，如果验证通不过，将显示错误信息文字。
示例1：
折叠XML/HTML 代码复制内容到剪贴板
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>表单验证示例</
title
>
</
head
>
<
body
>
<
form
method
=
"post"
>
<inputname="text"type="text"required pattern="^\w.*$">
<
input
type
=
"submit"
>
</
form
>
</
body
>
|
下来，让我们详细看一下在HTML 5中追加的关于对元素内输入内容进行限制的属性的指定。
1．required属性
HTML 5中新增的required属性可以应用在大多数输入元素上（除了隐藏元素、图片元素按钮上）。在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字，提示用户这个元素中必须输入内容。
2．pattern属性
之前提到的一些新增的input元素，譬如email、number、url等，要求输入内容符合一定的格式，对input元素使用pattern 属性，并且将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。当输入的内容不符合给定格式时，则不允许提交，同时在浏览器中显示 信息提示文字，提示输入的内容必须符合给定格式。譬如下面所示，要求输入内容为一个数字与三个大写字母。
折叠XML/HTML 代码复制内容到剪贴板
|
1
|
<inputpattern="[0-9]|[A-Z]{3}"name=partplaceholder="输入内容：一个数字与三个大写字母。">
|
3．min属性与max属性
min与max这两个属性是数值类型或日期类型的input元素的专用属性，它们限制了在input元素中输入的数值与日期的范围。
4．step属性
step属性控制input元素中的值增加或减少时的步幅。例如当你想让用户输入的值在0与100之间，但必须是5的倍数时，你可以指定step为5。
二、显式验证
除了对inut元素添加属性进行元素内容有效性的自动验证外，在HTML 5中，form元素与input元素（包括select元素与textarea元素）都具有一个checkValidity方法。调用该方法，可以显式地 对表单内所有元素内容或单个元素内容进行有效性验证。checkValidity方法以boolean的形式返回验证结果。请看示例2中的示例。
示例2：
折叠XML/HTML 代码复制内容到剪贴板
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<
meta
charset
=
UTF
-8 />
<
title
>checkValidity示例</
title
>
<
script
language
=
"javascript"
>
function check()
{
var email = document.getElementById("email");
if(email.value=="")
{
alert("请输入Email地址");
return false;
}
else if(!email.checkValidity())
alert("请输入正确的Email地址");
else
alert("您输入的Email地址有效");
}
</
script
>
<
form
id
=
testform
onsubmit
=
"return check();"
>
<
label
for
=
email
>Email</
label
>
<
input
name
=
email
id
=
email
type
=
email
/><
br
/>
<
input
type
=
submit
>
</
form
>
|
（另注：这里用return check()而不是check()，目的是如果返回的是false就阻止表单提交）另外还要提到的是，在HTML 5中，form元素与input元素都还存在一个validity属性，该属性返回一个ValidityState对象。该对象具有很多属性，但最简单， 最重要的属性为valid属性，它表示了表单内所有元素内容是否有效或单个input元素内容是否有效。
三、取消验证
有时我们可能想要把表单临时提交一下，但又不想让它进行表单中所有元素内容的有效性检查。譬如，一个非常大的表单需要分成两部分（或几部分），在第 二部分中有个文本框中内容是必须要填的，如果填每一部分内容则会耗时较多，或填完第一部分之后，第二部分要过一段时间再填，在这种情况下应该允许用户先提 交保存第一部分内容，但是同时需要临时取消第二部分的内容表单验证。
有两种方法取消表单验证，第一种方法是利用form元素的novalidate属性，它可以关闭整个表单验证。当整个表单的第二部分需要验证的内容 比较多，但又想先提交表单的第一部分内容时，可以使用这种方法。先把该属性设为true，关闭表单验证，提交第一部分内容，然后在提交第二部分时再把它设 为false，打开表单验证，提交第二部分内容。
第二种方法是利用input元素或submit元素的formnovalidate属性，利用input元素的formnovalidate属性可 以让表单验证对单个input元素失效，在前面所举例子中，当表单的第二部分中需要验证的元素数量很少时，可以只利用这些元素的 formnovalidate属性，让表单验证对这些元素失效。
而如果对submit按钮使用了formnovalidate属性，点击该按钮时，相当于利用了form元素的novalidate属性，整个表单验证都失效了。
利用这一点，可以实现“假提交”与“真提交”的效果，例如一个提交按钮，不带表单验证，提交时不进行数据有效性检查，提交时临时保存到文件或什么地方，另一个提交按钮为真提交，提交后保存到数据库中。
HTML 5中许多新的input元素都带有对于输入内容的有效性的检查，如果检查不通过，浏览器会针对该元素提供错误信息。但有时开发者不想使用这些默认的错误信 息提示，而想使用自己定义的错误信息提示。或者有时，想给某个文本框增加一种错误信息提示，譬如密码与确认密码不一致时用浏览器错误信息提示方式提供关于 密码不一致的错误信息。
在HTML 5中，可以使用JavaScript调用各input元素的setCustomValidity方法来自定义错误信息。请看示例3中的示例。
示例3：
折叠XML/HTML 代码复制内容到剪贴板
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html><
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>自定义错误信息示例</
title
>
<
script
language
=
"javascript"
>
function check()
{
var pass1=document.getElementById("pass1");
var pass2=document.getElementById("pass2");
if(pass1.value!=pass2.value)
pass2.setCustomValidity("密码不一致。");
else
pass2.setCustomValidity("");
var email=document.getElementById("email");
if(!email.checkValidity())
email.setCustomValidity("请输入正确的Email地址。");
}
</
script
>
<
form
id
=
"testform"
onSubmit
=
"return check();"
>
密码：<
input
type
=
password
name
=
"pass1"
id
=
"pass1"
/><
br
/>
确认密码：<
input
type
=
password
name
=
"pass2"
id
=
"pass2"
/><
br
/>
Email:<
input
type
=
email
name
=
"email1"
id
=
"email"
/><
br
/>
<
input
type
=
"submit"
/>
</
form
>
|
在这个例子中，追加了两种错误信息提示。第一种情况为确认密码与密码不一致时，给确认密码文本框追加的自定义错误信息提示，溯览器提供的确认密码文 本框本来没有这项检查内容。第二种情况为溯览器提供的Email文本框本来就有检查输入的Email是否符合Email格式的功能，但是开发者自行修改了 浏览器默认的错误信息提示。
Opera是目前唯一支持自定义错误信息提示的浏览器。对于“值***不允许页面上的脚本使用！”这个前缀文字，也是该浏览器加在前面的，不能修改。所以，请小心使用自定义错误信息提示。
323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
