H5form

HTML5 form polyfill

This project is maintained by gucong3000

h5form v0.2.2

HTML5 form Field polyfill

为了解放开发者，HTML5引入了约束验证的概念，一种本地实现的网页表单验证。尽管所有主流浏览器的最新版本都支持了这个特性，但一些浏览器尚未实现。这个项目的主要功能就是让所有浏览器均支持HTML5表单约束验证功能，同时提供placeholder属性和oninput事件等相关功能。

使用方法

<script src="build/h5form.js"></script>

加入js后，为Firefox和Chrome等现代浏览器而写的表单验证，IE下也能工作了

h5form.js会自动管理依赖的js，IE9+会自动加载h5form.el.js，IE6-8下自动加载h5form.htc，IE6+、Safari下将会加载placeholder.js

特性

支持的浏览器

支持的HTML5属性

属性 调用形式 说明
noValidate form.noValidate 不验证此表单
formNoValidate button.formNoValidate 此按钮所属表单不验证
validationMessage field.validationMessage 错误消息
willValidate field.willValidate 此元素可进行验证
placeholder field.placeholder 文本框展位字符
required field.required 此项为必填项
pattern field.pattern 正则验证规则
step field.step 数字增量
max field.max 数字上限
min field.min 数字下限
validity field.validity 约束验证的详细信息
validity.customError 自定义错误
validity.patternMismatch 正则不匹配
validity.rangeOverflow 值max越界
validity.rangeUnderflow 值min越界
validity.stepMismatch 值不符setp
validity.tooLong 文本超长
validity.typeMismatch 值不符type约束
validity.valid 验证无误
validity.valueMissing 值为空

支持的HTML5方法

支持的HTML5表单事件 (IE6-8下需加载jQuery，否则不支持)

特性详解

参考资料

表单验证业务逻辑流程图

HTML5约束验证API详解

HTML5手册中placeholder属性

css定义placeholder样式语法

::-webkit-input-placeholder {
    color: green;
}
:-ms-input-placeholder {
    color: green;
}
::-moz-placeholder {
    color: green;
    opacity: 1;
}
placeholder {
    color: green;
}

css定义文本框焦点态时placeholder样式语法

这里以文本框焦点时，不显示placeholder为例

:focus::-webkit-input-placeholder {
    color: transparent;
}
:focus:-ms-input-placeholder {
    color: transparent;
}
:focus::-moz-placeholder {
    color: transparent;
}
:focus+placeholder {
    color: transparent;
}

协同开发