对表单进行验证

第1关:表单验证相关的概念
任务描述
本关任务:完成一组有关表单验证的概念题。
相关知识
为了完成本关任务,你需要掌握:1.表单验证的概念,2.HTML5的表单验证类型及用法。
表单验证的概念
表单验证是指在用户提交表单之前,验证用户输入的数据是否合法。
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="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 type="text" pattern="^[0-9]{12}$"/>

可以看到,pattern属性取值为符合某种规则的正则表达式,它以“^”开始,以“$”结束,中间是“规则字符串”,规则字符串通常由普通字符和元字符组成。
普通字符:由大小写的字母和数字组成
元字符:是具有特殊含义的字符
常见的元字符及其功能说明如下图所示:
在这里插入图片描述
开始你的任务吧,祝你成功!
参考答案:
在这里插入图片描述
在这里插入图片描述
第2关:非空校验
任务描述
本关任务:创建一个单行文本框,并要求该文本框的值不能为空。
相关知识
为了完成本关任务,你需要掌握:1.文本框的设置,2.required属性,3.maxLength属性。
非空校验示例
在表单text类型的input标签中添加required属性,可以设置文本框的值不能为空;在该标签中通过title属性可以设置相关的提示信息。

<form>
     用户名:<input type="text"  required="required" title="用户名一定要写哦!" maxlength="16">
    <input type="submit"  value="提交"
  </form>

显示效果为:
在这里插入图片描述
编程要求
根据提示,在右侧编辑器补充代码,在右侧编辑器中的Begin - End区域内补充代码,具体要求是:
1.在form>中创建一个1个不超过6位的密码输入框。
2.要求用户必须填写密码。
3.用户鼠标悬停在密码框上时,显示提示文字“请输入不超过6位的密码!”。
测试说明
平台会对你编写的代码进行测试:
补充代码后,请点击测评,平台会对你编写的代码进行测试,如果正确则完成闯关任务。
越努力越幸运,祝你成功!
参考代码:

<html>
  <head>
   <meta charset="utf-8"/>
   <title>设置非空校验</title>
  </head>
  <body>
   <form>
      密码:
   <!-- ********* Begin ******* -->
    <input type="password"  required="required" title="请输入不超过6位的密码!" maxlength="6">
   <!-- ********* End ********* -->
       <input type="submit"  value="提交"/> 
    </form>
  </body>
 </html>

第3关:邮箱校验
任务描述
本关任务:创建一个电子邮箱的输入框,并要求对用户输入邮箱格式进行验证。
相关知识
为了完成本关任务,你需要掌握:1.电子邮箱输入框的设置,2.required属性,3.placeholder属性。
邮箱校验示例
在表单email类型的input标签中添加required属性,可以设置电子邮箱输入框的值不能为空;在该标签中通过placeholder属性可以设置相关的提示信息。

  <form>
     邮箱:<input type="email"  required="required" placeholder="示例:12345@qq.com"/>
    <input type="submit"  value="提交"
  </form>

显示效果为:

在这里插入图片描述
编程要求
根据提示,在右侧编辑器补充代码,在右侧编辑器中的Begin - End区域内补充代码,具体要求是:
1.在form>中创建一个1个电子邮箱的输入框。
2.要求用户必须填写电子邮箱。
3.电子邮箱输入框中显示输入格式的提示信息,提示文字“输入格式: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验证
任务描述
本关任务:创建一个文本输入框,并要求对用户输入数字格式进行验证。
相关知识
为了完成本关任务,你需要掌握:1.文本输入框的设置,2.pattern属性,3.正则表达式。
邮箱校验示例
在表单text类型的input标签中添加pattern属性,可以根据匹配要求设置规格字符串。匹配输入6位数字的示例如下。

  <form>
     邮政编码:<input type="text"  required="required" pattern="^[0-9]{6}$"/>
    <input type="submit"  value="提交"
  </form>

显示效果为:

在这里插入图片描述
编程要求
根据提示,在右侧编辑器补充代码,在右侧编辑器中的Begin - End区域内补充代码,具体要求是:
1.在<form></form>中创建一个1个年龄的输入框。
2.要求用户必须填写年龄框。
3.年龄输入框中只能输入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>
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页