本文已参与「新人创作礼」活动，一起开启掘金创作之路。
第1关：表单验证相关的概念
相关知识
表单验证的概念
表单验证是指在用户提交表单之前，验证用户输入的数据是否合法。 HTML5提供了一套简单的验证方式，在表单提交时，会根据情况弹出一些简单的提示，如“请填写此字段”“请匹配要求的模式”等，不同的浏览器所弹出的提示内容会有所不同。
表单验证的类型
HTML5中主要包括以下几个方面的验证：输入类型的验证、日期和时间范围的验证、必填字段的验证、步长的验证、字符长度的验证、数值范围的验证、正则表达式的验证等。
required非空验证
在某个表单控件中添加required属性，则表明该表单的值不能为空。required 属性适用于以下类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。 示例如下： <input type="text" placeholder="请输入用户名" required>
maxlength字符长度验证
在某个表单控件中添加maxlength属性，可限定输入的字符数。maxlength 属性与<input type="text"> 或 <input type="password"> 配合使用。 示例如下： <input type="password" maxLength="10"/>
输入类型的验证
HTML5新增了一些具有校验功能的input控件的类型，分别是：
- email:要求输入内容必须符合电子邮件地址的格式。
- url:要求输入内容必须符合URL的格式
- number:要求输入内容必须为数字，并可通过min、max、step等属性来设置最小值、最大值和间隔
示例如下： <input type="email"/> <input type="url"/> <input type="number" min="0" max="100" step="10" value="20"/>
pattern验证
HTML5新增的pattern属性具有对表单中输入字段模式进行验证的功能。适合于text、serch、url、telephone、email、password等<input>类型。 示例如下： <input type="text" pattern="^[0-9]{12}$"/> 可以看到，pattern属性取值为符合某种规则的正则表达式，它以“^”开始，以“$”结束，中间是“规则字符串”，规则字符串通常由普通字符和元字符组成。
- 普通字符：由大小写的字母和数字组成
- 元字符：是具有特殊含义的字符 常见的元字符及其功能说明如下图所示：
通关知识
1、下列选项中，对表单控件的值进行非空验证的属性为（A）
A、required
B、checked
C、selected
D、null
2、在input控件的类型中，下列选项中对输入有校验功能的是（C）
A、text
B、password
C、email
D、submit
3、关于输入字符数的限定，下列代码中，设置正确的是（D）。
A、<input type="number" size="6"/>
B、<input type="text" size="6"/>
C、<input type="number" maxlength="6"/>
D、<input type="text" maxlength="6"/>
4、匹配1个或多个在它前面的元字符是（B）。
A、*
B、+
C、？
D、.
5、若限定用户输入6位数字，下列的代码正确的是（C）。
A、<input type="text" pattern="^([0-9]{6,})$">
B、<input type="text" pattern="^([0-9](6))$">
C、<input type="text" pattern="^([0-9]{6})$">
D、<input type="text" pattern="^([0-9](6,))$">
第2关：非空校验
相关知识
非空校验示例
在表单text类型的input标签中添加required属性，可以设置文本框的值不能为空；在该标签中通过title属性可以设置相关的提示信息。
<form>
用户名：<input type="text" required="required" title="用户名一定要写哦！" maxlength="16"> <input type="submit" value="提交" />
</form>
显示效果为：
编程要求
根据提示，在右侧编辑器补充代码，在右侧编辑器中的Begin - End区域内补充代码，具体要求是：
- 在
form></form>中创建一个1个不超过6位的密码输入框。 - 要求用户必须填写密码。
- 用户鼠标悬停在密码框上时，显示提示文字“请输入不超过6位的密码！”。
运行效果如下：
通关代码
<html>
<head>
<meta charset="utf-8"/>
<title>设置非空校验</title>
</head>
<body>
<form>
密码：
<!-- ********* Begin ******* -->
<input type="password" maxlength="6" required="required" title="请输入不超过6位的密码！" />
<!-- ********* End ********* -->
<input type="submit" value="提交"/>
</form>
</body>
</html>
第3关：邮箱校验
相关知识
邮箱校验示例
在表单email类型的input标签中添加required属性，可以设置电子邮箱输入框的值不能为空；在该标签中通过placeholder属性可以设置相关的提示信息。
<form>
邮箱：<input type="email" required="required" placeholder="示例：12345@qq.com"/>
<input type="submit" value="提交" />
</form>
显示效果为：
编程要求
根据提示，在右侧编辑器补充代码，在右侧编辑器中的Begin - End区域内补充代码，具体要求是：
- 在
form></form>中创建一个1个电子邮箱的输入框。 - 要求用户必须填写电子邮箱。
- 电子邮箱输入框中显示输入格式的提示信息，提示文字“输入格式：xxx@xxx”。
运行效果如下：
通关代码
<html>
<head>
<meta charset="utf-8"/>
<title>设置邮箱校验</title>
</head>
<body>
<form>
密码：
<input type="password" required="required" title="请输入6位密码！" maxLength="6"/><br/>
邮箱：
<!-- ********* Begin ******* -->
<input type="email" required="required" placeholder="输入格式：xxx@xxx" />
<!-- ********* End ********* -->
<br/> <input type="submit" value="提交"/>
</form>
</body>
</html>
第4关：pattern验证
相关知识
邮箱校验示例
在表单text类型的input标签中添加pattern属性，可以根据匹配要求设置规格字符串。匹配输入6位数字的示例如下。
<form>
邮政编码：<input type="text" required="required" pattern="^[0-9]{6}$"/>
<input type="submit" value="提交" />
</form>
显示效果为：
编程要求
根据提示，在右侧编辑器补充代码，在右侧编辑器中的Begin - End区域内补充代码，具体要求是：
- 在
form></form>中创建一个1个年龄的输入框。 - 要求用户必须填写年龄框。
- 年龄输入框中只能输入0-99的数字。
运行效果如下：
通关代码
<html>
<head>
<meta charset="utf-8"/>
<title>设置年龄校验</title>
</head>
<body>
<form>
密码：
<input type="password" required="required" title="请输入6位密码！" maxLength="6"/><br/>
邮箱：
<input type="email" required="required" placeholder="输入格式：xxx@xxx"/><br/>
年龄：
<!-- ********* Begin ******* -->
<input type="text" required="required" pattern="^[1-9]?[0-9]$" />
<!-- ********* End ********* -->
<br/> <input type="submit" value="提交"/>
</form>
</body>
</html>
注意事项
<input>标签可以看做是一个单标签，单标签注意单标签的书写规范，需要在结补上右斜线/
