HTML5学习记录--约束验证

HTML5表单验证出来很久了,但是貌似用的不多,可能因为各大浏览器风格问题吧,如果你想做统一风格的客户端验证还是用js来实现比较好.不过这里的一些验证能满足基本需求,反正最后都要服务器端统一验证的

---

一.input控件

对于input控件,增加了几个type,并且可以直接进行验证.

1.email

<form method="post">    <!--邮件认证-->  <input type="email" name="emali">  <input type="submit" value="提交"></form>

提交:

2.Url

<form method="post">    <!--邮件认证-->  <input type="url" name="url">  <input type="submit" value="提交"></form>

3.number

<form>    <input type="number" name="number">    <input type="submit" value="提交"></form>

并且可以增加或者减少

属性 值 描述

1. max number 规定允许的最大值

2. min number 规定允许的最小值

3. step number 规定合法的数字间隔（如果 step=”3”，则合法的数是 -3,0,3,6 等）

4. value number 规定默认值

4.range

<form>    <input type="range" name="range">    <input type="submit" value="提交"></form>

属性 值 描述

1. max number 规定允许的最大值

2. min number 规定允许的最小值

3. step number 规定合法的数字间隔（如果 step=”3”，则合法的数是 -3,0,3,6 等）

4. value number 规定默认值

5.Date pickers

<form>    <input type="date" name="date">    <input type="submit" value="提交"></form>

这个属性貌似兼容不太好

6.search

<form>    <input type="search" name="search">    <input type="submit" value="提交"></form>

和普通文本框一样,但是这样更加规范

7.color

<form>    <input type="color" name="color">    <input type="submit" value="提交"></form>

颜色选择器

---

二.表单新属性

1.placeholder

当用户还没有输入值时，输入型控件可能通过placeholder向用户显示描述性说明文字或者提示信息，这在目前网站中很常见，一些JS框架都会提供类似功能，简单的说下在旧版本中常用的解决方案，为输入控件创建一个label，然后通过CSS控制些label的位置使之覆盖在输入控件上面，当label获得焦点时，浏览器会把焦点指向输入控件。不过有了placeholder，新的浏览器就内置了这一功能，其特性值会以浅灰色样式显示在输入框中，当输入框获得焦点并有值后，该提示信息自动消失。

<form>    <input type="email" name="email" placeholder="[e-mail]">    <input type="submit" value="提交"></form>

2.autocomplete

其实在IE6中,autocomplete就已经实现，不过现在这一特性终于标准化了，浏览器通过autocomplete特性能够知晓是否应该保存输入值以备将来使用，autocomplete应该用一保护用户敏感数据，避免本地浏览器对它们进行不安全的存储。

1. on 该字段无需保护，值可以被保存和恢复
2. off 该字段需要保护，值不可以保存
3. unspecified 包含的默认设置，如果没有被包含在表单中或没有指定值，则行为表现为on

<form action="" method="get" autocomplete="on">    Name:<input type="text" name="name" /><br />    E-mail: <input type="email" name="email" autocomplete="off" /><br />    <input type="submit" /></form>

当用户提交过一次表单后，再次访问，name的输入框会提示你曾输入的值，而email则不会提示。

3.autofocus

页面载入时，我们通过autofocus指定某个表单元素获得焦点，但每个页面只允许出现一个autofocus，如果设置多个则相当于未指定些行为。目前Opera10,Chromet和Safari浏览器支持。如果用户有希望焦点转移的情况下，使用使用autofocus会惹恼用户。

4.list特性和datalist

Webpage: <input type="url" list="url_list" name="link" /><datalist id="url_list"><option label="W3School" value="http://www.w3school.com.cn" /><option label="Google" value="http://www.google.com" /><option label="Microsoft" value="http://www.microsoft.com" /></datalist>

5.required

required 属性规定必须在提交之前填写输入域（不能为空）。它是表单验证最简单的一种方式方法

6.pattern

pattern 属性规定用于验证 input 域的模式（pattern），模式（pattern） 是正则表达式。那些type为email或url的输入控件内置相关正则表达式，如果value不符合其正则表达式，那表单将通不过验证，无法提交。

Country code: <input type="text" name="country_code"pattern="[A-z]{3}" title="Three letter country code" />

7.novalidate

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

8.data-validation-msg

---

三.定制提示样式

1.css样式

需要验证的框样式通过伪类来定制

<style>input[type="text"]:invalid{    background-color: red;}input[type="text"]:valid{    background-color: white;}</style><form method="post">   <label for="foo">需要验证</label><input type="text" id="foo" required >   <label for="bar">不要验证</label><input type="text" id="bar" >   input type="submit"></form>

2.setCustomValidity方法

setCustomValidity方法修改元素的validationMessage属性值，同时允许你添加自定义验证规则。

目前为止不能单独通过设置元素的validationMessage属性值的方法来修改元素的错误验证信息。

例如，当你想要验证两次输入的密码是否一致时可以通过如下所示的代码来添加自定义验证。

if (document.getElementById('password1').value != document.getElementById('password2').value) {    document.getElementById('password1').setCustomValidity('密码必须一致');} else {    document.getElementById('password1').setCustomValidity('');}

3.checkValidity方法

如果一个元素没有使用任何约束验证用属性或所有验证均通过则该元素的checkValidity方法返回true。

如果一个表单内没有使用任何元素使用约束验证用属性或所有验证均通过则该表单的checkValidity方法返回true。

<form id="form-1">    <input id="input-1" type="text" required/></form><form id="form-2">    <input id="input-2" type="text"/></form><script>    alert(document.getElementById('form-1').checkValidity());//false    alert(document.getElementById('input-1').checkValidity());//false    alert(document.getElementById('form-2').checkValidity());//true    alert(document.getElementById('input-2').checkValidity());//true</script>

另外，每次对一个元素进行验证并且验证失败时都会触发该元素的invalid事件。当使用上面这个示例代码时，如果你想在对id属性值为input-1的元素进行验证并且在验证失败时执行某些处理，你可以使用如下所示的代码：

document.getElementById('input-1').addEventListener('invalid', function() {    //...}, false);

在HTML 5中不存在valid事件，但是你可以在change事件中判断一个元素的验证是否通过并根据判断结果执行相应的处理。

document.getElementById('input-1').addEventListener('change', function(event) {    if (event.target.validity.valid) {        //验证通过    } else {        //验证失败    }}, false);