对表单进行验证

最新推荐文章于 2024-03-12 22:07:49 发布
最新推荐文章于 2024-03-12 22:07:49 发布
阅读量2.4k 收藏 4
点赞数 2
分类专栏： Web practice of Educoder
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47174730/article/details/110671020
版权

第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>
糯米小辣条
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Educoder Web练习题---对表单进行验证
一只小鹿的博客
12-09 520
对表单进行验证 文章目录对表单进行验证第1关：表单验证相关的概念相关知识表单验证的概念表单验证的类型required非空验证maxlength字符长度验证输入类型的验证pattern验证通关知识第2关：非空校验相关知识非空校验示例编程要求通关代码第3关：邮箱校验相关知识邮箱校验示例编程要求通关代码第4关：pattern验证相关知识邮箱校验示例编程要求通关代码注意事项 第1关：表单验证相关的概念 相关知识 表单验证的概念 表单验证是指在用户提交表单之前，验证用户输入的数据是否合法。 HTML5提供了一套简单的
用javascript对表单进行验证
05-18
JavaScript 表单验证是指使用 JavaScript 语言对 HTML 表单进行验证，以确保用户输入的数据符合要求。该技术广泛应用于 Web 开发中，用于确保用户输入的数据正确，避免错误数据的输入。 1. 手机号码验证 在 ...
@Valid 对表单进行验证
LuisChen的博客
07-04 3163
在学到springBoot的课程中遇到了使用@Valid进行表单验证controller//@Valid Girl girl ：需要进行验证的类 //BindingResult 验证之后返回的对象 @PostMapping(value = "/girls") public Object girlAdd(@Valid Girl girl, BindingResult bindingResu
如何使用WTForms对表单进行验证？
阿汤哥
07-02 3156
WTForms的作用主要有两点：1、验证表单2、渲染模板当然，还有其它功能：比如上传文件、CSRF保护。本章就为大家讲讲如何使用WTForms对表单进行验证？在使用WTForms插件之前，请确保你电脑已安装了WTForms!安装Flask-Wtf默认会安装WTForms，安装代码如下:pip install flask-wtf在templates新建一个resigt.html文件，代码如下：&lt...
educoder实训平台-----对表单进行验证
m0_59076472的博客
12-04 676
educoder实训平台-----对表单进行验证 第1关：表单验证相关的概念 ACDBC 第2关：非空校验 <html> <head> <meta charset="utf-8"/> <title>设置非空校验</title> </head> <body> <form> 密码： <!-- ********* Begin ******* -->
在＜script setup lang=“ts“＞中使用rules对表单进行验证邮箱和电话
最新发布
qq_52145585的博客
03-12 149
【代码】在＜script setup lang=“ts“＞中使用rules对表单进行验证邮箱和电话。
EduCoder-Web程序设计基础-html5— 对表单进行验证-第2关：非空校验
weixin_51402180的博客
12-04 1407
目录任务描述相关知识编程要求测试说明代码示例 任务描述 本关任务：创建一个单行文本框，并要求该文本框的值不能为空。 相关知识 为了完成本关任务，你需要掌握：1.文本框的设置，2.required属性，3.maxLength属性。 非空校验示例 在表单text类型的input标签中添加required属性，可以设置文本框的值不能为空；在该标签中通过title属性可以设置相关的提示信息。 用户名： 用户名： 15343480696 编程要求 根据提示，在右侧编辑器补充代码，在右侧编辑器中
web 头歌 对表单进行验证
m0_74243656的博客
12-17 518
四、pattern验证。一、表单验证相关概念。
EduCoder_web实训作业--对表单进行验证
weixin_45803282的博客
12-02 1136
第一关 A C D B C 第二关 <!-- ********* Begin ******* --> <input type="password" maxlength="6" required="required" title="请输入不超过6位的密码！"></input> <!-- ********* End ********* --> 第三关 <!-- ********* Begin ******* -->
EduCoder-Web程序设计基础-html5— 对表单进行验证-第4关：pattern验证
weixin_51402180的博客
12-05 803
目录任务描述相关知识编程要求测试说明代码示例 任务描述 本关任务：创建一个文本输入框，并要求对用户输入数字格式进行验证。 相关知识 为了完成本关任务，你需要掌握：1.文本输入框的设置，2.pattern属性，3.正则表达式。 邮箱校验示例 在表单text类型的input标签中添加pattern属性，可以根据匹配要求设置规格字符串。匹配输入6位数字的示例如下。 邮政编码： 邮政编码： 编程要求 根据提示，在右侧编辑器补充代码，在右侧编辑器中的Begin - End区域内补充代码，具体要
电信设备-对表单进行排查空值处理的方法及装置.zip
09-18
"对表单进行排查空值处理的方法及装置"是一个专门针对这一需求的技术方案，其主要目的是确保表单数据的无误和有效利用。以下是对该主题的详细阐述： 一、表单空值问题 在电信系统中，表单数据是收集、存储和分析...
基于三层框架的JavaWeb项目实现登录验证，并对表数据进行增，删，改，查
01-02
本教程是一个0基础创建一个基于三层架构的JavaWeb项目，从创建项目到实现对数据库表数据进行增删改查操作。本教程侧重于培养编程习惯，详细讲解了三层架构的编写顺序，讲解了如何快速编写一整个，从头至尾的详细...
浅析Bootstrap验证控件的使用
09-02
这里使用了jQuery库，并在文档加载完成后（`$(document).ready()`）对表单进行初始化，调用了`bootstrapValidator`方法。`bootstrapValidator`是Bootstrap验证插件的核心函数，它接受一个配置对象作为参数，用于定义...
CSS从入门到精通——文本与字体样式
热门推荐
wangyongqi的博客
12-25 1万+
第1关：字体颜色、类型与大小 本关任务 本关任务是使用CSS字体属性设置页面字体。任务完成之后，页面效果如下： 相关知识 一般而言，用于文本的CSS属性可以分为如下两类： 字体样式：用于字体的属性，包含字体类型、大小、粗细等； 文本布局风格：用于设置文本的间距以及其他布局功能的属性，包含设置字与字之间的空间，文本如何对齐等等。 在本关卡中，我们首先学习第一种字体样式属性。 字体颜色 color 字体最直观的属性之一即前景内容的颜色，我们通过 color 属性指定字体的颜色。例如： <!DOCTYPE
CSS从入门到精通——背景样式
wangyongqi的博客
12-25 8213
第1关：背景颜色 任务描述 本关任务：在本关中，我们将学习如何使用CSS去更改HTML元素的背景属性。 本关任务完成之后的效果图如下： 背景色 我们可以使用background-color为元素设置背景色，通常属性值为颜色名称或颜色编码。 因为HTML文档中body元素包含了HTML文档的所有内容，所以如果要改变整个页面的背景颜色，只需要设置body元素的background-color属性。 例如： <!DOCTYPE html> <html> <head> &l
JS函数
wangyongqi的博客
12-27 7101
第1关：用函数语句定义函数 任务描述 本关任务：用函数语句定义一个函数。 相关知识 函数的定义是指用一段代码实现函数的功能，通常的定义方式以关键字function开头。 用函数语句定义 先给一个例子，该函数的功能是返回数组元素的和； function sumArray(arr) { var sum = 0; for(var i = 0,aLength = arr.length;i < aLength;i++) { sum += arr[i]; } return sum; } 关键字function后面
JS条件语句
wangyongqi的博客
01-07 6279
第1关：if-else类型 任务描述 本关任务：根据成绩判断考试结果。 相关知识 在编程中，我们常常根据变量是否满足某个条件来执行不同的语句。 JavaScript中利用以if关键字开头的条件语句达到以上目的，根据if后面括号内表达式的计算结果来进行分支控制。 if语句 一段完整的JavaScript语句相当于一条主干路，从第一句开始执行直到最后一句。而if语句是一条连接在干路上的支路，满足某个条件时程序进入支路中执行，执行完后回到干路。如下所示： 条件成立指if后面的括号内的表达式的计算结果为true。
JS循环语句
wangyongqi的博客
12-27 4326
第1关：while类型 任务描述 质数的定义如下：大于1的自然数，且除了1和本身外没有别的因数。如2、3、5、7。 本关任务：利用循环结构求质数的和。 相关知识 在选择结构中，条件会被测试一次，成立则执行if内语句，结束后回到主线执行下一条语句。循环结构在执行结束后会再次判断条件是否成立，这样一直重复下去直到条件不成立。 本关将介绍while型循环结构。 while类型 while类型的循环结构如下： while(条件表达式) { //条件成立执行里面的语句 } 和条件语句一样，循环语句先判断条件表达式是否
验证对表附加主键约束或唯一约束
06-01
可以通过以下步骤验证对表附加主键约束或唯一约束是否会同时创建索引： 1. 在数据库中创建一个新表，例如： ``` CREATE TABLE MyTable ( ID INT, Name VARCHAR(50) ); ``` 2. 使用 ALTER TABLE 语句添加主键约束或唯一约束，例如： ``` ALTER TABLE MyTable ADD CONSTRAINT PK_MyTable PRIMARY KEY CLUSTERED (ID); ``` 或者 ``` ALTER TABLE MyTable ADD CONSTRAINT UQ_MyTable UNIQUE NONCLUSTERED (Name); ``` 3. 使用系统视图或存储过程来查看是否已创建相应的索引，例如： ``` SELECT name, type_desc, is_unique, is_primary_key, is_unique_constraint FROM sys.indexes WHERE object_id = OBJECT_ID('MyTable'); ``` 如果添加的是主键约束，则应该会创建一个聚集索引；如果添加的是唯一约束，则应该会创建一个非聚集索引。您可以查看返回的结果集，看是否包含了相应的索引。如果查询不到相应的索引，则表示添加约束时未创建相应的索引。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值