1、JavaScirpt表单验证：HTML表单验证可以通过JavaScript来完成
例如：
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
</form>
2、HTML表单自动验证：HTML表单验证也可以通过浏览器来自动完成
例如：
<input type="text" name="fname" required="required">
3、数据验证：数据验证用于确保用户输入的数据是有效的。服务器端数据验证是在数据提交到服务器上后再验证，
客户端数据验证是在数据发送到服务器前，在浏览器上完成验证。
4、HTML约束验证：HTML5新增了HTML表单的验证方式，约束验证。约束验证是表单被提交时，浏览器用来实现验证的一种算法。
HTML约束验证基于：HTML输入属性、CSS伪类选择器、DOM属性和方法。
（1）HTML5表单属性
form新属性：autocomplete【当用户在自动完成域中开始输入时，浏览器会在改与中显示填写的选项，这些选项是用户之前填写过的，可选值为on|off】
novalidate【该属性规定提交表单时是否验证form，可选值true|false】。
input新属性：autocomplete【同form，说明：该属性有可能在form元素中是开启的，而在input元素中是关闭的】。
autofocus【该属性规定在页面加载时，域自动地获得焦点，可选值true|false】
form【该属性规定输入域所属的一个或多个表单，使用场景：位于form表单外的input字段引用了HTML form，该input任然属于该表单的一部分】
formaction【该属性用于描述表单提交的url地址，该属性会覆盖form元素的action属性，且该属性仅用于type='submit'和type='image'的input元素】
formenctype【该属性用于描述表单提交到服务器的数据编码（只对form表单中method="post"表单），该属性覆盖form元素的enctype属性】
formmethod【该属性定义了表单的提交方式，该属性可以与type='submit'和type='image'配合使用，该属性覆盖了form元素的method属性】
formnovalidate【该属性是boolean属性，描述了input元素在表单提交时无需被验证，该属性与type=“submit”，它会覆盖form元素的novalidate属性】
formtarget【该属性指定一个名称或关键字来指明表单提交数据接收后的展示，该属性覆盖form元素的target属性，该属性与type='submit'和type='image'配合使用】
height 与 width【用于image类型的input标签的图像高度和宽度，说明：如果图像设置了高度和宽度，图像所需的空间在加载页时会被保留，如果没有这些属性，浏览器不知道图像的大小，不能预留出适当的空间】
list【该属性规定输入域的datalist，datalist是输入域的选项列表】
小例子：
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
min 、 max和step【这几个属性用于包含数字或日期的input类型约束，仅适用于datepickers、number、range的input标签】
multiple【该属性是Boolean属性，它规定input属性可以选择多个值】
pattern(regexp)【该属性描述了一个正则表达式用于验证input元素的值，用title属性描述模式，该属性适用于text，search，url，tel，email和password的input标签】
placeholder【该属性提供了一种提示，描述输入域所期待的值，该属性适用于text，search，url，tel，email和password的input标签】
required【该属性是Boolean属性，它规定必须在提交之前填写输入域，不能为空】
step【该属性为输入域规定了合法的数字间隔，该属性与max和min属性创建一个区域值】
5、约束验证css伪类选择器
css伪类是用来添加一些选择器的特殊效果
伪类语法 selector:pseudo-class{property:value} 或 selector .class:pseudo-class{property:value}
举例子：
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。
p:first-child 选择器匹配作为任何元素的第一个子元素的 <p> 元素
p > i:first-child 选择相匹配的所有<p>元素的第一个 <i> 元素：
p:first-child i 选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素