测试你的技能：表单验证

此技能测试的目的是评估您是否理解了我们的 客户端表单验证 文章。

注意：您可以在此页面上的交互式编辑器或在线编辑器（例如 CodePen、JSFiddle 或 Glitch）中尝试解决方案。

如果您遇到问题，您可以通过我们的 沟通渠道 联系我们。

表单验证 1

在此任务中，我们向您提供了一个简单的支持查询表单，我们希望您为它添加一些验证功能。

  1. 在表单可以提交之前，使所有输入字段都必须填写。
  2. 更改“电子邮件地址”和“电话号码”字段的类型，使浏览器应用更具体的验证，适合所请求的数据。
  3. 为“用户名”字段设置 5 到 20 个字符的必填长度，为“电话号码”字段设置 15 个字符的最大长度，为“评论”字段设置 200 个字符的最大长度。

尝试提交您的表单 - 在满足上述约束条件之前，它应该拒绝提交，并给出合适的错误消息。为了帮助您，您可能需要考虑添加一些简单的 CSS 来显示表单字段何时有效或无效。

下载此任务的起点，在您自己的编辑器或在线编辑器中进行操作。

表单验证 2

现在我们希望您使用与上一个任务中看到的相同的表单（如果您愿意，可以使用之前的答案），并使用正则表达式为前三个字段添加一些更具体的模式验证。

  1. 我们应用程序中的所有用户名都由一个字母、一个点和三个或更多个字母或数字组成。所有字母都应该是小写。
  2. 我们用户的所有电子邮件地址都包含一个或多个字母（小写或大写）或数字，后跟“@bigcorp.eu”。
  3. 如果存在，请从电话号码字段中删除长度验证，并将其设置为接受 10 位数字 - 10 位数字连续排列，或 3 位数字、3 位数字、4 位数字的模式，用空格、破折号或点隔开。

注意：如果您是正则表达式的初学者，正则表达式确实很有挑战性，但不要绝望 - 尝试一下，看看您能做到哪一步；寻求帮助并不丢脸。您可以在我们的 正则表达式参考 中找到回答这些问题所需的一切，也可以在 Stack Overflow 上搜索。

同样，为了帮助您，您可能需要考虑添加一些简单的 CSS 来显示表单字段何时有效或无效。

下载此任务的起点，在您自己的编辑器或在线编辑器中进行操作。

表单验证 3

在这一组的最后一个任务中，我们为您提供了一个与配套文章中看到的类似示例 - 一个简单的电子邮件地址输入。我们希望您使用约束验证 API 以及一些表单验证属性来编写一些自定义错误消息。

  1. 使输入字段必须填写，并设置 10 个字符的最小长度。
  2. 添加一个事件监听器，检查输入的值是否为电子邮件地址，以及是否足够长。如果它看起来不像电子邮件地址或太短，请为用户提供合适的自定义错误消息。

下载此任务的起点，在您自己的编辑器或在线编辑器中进行操作。