在这篇文章中，我们将研究HTML表单字段和HTML5提供的验证选项。我们还将研究如何通过使用CSS和JavaScript来增强这些功能。
什么是限制性验证？
每个表单字段都有一个目的。而这一目的往往受约束条件的制约--或者说制约每个表单字段应该和不应该被输入的规则。例如，一个email 字段需要一个有效的电子邮件地址；一个password 字段可能需要某些类型的字符，并且有一个最小的所需字符数；而一个文本字段可能对可以输入的字符数有限制。
现代浏览器有能力检查这些约束是否被用户遵守，并能在这些规则被违反时向他们发出警告。这就是所谓的限制性验证。
客户端与服务器端的验证
在该语言诞生的早期，大部分的JavaScript代码都是处理客户端表单验证的。即使在今天，开发人员也会花大量时间编写函数来检查字段的值。在现代的浏览器中还有必要这样做吗？可能没有。在大多数情况下，这真的取决于你想做什么。
但首先，这里有一个很大的警告信息。
客户端验证是一个很好的方法，它可以在应用程序向服务器发送数据之前防止常见的数据输入错误。它不能代替服务器端的验证。
始终对服务器端的数据进行消毒。不是每个请求都来自浏览器。即使是这样，也不能保证浏览器验证了数据。任何知道如何打开浏览器的开发工具的人也可以绕过你精心制作的HTML和JavaScript。
HTML5输入字段
HTML提供。
<textarea>用于多行文本框<select>用于选项的下拉列表<button>用于...按钮
但是，你会使用 <input>是最常用的。
<input type="text" name="username" />
type 属性设置控制类型，有大量的选择。
type | 描述 |
|---|---|
button | 一个没有默认行为的按钮 |
checkbox | 一个复选/勾选框 |
color | 颜色选择器 |
date | 年、月、日的日期选择器 |
datetime-local | 日期和时间选择器 |
email | 一个电子邮件输入字段 |
file | 文件选择器 |
hidden | 一个隐藏字段 |
image | 一个显示由src 属性定义的图像的按钮 |
month | 一个月和年的选择器 |
number | 一个数字输入字段 |
password | 一个密码输入字段，文字不明显 |
radio | 一个单选按钮 |
range | 一个滑块控件 |
reset | 一个将所有表单输入重置为默认值的按钮（但要避免使用这个，因为它很少有用） |
search | 一个搜索输入字段 |
submit | 一个表单提交按钮 |
tel | 一个电话号码输入字段 |
text | 一个文本输入字段 |
time | 一个没有时区的时间选择器 |
url | URL输入字段 |
week | 周数和年份选择器 |
如果你省略了type 属性或不支持某个选项，浏览器会退回到text 。现代浏览器对所有类型都有很好的支持，但旧的浏览器仍然会显示一个文本输入字段。
其他有用的<input> 属性包括。
| 属性 | 描述 |
|---|---|
accept | 文件上传类型 |
alt | 图像类型的替代文本 |
autocomplete | 提示字段的自动完成 |
autofocus | 页面加载时的焦点字段 |
capture | 媒体捕获输入方法 |
checked | 复选框/收音机被选中 |
disabled | 禁用该控件（它将不会被验证或提交其值） |
form | 使用该ID与表单关联 |
formaction | 在提交和图像按钮上用于提交的URL |
inputmode | 数据类型提示 |
list | <datalist> autocomplete选项的ID |
max | 最大值 |
maxlength | 最大字符串长度 |
min | 最小值 |
minlength | 最小字符串长度 |
name | 控件的名称，如提交给服务器的名称 |
pattern | 正则表达式模式，如[A-Z]+ ，代表一个或多个大写的字符 |
placeholder | 当字段值为空时的占位符文本 |
readonly | 该字段不可编辑，但仍将被验证和提交 |
required | 该字段是必需的 |
size | 控件的大小（通常在CSS中重写）。 |
spellcheck | 设置true 或false 拼写检查 |
src | 图像URL |
step | 数字和范围中的增量值 |
type | 字段类型(见上文) |
value | 初始值 |
HTML输出字段
除了输入类型外，HTML5还提供了只读输出。
output: 一个计算或用户操作的文本结果progress：一个带有value和max属性的进度条meter：根据value,min,max,low,high, 和optimum属性设置的值，可以在绿色、黄色和红色之间变化的刻度。
输入标签
字段应该有一个相关的<label> ，你可以把它包在元素的周围。
<label>your name <input type="text" name="name" /><label>
或者使用for 属性将字段的id 与标签联系起来。
<label for="nameid">your name</label>
<input type="text" id="nameid" name="name" />
标签对于可访问性是很重要的。你可能遇到过使用placeholder 来节省屏幕空间的表单。
<input type="text" name="name" value="" placeholder="your name" />
一旦用户输入了什么，占位符文本就会消失，甚至是一个空格。显示一个标签比强迫用户记住这个字段的内容要好得多!
输入行为
字段类型和约束属性会改变浏览器的输入行为。例如，number 输入在移动设备上显示一个数字键盘。该字段可能会显示一个旋转器，键盘上/下光标的按压会使数值递增和递减。
大多数字段类型都很明显，但也有例外。例如，信用卡是数字型的，但增/减旋转器没有用，而且在输入16位数字时，太容易按上或按下。最好是使用标准的text ，但将inputmode 属性设置为numeric ，这样就可以显示一个合适的键盘。设置 autocomplete="cc-number"也会提示任何预先配置的或先前输入的卡号。
使用正确的字段type 和autocorrect 提供了在JavaScript中难以实现的好处。例如，一些移动浏览器可以。
- 通过使用摄像头扫描卡片来导入信用卡的详细信息
- 输入通过短信发送的一次性代码
自动验证
浏览器确保输入值符合type,min,max,step,minlength,maxlength,pattern, 和required 属性所定义的约束。比如说。
<input type="number" min="1" max="100" required />
试图提交一个空值会阻止表单提交，并在Chrome中显示以下信息。
旋转器不允许1到100范围以外的值。如果你输入一个不是数字的字符串，也会出现类似的验证信息。所有这些都不需要使用一行JavaScript。
你可以通过以下方式停止浏览器验证
- 在
<form>元素上添加一个novalidate属性 - 在提交的按钮或图片上添加一个
formnovalidate属性。
创建自定义JavaScript输入
如果你正在编写一个新的基于JavaScript的日期输入组件，请停下脚步，离开你的键盘!
编写自定义输入控件是很困难的。你必须考虑到鼠标、键盘、触摸、语音、可访问性、屏幕尺寸，以及当JavaScript失败时会发生什么。你也在创造一种不同的用户体验。也许你的控件优于桌面、iOS和Android上的标准日期选择器，但不熟悉的用户界面会让一些用户感到困惑。
开发者选择创建基于JavaScript的输入有三个主要原因。
1.1.标准控件难以样式化
CSS的样式设计是有限的，而且经常需要黑客攻击，例如用标签的::before 和::after 伪元素来覆盖一个输入。这种情况正在改善，但要质疑任何将形式置于功能之上的设计。
2.现代的<input> 类型在旧的浏览器中不被支持
实质上，你是在为Internet Explorer编码。IE用户不会得到一个日期选择器，但仍然可以以YYYY-MM-DD 格式输入日期。如果你的客户坚持，那么只在IE中加载一个polyfill。没有必要给现代浏览器带来负担。
3.你需要一个以前从未实现过的新的输入类型
这些情况很少，但总是从适当的HTML5字段开始。它们速度快，甚至在脚本加载之前就能工作。你可以根据需要逐步加强字段。例如，洒上JavaScript可以确保日历事件的结束日期发生在开始日期之后。
总而言之：避免重新发明HTML控件!
继续阅读SitePoint上的《HTML表单和限制性验证完整指南》。
