对表单进行验证

最新推荐文章于 2023-03-18 21:32:53 发布

静待花开︳

最新推荐文章于 2023-03-18 21:32:53 发布

阅读量442

点赞数

分类专栏： educoder Web前端文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_52184490/article/details/121903155

版权

educoder 同时被 2 个专栏收录

51 篇文章 9 订阅

订阅专栏

Web前端

35 篇文章 2 订阅

订阅专栏

第1关：表单验证相关的概念

任务描述

本关任务：完成一组有关表单验证的概念题。

第2关：非空校验

编程要求

根据提示，在右侧编辑器补充代码，在右侧编辑器中的Begin - End区域内补充代码，具体要求是： 1.在form></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"><!-- title的参数为鼠标悬停在当前位置的提示文字-->
   <!-- ********* End ********* -->
       <input type="submit"  value="提交"/> 
    </form>
  </body>
 </html>

第3关：邮箱校验

编程要求

根据提示，在右侧编辑器补充代码，在右侧编辑器中的Begin - End区域内补充代码，具体要求是： 1.在form></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">
     <!-- placeholder 用来在文本框内显示提示信息-->
   <!-- ********* End ********* -->
     <br/> <input type="submit"  value="提交"/> 
    </form>
  </body>
 </html>

第4关：pattern验证

编程要求

根据提示，在右侧编辑器补充代码，在右侧编辑器中的Begin - End区域内补充代码，具体要求是： 1.在form></form>中创建一个1个年龄的输入框。 2.要求用户必须填写年龄框。 3.年龄输入框中只能输入0-99的数字。运行效果如下：

测试说明

平台会对你编写的代码进行测试：补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务.

笑了，还是不会用pattern，实验报告再说吧。

<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="^[0-99]{1}$/"-->
     <input type="text"  required="required" pattern="^[1-9]?[0-9]$"/><br/>
   <!-- ********* End ********* -->
     <br/> <input type="submit"  value="提交"/> 
    </form>
  </body>
 </html>

静待花开︳

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
对表单进行验证

第1关：表单验证相关的概念任务描述本关任务：完成一组有关表单验证的概念题。相关知识为了完成本关任务，你需要掌握：1.表单验证的概念，2.HTML5的表单验证类型及用法。表单验证的概念表单验证是指在用户提交表单之前，验证用户输入的数据是否合法。 HTML5提供了一套简单的验证方式，在表单提交时，会根据情况弹出一些简单的提示，如“请填写此字段”“请匹配要求的模式”等，不同的浏览器所弹出的提示内容会有所不同。表单验证的类型HTML5中主要包括以下几个方面的验证：输入类型的验证、..
复制链接

扫一扫