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、自动验证 通过在元素中使用属性的方法，该属性可以实现在表单提交时执行自动验证的功能。下面是关于对元素内输入内容进行限制的属性的指定。 属性说明required输入内容是否不为空pattern输入的内容是否符合指定格式min、max输入的数值是否在min~max范围step判断…...
SpringMVC系列九: 数据格式化与验证及国际化
SpringMVC 数据格式化基本介绍基本数据类型和字符串自动转换应用实例-页面演示方式Postman完成测试 特殊数据类型和字符串自动转换应用实例-页面演示方式Postman完成测试 验证及国际化概述应用实例代码实现注意事项和使用细节 注解的结合使用先看一个问题解决问题 数据类型转换…...
判断链表中是否有环（力扣141.环形链表）
这道题要用到快慢指针。 先解释一下什么是快慢指针。 快慢指针有两个指针，走得慢的是慢指针，走得快的是快指针。 在这道题，我们规定慢指针一次走一步，快指针一次走2步。 如果该链表有环，快慢指针最终会在环中相遇&a…...
Kubernetes基于helm部署jenkins
Kubernetes基于helm安装jenkins jenkins支持war包、docker镜像、系统安装包、helm安装等。在Kubernetes上使用Helm安装Jenkins可以简化安装和管理Jenkins的过程。同时借助Kubernetes，jenkins可以实现工作节点的动态调用伸缩，更好的提高资源利用率。通过…...
【Linux】vim详解
1.什么是vi/vim? 简单来说，vi是老式的文本编辑器，不过功能已经很齐全了，但是还是有可以进步的地方。vim则可以说是程序开发者的一项很好用的工具，就连 vim的官方网站（ http://www.vim.org）自己也说vim是一…...
Android11 mtk 第二次设置壁纸，锁屏壁纸不变的问题
1、情景：近日测试人员发现第一次更换壁纸后，主屏幕壁纸和锁屏壁纸均会改变；但第二次更换壁纸后，主屏幕壁纸会改变而锁屏壁纸不会改变。 2、要求：主屏幕壁纸和锁屏壁纸军改变 3、解决 路径：****\frameworks\base\services\core\java\com\android\server\wallpaper\Wallp…...
Java学习路线
目录 友情提醒第一章、Java基础1.1）第一部分：Java 入门1.2）第二部分：Java数组1.3）第三部分：Java面向对象1.4）第四部分：常用工具类1.5）第五部分：集合体系1.6&a…...
java 实现人脸检测
1. 安装必要的库 确保你已经安装了JPEG库、BLAS和LAPACK库。在Ubuntu或Debian系统上，可以使用以下命令安装： sudo apt-get update sudo apt-get install libjpeg-dev libblas-dev liblapack-dev 在CentOS或Fedora系统上，可以使用以下命令安…...
VSCode神仙插件——Codeium (AI编程助手)
1、安装&登录插件 安装过程中会让你登录Codeium账户，可以通过Google账户登录，或者可以注册一个Codeium账户（如果没有弹出让你登录账户的界面，可以等安装结束后在右下角找到登录的地方） 右下角显示如下图所示&#…...
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控件
列表框是将一批文本字符串显示在一个具有滚动功能的方框中的控件。通过发送消息到列表框的窗口过程，程序可以添加或删除列表中的字符串。当列表框中的一个项目被选中时，列表框控件便发送 WM_COMMAND消息到其父窗口。然后父窗口确定哪个项目被选中。 本节…...
使用Node.js 框架（ Express.js）来创建一个简单的 API 端点
文章目录 使用Node.js 框架（ Express.js）来创建一个简单的 API 端点什么是express安装修改代码 express 自动刷新 使用Node.js 框架（ Express.js）来创建一个简单的 API 端点 什么是express Express 是一个保持最小规模的灵活的 …...
企业服务行业CRM解决方案
企业服务行业CRM解决方案 强大的功能满足企业服务行业对客户管理、业务管理等方面的真实需求； 细分企业服务行业的不同领域，为不同业务场景提供个性化配置； 打通钉钉、企业微信等平台，降低企业使用CRM门槛，提供高性…...
服务器怎么进PE系统？
服务器进PE是指将服务器的操作系统切换到预安装环境（Pre-Installation Environment）的状态。在PE环境下，可以进行一些系统管理和故障排除的操作。在进入PE（Preinstall Environment）之前，首先需要确保你的服…...
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 应用程序中，三层架构（Three-Tier Architecture）是一种常见的设计模式，用于分离应用程序的表示层、业务逻辑层和数据访问层。这种架构有助于提高代码的可维护性、可扩展性和可重用性。以下是详细解释 Java 应用程序中使用 …...
打工人如何应对AI对工作岗位的风险
面对AI对工作岗位的潜在取代，我们可以从多个层面制定应对策略，以确保劳动力市场的平稳过渡和社会的可持续发展。以下是一些具体的应对策略： 一、加强教育与培训 提升STEM教育：增加科学、技术、工程和数学（STEM&#…...
C++：从C语言过渡到C++
在这篇博客中，我将会介绍从C语言过渡到C的一些基础知识。 目录 C起源 C的关键字 输出hello，world 编辑 命名空间 1.什么是命名空间 2.namespace的作用 3.域作用限定符 4.命名空间的使用 IO流 缺省参数 函数重载 引用 1.引用的定义 2.引…...
在安卓中使用FFmpeg录制摄像头的视频并保存到本地MP4文件
在移动应用开发中，有时需要利用设备的摄像头录制视频，并且希望在录制过程中能够精确控制视频的质量、格式和时长。FFmpeg作为一个强大的多媒体处理工具，提供了广泛的功能和选项，能够帮助我们实现这样的需求。 添加依赖 在安卓平台…...
Vue从零到实战第一天
💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小…...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接：3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...
突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合
强化学习（Reinforcement Learning, RL）是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程，然后使用强化学习的Actor-Critic机制（中文译作“知行互动”机制），逐步迭代求解…...
Day131 | 灵神 | 回溯算法 | 子集型 子集
Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣（LeetCode） 思路： 笔者写过很多次这道题了，不想写题解了，大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...
Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）
概述 在 Swift 开发语言中，各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过，在涉及到多个子类派生于基类进行多态模拟的场景下，…...
Python爬虫实战：研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...
OkHttp 中实现断点续传 demo
在 OkHttp 中实现断点续传主要通过以下步骤完成，核心是利用 HTTP 协议的 Range 请求头指定下载范围： 实现原理 Range 请求头：向服务器请求文件的特定字节范围（如 Range: bytes1024-） 本地文件记录：保存已…...
Nginx server_name 配置说明
Nginx 是一个高性能的反向代理和负载均衡服务器，其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机（Virtual Host）。 1. 简介 Nginx 使用 server_name 指令来确定…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...