Web(四)构建Web表单-对表单进行验证

原创已于 2022-11-30 20:43:03 修改 · 855 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #javascript

于 2022-11-25 14:10:53 首次发布

Web practice of Educoder 专栏收录该内容

36 篇文章

订阅专栏

本文详细介绍了如何在HTML表单中实现密码、邮箱和年龄的非空及格式校验，包括使用`required`属性、`pattern`属性和`email`类型，助你理解前端验证的基本实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第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" maxlength="6" title="请输入不超过6位的密码！">
   <!-- ********* 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">
   <!-- ********* End ********* -->
     <br/> <input type="submit"  value="提交"/> 
    </form>
  </body>
 </html>

第4关_pattern验证

编程要求

根据提示，在右侧编辑器补充代码，在右侧编辑器中的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>