8、表单验证与数据表格展示全解析

表单验证与数据表格展示全解析

表单验证

在表单验证方面，HTML5提供了一定的验证能力，但也存在一些问题。例如，使用如下代码：

<input type="text" pattern="[a-zA-Z]+" 
  oninvalid="setCustomValidity('Please enter only letters.')">

当表单提交不成功时，该字段会触发指定的错误文本。然而，这种解决方案存在不足。一方面，无论错误来源如何，都会显示相同的错误消息；另一方面，这些硬编码的消息未根据用户语言进行本地化，与默认消息混合使用时会导致体验不一致。

为了解决旧浏览器的兼容问题，可以使用 h5Validate polyfill。它能在所有浏览器中支持HTML5风格的验证，模仿原生功能，利用与HTML5相同的标记属性。操作步骤如下：
1. 从github下载代码： https://github.com/dilvie/h5Validate/blob/master/jquery.h5validate.js 。
2. 将脚本包含在文档末尾。
3. 为避免在支持原生验证的浏览器中重复加载脚本，可以采用特征检测和JavaScript加载器，或者使用IE条件注释：

<!--[if l