HTML5项目笔记2：离线系统表单设计

在这个离线系统中，表单无疑是构成这个离线系统的视图部分，作为最前端，与客户的操作最密切相关的一块，所以我们有必要先了解一下HTML5的Forms API，它有如下特性：

   表单仍然使用Form元素作为容器，我们可以在其中设置基本的提交性质；

   用户或者开发人员提交页面的时候，表单仍用于向服务器端发送表单中控件的值；

   沿用之前的表单控件及其使用方法，并不断发展和增加新的控件和功能；

   可以用脚本操作表单控件；

HTML5包含了大量的新的API和元素类型，如下：

新的输入型控件：

下面这些元素很多我们会在离线填报表单里面使用到,可以复制拿到Chrome浏览器里面试试看：

日期格式文本框：

date类型：

请在新版Chrome中查看

时间格式文本框：

time类型：

请在新版Chrome中查看

月份格式文本框：

month类型：

请在新版Chrome中查看

周格式文本框：

week类型：

请在新版Chrome中查看

电话号码输入文本框：

tel类型：

请在新版Chrome中查看

数值类型输入文本框：

value指的是初始时的默认值，min为最小值，max为最大值,step为增量和减量均为某个值，

或者某个值的倍数，如我们下面是3，所以它只是3，或者3的倍数：

number类型：

请在新版Chrome中查看

滑动条Range：

范围：value：指的是初始时的默认值，min为最小值，max为最大值,step为增量和减量均为1,这边加了个

函数，用以实时显示range的进度条：

range类型：

请在新版Opera或Chrome或Safari中查看

function changeRange(rangeVal) {

           $("#ShowRange").html(rangeVal+"%");

}

Placeholder：默认输入框描述文字：

Placeholder：（placeholder指的是默认的文字，当用户没有输入值的时候，输入型控件可以通过placeholder进行描述性说明或提示，当焦点聚焦或者输入文本的时候，placeholder会消失）：

Autocomplete : 自动完成

autocomplete="on"，作用：保存输入值以备将来使用，autocomplete="off"，不保存，

autofocus="autofocus"：默认载入聚焦

电子邮件文本框Email：

email类型：

请在新版Chrome中查看

Email文本框要求必须输入的是正确的邮箱地址，否则的会有错误提示

URL文本框：

url类型：

<input type="url" id="url" autocomplete="off" placeholder="请输入正确URL地址" autofocus="autofocus">

请在新版的Chrome中查看效果

URL文本框要求必须输入的是邮箱地址，否则的会有错误提示：

Search搜索框：

带有搜索框样式的input控件，

search类型：

请在新版Chrome中查看

THE CONSTRAINT VALIDATION API（客户端验证API）：

HTML5使用ValidityState对象来反馈表单的验证状态

var checkResult = input.validity;

if(checkResult.valid) console.debug(“验证通过”);

else console.debug(“验证失败”);

验证的通过或者失败取决于HTML5 引进的八种验证约束条件，如果全部通过，则返回True，只要有一个未通过，则返回False。

1、 valueMissing

目的：确保表单控件中的值有填写

用法：在表单控件中将required属性设为true

示例：<input type="text" required="true" />

2、 typeMismatch

目的：确保控件内的值与控件的类型相同（如number，email，url）

用法：指定表单页面的type特征值

示例：<input type="email" />

3、 patternMismatch

目的：根据表单控件上设置的格式规则验证输入是否为有效格式。

用法：在表单控件上设置pattern特性，井赋予适当的匹配规则，title是你要反馈给用户的自定义错误信息。

示例：<input type=”text” title = "请填写数值，可以包含1-4位的小数", placeholder = "请填写数值...", pattern = "^[0-9]+(.[0-9]{1,4})?$"/>

4、 tooLong

目的：避免输入值包含过多字符。

用法：在表单控件上设置maxLength特性。

示例：

5、 rangeUnderflow

6、 rangeOverflow

目的：限制数值型控件的最小值和最大值。

用法：为表单控件设置min/max特性，并赋予允许的最小值/最大值。

示例：<input type="range" name="ageCheck" min="18" max="80" />

7、 stepMismatch

目的：确保输入值符合min、max及step即设置。

用法：为表单控件设置step特性，指定数值的增量。

示例：

8、 customError

目的：开发人员的自定义错误信息，处理应用代码明确设置及计算产生的错误。

用法：调用setCustomValidity(message)将表单控件置于customError状态。

示例：

Script:

   function checkNumuric(input) {

       var checkValue = input.value;

       var reg = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;

       if (!reg.test(checkValue)) input.setCustomValidity('您需要输入正确的网址！');

       else input.setCustomValidity('');

   }

Cancel VALIDATION（取消验证操作）：

1、 form元素的 novalidate 属性，关闭表单验证，可以不同区域做这个设置，来对某些提交的数据验证，某些不验证。

2、 input 元素的 formnovalidate属性，可以对该元素启动或停止验证

3、 sumbmit 元素的 formnovalidate属性，可以对整个表单启动或停止验证，相当与form 元素的 novalidate属性

我们的离线系统中有用到上面的一部分表单元素，如我们的用户信管理表单：

页面效果如下：

本文源码：CRX_Mail_Form

转自：http://www.cnblogs.com/wzh2010/archive/2012/05/20/2509785.html