H5新特性

发表于 2016-07-10 阅读次数：

表单新特性————新的 input type

<input type="?">

1.1 原有的 type:

text、password、radio、checkbox、hidden、file、image、button、submit、reset

1.2 新增的 type:

email、search、url、tel、number、range、color、date、week、month

1. email:  要求输入必需符合邮箱格式  xx@xx
2. url:  要求输入必需符合URL格式  xx:yy
3. tel:  无输入格式验证，在手机中弹出的数字键盘，而不是字母键盘
4. number: 要求输入一个整型数字，可以配合max/min/step新属性使用
5. search: Chrome中会显示一个x号
6. range: 范围选择器、滑块，可以配合max/min/step新属性使用
7. color：颜色选择器，Chrome/FF偷懒了，都直接使用操作系统自带的颜色选择器
8. date：日期选择器，FF不支持
9. month：月份选择器，FF不支持
10. week：星期选择器，FF不支持

提示：
(1) HTML5 新添的 input type 存在严重的兼容性问题！
(2) 新特性弹出的提示消息本质是“窗口”，不是 HTML 元素，无法使用 JS、CSS 进行控制！

表单新特性————新的表单元素

2.1 原有的表单输入元素：
input、textarea、select/option
2.2 新增的表单元素

(1)<datalist></datalist>        数据列表，本身是不可见元素，为某个input提供可选输入的列表，使用方法：
    <datalist id="LISTID"><option>选项名</option></datalist>
    <input type="text" list="LISTID">

(2)<progress></progress>    进度条，仅用于进度的提示，不能被用户操作，也不会被提交。
    <progress value="0.5"></progress>

(3)<meter></meter>        刻度尺，仅用于水平/数量的提示，不能被用户操作，也不会被提交。需要指定如下属性：
    <meter min="最小值" max="最大值" low="下限值" high="上限值" optimum="最优值"  value="当前实际值"></meter>
    如果最优值小于下限值，刻度尺颜色分配：
    min (绿色) low (黄色) high (红色) max
    如果最优值大于下限值且小于上限值，刻度尺颜色分配：
    min (黄色) low (绿色) high (黄色) max
    如果最优值大于上限值，刻度尺颜色分配：
    min (红色) low (黄色) high (绿色) max

(4)<output></output>    语义标签，表示一个计算的输出值，仅用于计算结果的提示，不能被用户操作，也不会被提交。

提示：上述四个新元素存在兼容性问题。

表单新特性————input 的新属性

3.1 原有的 input 属性

<input id="" class="" style="" title="" name="" value="" type="" readonly  checked  selected  diabled >

3.2 新增的 input 属性

<input type="number" max="最大值" min="最小值" step="步长">
<input type="text" list="datalist元素的ID"  autocomplete="on/off">
<meter min="最小值" max="最大值" low="下限值" high="上限值" optimum="最优值"  value="当前实际值"></meter>

(1)placeholder：占位符，用于在input中显示提示性文字，注意：不是value
(2)autocomplete：可赋值为on或off，是否记录之前提交的内容，以实现下次输入时的自动提示
(3)autofocus：自动获得输入焦点
(4)multiple：用于email/url/tel等，允许使用逗号指定多个输入
(5)form：为input指定form属性，可以将input从form内部提到外部，且不影响输入域的提交
  与表单输入验证有关的属性：
(6)required：必填属性，若用户未填写内容，则无法提交
(7)minlength：限制最少的字符个数，非标准，FF不支持
(8)maxlength：限制最大的字符个数
(9)max：一般用于number、range、<meter>、<progress>，表示允许的数字最大值
(10)min：一般用于number、range、<meter>、<progress>，表示允许的数字最小值
(11)step：一般用于number、range，表示步长
(12)pattern：使用正则表达式进行验证
<input type="text" name="cellphone" placeholder="请输入手机号" pattern="^1[358]\d{9}$" required>

如何修改表单的提示消息

HTML5 表单可能在如下情形下弹出提示消息：
(1)特定的 input type 不被满足，如 email、url
(2)特定的验证属性不被满足，如 required、pattern、step、minlength
不同的浏览器会弹出不同的提示消息。如何自定义弹出的提示消息：
HTML5 为所有的表单输入域都添加了一个 validity 对象属性，该对象中包含如下的属性：

1.badInput:false 无效的输入，如
2.customError:false 是否存在自定义错误
3.patternMismatch:false 正则表达式不匹配，违反 pattern 验证
4.rangeOverflow:false 数字范围过大，违反了 max 验证
5.rangeUnderflow:false 数字范围过小，违反了 min 验证
6.stepMismatch:false 步长不匹配，违反 step 验证
7.tooLong:false 字符个数太长，违反 maxlength 验证
8.tooShort:false 字符个数太短，违反 minlength 验证
9.typeMismatch:false 类型不匹配，如 email/url 格式错误
10.valid:true 当前输入值是否有效
11.valueMissing:false 缺少值，违反 required 验证

上述属性会随着用户的输入即时的发生改变，只要有一项验证失败，对应的 boolean 值就会变成 true，导致 valid 属性变为 false；只有当所有其他属性都变为 false，valid 属性才会变为 true，该输入域是有效的，可以被提交了。
通过检查上述属性是否为 true，可以通过“设置自定义的有效性消息 setCustomValidity”设置自定义的错误消息——validity.customError 就会变为 true，自定义错误消息的优先级高于浏览器默认的消息优先级。
if( input.validity.xxx === true ){
input.setCustomValidity(“自定义消息”);
}else {
input.setCustomValidity(“”);
}