HTML5的表单新特性(3)

虽然目前各种浏览器对HTML5的支持程度参差不齐，但是不可否认HTML5将会成为未来的流行趋势。

一、HTML5表单新增属性

（1）placeholder 这个属性的用处是颇大的，可以向用户显示描述性说明或者提示信息。如果浏览器不支持的话，此属性

会忽略掉，显示浏览器默认的状态。当输入框中有值或者获得焦点的时候，不显示placeholder的值

eg: 您的名字： <input type="text" placeholder="请输入您的真实姓名" name="realname"/>



【注意】不过这个属性比较有意思的就是，如果浏览器同时也支持autofocus的时候，此属性的作用就发挥不出来了，

其实也好理解，如果autofocus有效的时候，表示该输入框有内容，但内容为空。

（2）autocomplete 该属性用来保护铭感用户数据，避免本地浏览器对他们进行不安全的存储。

【值】on 该字段不受保护，值可以被保存和恢复

off 该字段受到保护，值不可以被保存

unspecified 包含form的默认设置，如果没有被包含在表单中或者没有指定值，则行为与设置on时相同

（3）autofocus 该属性顾名思义，就是自动获得焦点，但是每个页面只允许出现一个autofocus属性，如果设置了多个的

话，相当于未指定此行为。该属性有点类似checked的用法，可以直接写，不用设置便有效

eg: <input type="text" name="name" autofocus/>

（4）list和datalist

HTML5里的标签确实都是精华，在做搜索的时候，经常会遇到这样的实现方式，输入的时候有一定的提示信息



<datalist id="urllist">

<option value="http://www.google.hk" label=”谷歌中国">

<option value="http://www.baidu.com" label="百度">

</datalist>

选择搜索引擎 ： <input type="text" id="contacts" list="urllist"/>

效果如下：（FF下，不同的浏览器下效果有所不同）



【注意】：datalist必须有id，引用的input等用list属性的值与datalist的id值相对应

（5）min和max

min和max属性用于input type=“range”的输入框，min设置最小值，max设置最大值

例：取值范围：<input type="range" name="number" min="0" max="100"/>效果如下Opera浏览器下效果



（6）step

该属性对于输入型控件，设置其step特性能够制定输入值递增或递减的粒度。此属性同min和max一样值针对

input type=range的输入框

eg：<input type="range" name="number" min="0" max="100" step="5" value="0"/>

（7）valueAsNumber函数

作用是完成控件值类型在文本与数值间的相互转换。

eg: document.getElementByIdx_x("confidence").valueAsNumber(65);

（8）required属性

一旦某输入型空间设置了required属性，则此项为必填项

eg:<input type="text" name="name" required/>

二、HTML5表单验证

HTML5的表单验证实际上只是一种优化，其实际目的倒不是为了保证提交给服务器表单的数据的正确性和有效性，而是

为了让web应用更快的抛出异常。

说到HTML5的表单验证，就不得不提到ValidityState对象，该对象包含了八种验证状态的引用，以及最终验证结果

获取name为myForm的表单中name为myInput的表单元素的ValidityState对象：

var vState=document.myForm.myInput.validity;

（1）valid 最终验证结果，如果下面的八种约束条件都通过了，validate特性就是true，否则就是false；

（2）八种约束条件

a. valueMissing

该属性针对设置了required的表单元素

eg：var flag=input.valueMissing;

b. typeMismatch

该属性针对设置了type=email | number | url的表单元素 eg：var flag=input.typeMismatch;

c. patternMismatch

该属性针对设置了pattern的表单元素 eg： var flag=input.patternMismatch;

d. tooLong

该属性针对设置了maxLength的表单元素 eg： var flag=input.tooLong;

e. rangeUnderflow

该属性针对type=range且设置了min的range表单元素 eg： var flag=input.rangeUnderflow;

f. rangeOverflow

该属性针对type=range且设置了max的range表单元素 eg： var flag=input.rangeOverflow;

g. stepMismatch

该属性针对type=range且设置了min，max以及step的range表单元素 eg： var flag=input.stepMismatch;

h. customError

这个属性比较晦涩，当浏览器内置的验证机制不适用的时候，需要显示自定义验证错误信息，当输入值不符合语义

规则时，应用程序代码应设置这些自定义验证消息。

此属性通过setCustomValidity(message)来使表单控件置于customEorror状态

eg: input.setCustomValidity("values not match!");

setCustomValidity的值需要通过validationMessage来获取 eg:input.validationMessage

不过从它的作用来看似乎也不比直接使用javascript来自定义错误简单了多少啊！

【其他用于验证的特性及函数】

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

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

eg: <input type="text" required name="realname" onblur="alert(this.willValidate);">

（2） checkValidity 此函数用户对表单控件进行验证，如果为true则验证通过，false验证不通过，一般情况下，表

单验证发生在用户或者脚本提交表单的时候，但是checkValidity却可以在任何时间对表单进行验证。不同的地

方在于，使用checkValidity进行表单验证不会出现提示信息，需要自己根据返回值进行定义。

eg: <input type="text" required name="realname" onblur="validate(this)"/>

<script>

function validate(input){

var flag=input.checkValidity();

if(!flag){alert("不能为空！");}

}

</script>

（3）validationMessage 允许通过编程方式查询本地化错误信息，浏览器基于当前验证状态显示的也是这些信息。

此属性可以和setCustomValidity(mesg)配合使用

（4）一些特殊情况下，例如我们在填表单的时候遇到一点急事，想先保存填的内容，就需要提交到服务器进行保

存，但是又有表单验证的限制，我们不能之间提交，这个时候就需要我们关闭表单的验证，采用

formnovalidate来实现。

如下：

<input type="submit" formnovalidate name="save" value="submit"/>

formnovalidate通常是设置在表单的提交按钮上