当前位置: 首页 > news >正文

HTML5表单的自动验证、取消验证、自定义错误信息

1、自动验证

通过在元素中使用属性的方法,该属性可以实现在表单提交时执行自动验证的功能。下面是关于对元素内输入内容进行限制的属性的指定。

属性说明
required输入内容是否不为空
pattern输入的内容是否符合指定格式
min、max输入的数值是否在min~max范围
step判断输入数值是否为step的倍数

1.1 required 属性

required 属性的主要目的是确保表单控件中的值已填写,一旦为某个输入型控件设置了 required 属性,就必须填写此项,否则无法提交表单。

属性用法如下:

<form>电子邮箱:<input type="email" required /></br><input type="submit" value="提交"/>
</form>

执行结果:

1.2 pattern 属性

pattern 属性的主要目的是根据表单控件上设置的格式规则验证输入是否为有效格式。通过在 input 元素中使用 pattern 属性,并将属性值设为某个格式的正则表达式,该属性实现在提交表单时会检查其内容是否符合给定格式。

属性用法如下:

<form>请输入内容:<input type="text" pattern="[0-9][A-Z]{3}" placeholder="一个数字和三个大写字母"/><input type="submit" value="提交"/>
</form>

执行结果:

1.3 min、max 和 step 属性

通过设置 min 和 max 属性,可以将输入控件的数值输入范围限定在最低值和最高值之间。设置其 step 属性能够制定输入值递增或递减的梯度。

属性用法如下:

数值1:<input type="number"  value="25" min="10" max="100" step="5"/></br>
数值2:<input type="range"  value="45" min="0" max="100" step="5"/>

执行结果:

2、checkValidity 显示验证

除了对 input 元素添加属性进行元素内容有效性的自动验证,所有的表单元素和输入元素(包括:select 和 textarea)在其 DOM 节点上都有一个 checkValidity 方法。当想要覆盖浏览器的默认的验证和反馈过程时,可以使用这个方法。checkValidity 方法根据验证检查成功与否,返回 true 或 false,与此同时会告诉浏览器运行其检查。

【实例】使用 checkValidity 方法验证用户输入的电子邮箱格式是否正确。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="author" content="pan_junbiao的博客"><title>checkValidity显示验证</title><script type="text/javascript">function check() {var email = document.getElementById("email");if (email.value == "") {alert("请输入电子邮箱");return false;}else if (!email.checkValidity()) {alert("请输入正确的电子邮箱");return false;}else {alert("您输入的电子邮箱格式正确");return true;}}</script></head><body><form onsubmit="return check()"><label for="email">电子邮箱:</label><input name="email" id="email" type="email" /><input type="submit" value="提交" /></form>
</body></html>

执行结果:

3、取消验证

HTML5 提供了两种方法用于取消表单验证。

第一种方法是利用 form 元素的 novalidate 属性,它可以关闭整个表单验证。使用方法如下:

<form novalidate></form>

第二种方法是利用 input 元素或 submin 元素的 formnovalidate属性,利用 input 元素的 formnovalidate 属性可以让表单验证对单个 input 元素失效。使用方法如下:

<input type="email" formnovalidate />

4、自定义错误信息

HTML5 中许多新的 input 元素都带有对于输入内容的有效性的校验,如果检查不通过,浏览器会针对该元素提供错误信息。但有时候开发者不想使用这些默认的错误提示信息,而想使用自己定义的错误提示信息;或者有时,想给某个文本框增加一种错误提示信息。

【实例】使用 setCustomValidity 方法来自定义错误信息。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="author" content="pan_junbiao的博客"><title>自定义错误信息</title><script>function check() {var pass1 = document.getElementById("pass1");var pass2 = document.getElementById("pass2");var email = document.getElementById("email");if (pass1.value != pass2.value) {pass2.setCustomValidity("密码不一致。");}else {pass2.setCustomValidity("");}if (!email.checkValidity()) {email.setCustomValidity("请输入正确的电子邮箱地址。");}}</script>
</head><body><form id="testform">密码:<input type=password name="pass1" id="pass1" /><br />确认密码:<input type=password name="pass2" id="pass2" /><br />电子邮箱:<input type=email name="email1" id="email" /><br /><div><input type="submit" onClick="return check();" /></div></form>
</body></html>

执行结果:

相关文章:

HTML5表单的自动验证、取消验证、自定义错误信息

1、自动验证 通过在元素中使用属性的方法&#xff0c;该属性可以实现在表单提交时执行自动验证的功能。下面是关于对元素内输入内容进行限制的属性的指定。 属性说明required输入内容是否不为空pattern输入的内容是否符合指定格式min、max输入的数值是否在min~max范围step判断…...

SpringMVC系列九: 数据格式化与验证及国际化

SpringMVC 数据格式化基本介绍基本数据类型和字符串自动转换应用实例-页面演示方式Postman完成测试 特殊数据类型和字符串自动转换应用实例-页面演示方式Postman完成测试 验证及国际化概述应用实例代码实现注意事项和使用细节 注解的结合使用先看一个问题解决问题 数据类型转换…...

判断链表中是否有环(力扣141.环形链表)

这道题要用到快慢指针。 先解释一下什么是快慢指针。 快慢指针有两个指针&#xff0c;走得慢的是慢指针&#xff0c;走得快的是快指针。 在这道题&#xff0c;我们规定慢指针一次走一步&#xff0c;快指针一次走2步。 如果该链表有环&#xff0c;快慢指针最终会在环中相遇&a…...

Kubernetes基于helm部署jenkins

Kubernetes基于helm安装jenkins jenkins支持war包、docker镜像、系统安装包、helm安装等。在Kubernetes上使用Helm安装Jenkins可以简化安装和管理Jenkins的过程。同时借助Kubernetes&#xff0c;jenkins可以实现工作节点的动态调用伸缩&#xff0c;更好的提高资源利用率。通过…...

【Linux】vim详解

1.什么是vi/vim? 简单来说&#xff0c;vi是老式的文本编辑器&#xff0c;不过功能已经很齐全了&#xff0c;但是还是有可以进步的地方。vim则可以说是程序开发者的一项很好用的工具&#xff0c;就连 vim的官方网站&#xff08; http://www.vim.org&#xff09;自己也说vim是一…...

Android11 mtk 第二次设置壁纸,锁屏壁纸不变的问题

1、情景:近日测试人员发现第一次更换壁纸后,主屏幕壁纸和锁屏壁纸均会改变;但第二次更换壁纸后,主屏幕壁纸会改变而锁屏壁纸不会改变。 2、要求:主屏幕壁纸和锁屏壁纸军改变 3、解决 路径:****\frameworks\base\services\core\java\com\android\server\wallpaper\Wallp…...

Java学习路线

目录 友情提醒第一章、Java基础1.1&#xff09;第一部分&#xff1a;Java 入门1.2&#xff09;第二部分&#xff1a;Java数组1.3&#xff09;第三部分&#xff1a;Java面向对象1.4&#xff09;第四部分&#xff1a;常用工具类1.5&#xff09;第五部分&#xff1a;集合体系1.6&a…...

java 实现人脸检测

1. 安装必要的库 确保你已经安装了JPEG库、BLAS和LAPACK库。在Ubuntu或Debian系统上&#xff0c;可以使用以下命令安装&#xff1a; sudo apt-get update sudo apt-get install libjpeg-dev libblas-dev liblapack-dev 在CentOS或Fedora系统上&#xff0c;可以使用以下命令安…...

VSCode神仙插件——Codeium (AI编程助手)

1、安装&登录插件 安装过程中会让你登录Codeium账户&#xff0c;可以通过Google账户登录&#xff0c;或者可以注册一个Codeium账户&#xff08;如果没有弹出让你登录账户的界面&#xff0c;可以等安装结束后在右下角找到登录的地方&#xff09; 右下角显示如下图所示&#…...

css文本划线效果(text-decoration相关属性详解)

/* 样式类型*/text-decoration: underline;/* 下划线颜色 */text-decoration-color: #ffcb15;/* 超出基线的字符不会被截断 */text-decoration-skip-ink: none;/*下划线厚度 */text-decoration-thickness: 5px;/* 与其原始位置的偏移距离 */text-underline-offset: 0;1. text-u…...

《Windows API每日一练》8.5 listbox控件

列表框是将一批文本字符串显示在一个具有滚动功能的方框中的控件。通过发送消息到列表框的窗口过程&#xff0c;程序可以添加或删除列表中的字符串。当列表框中的一个项目被选中时&#xff0c;列表框控件便发送 WM_COMMAND消息到其父窗口。然后父窗口确定哪个项目被选中。 本节…...

使用Node.js 框架( Express.js)来创建一个简单的 API 端点

文章目录 使用Node.js 框架&#xff08; Express.js&#xff09;来创建一个简单的 API 端点什么是express安装修改代码 express 自动刷新 使用Node.js 框架&#xff08; Express.js&#xff09;来创建一个简单的 API 端点 什么是express Express 是一个保持最小规模的灵活的 …...

企业服务行业CRM解决方案

企业服务行业CRM解决方案 强大的功能满足企业服务行业对客户管理、业务管理等方面的真实需求&#xff1b; 细分企业服务行业的不同领域&#xff0c;为不同业务场景提供个性化配置&#xff1b; 打通钉钉、企业微信等平台&#xff0c;降低企业使用CRM门槛&#xff0c;提供高性…...

服务器怎么进PE系统?

服务器进PE是指将服务器的操作系统切换到预安装环境&#xff08;Pre-Installation Environment&#xff09;的状态。在PE环境下&#xff0c;可以进行一些系统管理和故障排除的操作。在进入PE&#xff08;Preinstall Environment&#xff09;之前&#xff0c;首先需要确保你的服…...

Linux内核编译与调试menuos-linux-3.18.6-在ubuntu20.04环境

1 具体操作 下载 linux-3.18.6内核 wget https://www.kernel.org/pub/linux/kernel/v3.x/linux-3.18.6.tar.xz解压进入linux-3.18.6文件夹 tar -xvf linux-3.18.6.tar.xz cd linux-3.18.6/编译 #make x86_64_defconfig # 为x86_64生成配置 #make alldefconfig make i3…...

java-mysql 三层架构

在 Java 应用程序中&#xff0c;三层架构&#xff08;Three-Tier Architecture&#xff09;是一种常见的设计模式&#xff0c;用于分离应用程序的表示层、业务逻辑层和数据访问层。这种架构有助于提高代码的可维护性、可扩展性和可重用性。以下是详细解释 Java 应用程序中使用 …...

打工人如何应对AI对工作岗位的风险

面对AI对工作岗位的潜在取代&#xff0c;我们可以从多个层面制定应对策略&#xff0c;以确保劳动力市场的平稳过渡和社会的可持续发展。以下是一些具体的应对策略&#xff1a; 一、加强教育与培训 提升STEM教育&#xff1a;增加科学、技术、工程和数学&#xff08;STEM&#…...

C++:从C语言过渡到C++

在这篇博客中&#xff0c;我将会介绍从C语言过渡到C的一些基础知识。 目录 C起源 C的关键字 输出hello&#xff0c;world ​编辑 命名空间 1.什么是命名空间 2.namespace的作用 3.域作用限定符 4.命名空间的使用 IO流 缺省参数 函数重载 引用 1.引用的定义 2.引…...

在安卓中使用FFmpeg录制摄像头的视频并保存到本地MP4文件

在移动应用开发中&#xff0c;有时需要利用设备的摄像头录制视频&#xff0c;并且希望在录制过程中能够精确控制视频的质量、格式和时长。FFmpeg作为一个强大的多媒体处理工具&#xff0c;提供了广泛的功能和选项&#xff0c;能够帮助我们实现这样的需求。 添加依赖 在安卓平台…...

Vue从零到实战第一天

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...