HTML 约束验证
HTML5引入了表单相关的一些新机制:它为<input>元素和约束验证增加了一些新的语义类型,使得客户端检查表单内容变得容易。基本上,通过设置一些新的属性,常用的约束条件可以无需 JavaScript 代码而检测到;对于更复杂的约束条件的校验可以尝试使用约束验证 API。
固有和基本约束
<input>元素
type 属性中的固有约束有
Input 类型 | 约束描述 |
<input type="URL"> | 值必须为 URL 现行标准定义的绝对 URL 地址 |
<input type="email"> | 该值必须是一个语法上有效的电子邮件地址 |
大多数 input 类型没有内在的约束,因为有些类型被禁止在约束验证中使用,或者有一个净化算法将不正确的值转化为正确的默认值。
验证相关的属性
除了上面描述的 type
属性外,以下属性用于描述基本约束。
属性 | 支持该特性的 Input 类型 | 约束描述 |
pattern | text 、search 、url 、tel 、email 、password | 输入的值必须符合模式。 |
min | range 、number、date 、month 、week、datetime-local 、time | 输入的值必须大于等于该属性值。 |
max | range 、number、date 、month 、week、datetime-local 、time | 输入的值必须小于等于该属性值。 |
required | text、search、url、tel、email、password、date、datetime-local、month、week、time、number、checkbox、radio、file;也在 <select> 和 <textarea> 元素上可用 | 如果指定了这个属性,则必须输入一个值。 |
step | date、month、week、datetime-local 、time、range 、number | 如果 step 没有设置为字面量 any ,则输入值必须为 min + step 值的整数倍。 |
minlength | text、search、url、tel、email、password;也在 <textarea> 元素上可用 | 如果输入值非空,则其字符数(码点)不得少于该属性的值。对于 <textarea>,所有换行符都被规范化为一个字符(相对于 CRLF 对) |
maxlength | text、search、url、tel、email、password;也在 <textarea> 元素上可用 | 字符数(码点)不得超过该属性的值。 |
过程
约束验证是通过约束验证 API 在单个表单元素上或在表单层面上,通过 <form> 元素本身完成。约束验证是通过以下方式完成的:
通过调用表单相关的 DOM 接口(HTMLInputElement、HTMLSelectElement、HTMLButtonElement 、HTMLOutputElement 或 HTMLTextAreaElement)的 checkValidity() 或 reportValidity() 方法,只对这个元素进行约束评估,允许脚本获得这些信息。checkValidity() 方法返回一个布尔值,表示该元素的值是否通过其约束(这通常是由用户代理在确定哪个 CSS 伪类,:valid 或 :invalid 适用时完成的)。相反,reportValidity() 方法会向用户报告任何约束失败的情况。
通过调用 HTMLFormElement 接口上的 checkValidity() 或 reportValidity() 方法。
通过提交表单本身。
调用 checkValidity() 也被称为约束的静态验证,调用 reportValidity() 也被称为约束的交互认证。
- 如果 <form> 元素上设置了 novalidate 属性,则不发生约束验证交互。
- 在 HTMLFormElement 接口上调用 submit() 方法并不触发约束条件验证。换句话说,即使表单数据不满足约束条件,该方法也会将其发送到服务器。在提交按钮上调用 click() 方法来代替。
约束验证的可视化样式
除了设置约束条件外,web 开发者还想控制向用户显示什么信息以及它们的样式。
控制元素的外观
元素的外观可以通过 CSS 伪类进行控制。
:required、:optional CSS 伪类
:required 和 :optional 伪类允许开发者编写选择器,以匹配有 required 属性或没有该属性的表单元素。
:placeholder-shown CSS 伪类
参见 :placeholder-shown。
:valid、:invalid CSS 伪类
:valid 和 :invalid 伪类用于表示 <input> 元素,根据输入的类型设置,这些元素的内容分别可以验证和无法验证。这些类允许用户对有效或无效的表单元素进行样式设计,以使其更容易识别格式正确或不正确的元素。
控制约束验证的文字
以下一些方法可以控制违反约束条件的文本:
以下元素上的 setCustomValidity(message) 方法:
<fieldset>。备注:大多数浏览器中,在 fieldset 元素上设定自定义验证信息不会阻止表单提交。
<input>
<output>
<select>
提交按钮(使用类型为 submit 的 <button> 元素,或类型为 submit 的 input 元素创建。其他类型的按钮不参与约束验证。
<textarea>
ValidityState 接口描述了由上述元素类型的 validity 属性返回的对象。它表示一个输入值可能无效的各种方式。它们共同解释了为什么一个元素的值是无效的,则不能被验证。
相关文章:
HTML 约束验证
HTML5引入了表单相关的一些新机制:它为<input>元素和约束验证增加了一些新的语义类型,使得客户端检查表单内容变得容易。基本上,通过设置一些新的属性,常用的约束条件可以无需 JavaScript 代码而检测到;对于更复…...

vue3项目开发一些必备的内容,该安装安装,该创建创建
重新整理了一下项目开发必备的一些操作,以后直接复制黏贴运行,随着项目开发,后期会陆续补充常用插件或组件等 如果你是还没有安装过的新人,建议从《通过安装Element UI/Plus来学习vue之如何创建项目、搭建vue脚手架、npm下载、封装…...
2D拓扑图
2D拓扑图主要指的是在二维平面上表示物体形状和关系的一种图形表示方法。 一、基本概念 2D网格拓扑结构:在二维平面上,由一系列的节点(node)和边(edge)组成。每个节点代表一个具体的位置或坐标点…...
大数据面试题整理——Hive
系列文章目录 大数据面试题专栏点击进入 文章目录 系列文章目录Hive 面试知识点全面解析一、函数相关(一)函数分类与特点(二)concat和concat_ws的区别 二、SQL 的书写和执行顺序(一)书写顺序(二…...
Python实现图像(边缘)锐化:梯度锐化、Roberts 算子、Laplace算子、Sobel算子的详细方法
目录 Python实现图像(边缘)锐化:梯度锐化、Roberts算子、Laplace算子、Sobel算子的详细方法引言一、图像锐化的基本原理1.1 什么是图像锐化?1.2 边缘检测的基本概念 二、常用的图像锐化算法2.1 梯度锐化2.1.1 实现步骤 2.2 Robert…...

【电机控制】相电流重构——单电阻采样方案
【电机控制】相电流重构——单电阻采样方案 文章目录 [TOC](文章目录) 前言一、基于单电阻采样电流重构技术原理分析1.1 单电阻采样原理图1.2 基本电压矢量与电流采样关系 二、非观测区2.1 扇区过渡区2.2 低压调制区 三、非观测区补偿——移相法四、参考文献总结 前言 使用工具…...

#基础算法
1 差分练习 1 模板题 代码实现: import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt();int m sc.nextInt();int num sc.nextInt();long[][] arr new long[n 2][m …...

如何用猿大师办公助手实现OA系统中Word公文/合同在线编辑及流转?
在OA系统或者合同管理系统中,我们会经常遇到网页在线编辑Word文档形式的公文及合同的情况,并且需要上级对下级的公文进行批注等操作,或者不同部门的人需要签字审核,这就需要用到文档流转功能,如何用猿大师办公助手实现…...
Python中的列表是什么?它们有什么用途?
1、Python中的列表是什么?它们有什么用途? 在Python中,列表是一种有序的集合,可以包含不同类型的元素。列表可以存储一组值,并且可以方便地访问、修改和操作这些值。 列表的主要用途包括: 数据存储&…...

探索现代软件开发中的持续集成与持续交付(CI/CD)实践
探索现代软件开发中的持续集成与持续交付(CI/CD)实践 随着软件开发的飞速进步,现代开发团队已经从传统的开发模式向更加自动化和灵活的开发流程转变。持续集成(CI) 与 持续交付(CD) 成为当下主…...
React 前端框架开发入门案例
以下是一个使用 React 进行前端框架开发的入门案例,实现一个简单的待办事项列表应用。 一、准备工作 安装 Node.js:React 需要 Node.js 环境来运行。你可以从 Node.js 官方网站下载并安装适合你操作系统的版本。 创建项目目录:在你的电脑上…...
模拟 DDoS 攻击与防御实验
模拟 DDoS 攻击与防御实验可以帮助理解攻击原理和防御策略。在进行这种实验时,必须确保在受控、合法的环境中进行,避免对真实网络造成损害。以下是具体步骤: 环境要求 硬件:至少两台计算机(或虚拟机)&…...

【electron8】electron实现“图片”的另存为
注:该列出的代码,都在文章内示例出 1. 另存为按钮事件: const saveAsHandler async () > {const { path, sessionId } recordInfoif(typeof message ! string) return;// 因为我的图片是加密的,所以我需要根据接口返回的路…...

Python分析假期对美国出生率的影响
背景 1、数据集下载 birthsHistorical US birth data culled from the CDC website - jakevdp/data-CDCbirthshttps://github.com/jakevdp/data-CDCbirths 2、数据集介绍 此数据来自美国疾病控制和预防中心,并通过 Google 的 BigQuery Web UI 使用以下查询进行编…...
机械臂笛卡尔空间轨迹规划
1. 重新优化末端轨迹规划 调整末端轨迹的插值方法或参数:如果之前使用的是线性插值,可改为三次样条插值。例如,对于一个在二维平面上从点(0, 0)到(10, 10)的末端轨迹,线性插值可能是简单地在每个时间步长均匀增加坐标值࿰…...

红队工具---Behinder学习
1.什么是Behinder? Behinder 是一款用于网络渗透测试的安全工具,主要用于对 Web 应用进行攻击和漏洞利用。它提供了强大的功能,是一款红队的大杀器,几乎是现代web安全必须学习的一款webshell管理工具。 主要用途 渗透测试&#…...
k8s 1.28.2 集群部署 NFS server 和 NFS Subdir External Provisioner
文章目录 [toc]前言部署 NFS server镜像准备节点打标签启动 NFS server创建 pv 验证创建 pvc创建 pod 挂载验证 部署 NFS Subdir External Provisioner创建 pod 验证提前创建 pvc 的方式使用 volumeClaimTemplates 的方式 前言 NFS Subdir External Provisioner 可以使用现有的…...

前端零基础入门到上班:【Day1】什么是前端?
本来打算开付费专栏 但是想起那句话 赠人玫瑰手留余香 引言1. 什么是前端?1.1 前端的定义1.2 前端的三大核心技术1.3 前端框架和工具 2. 什么是后端?2.1 后端的定义2.2 后端的组成要素2.3 后端框架和工具 3. 前后端的区别4. 什么是前后端分离?…...

搜索二叉树 Binary Search Tree(BST)
【提醒】本章内容需掌握二叉树结构的基本概念和特性,不然可能阅读起来比较费劲。 一、 概念 什么是搜索二叉树?搜索二叉树和普通二叉树的却别是什么? 答: 二叉搜索树又称二叉排序树,它或者是一棵空树 或者是具有以下性…...
数据库表字段插入bug
瀚高数据库 目录 环境 BUG/漏洞编码 症状 触发条件 解决方案 环境 系统平台:Linux x86-64 Red Hat Enterprise Linux 7 版本:4.5.1 BUG/漏洞编码 3355 症状 数据库安全版v4.5.1,安装包为:hgdb4.5.1-see-centos7-x86-64-20210804.…...

51c自动驾驶~合集58
我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留,CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制(CCA-Attention),…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)
文章目录 1.什么是Redis?2.为什么要使用redis作为mysql的缓存?3.什么是缓存雪崩、缓存穿透、缓存击穿?3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet,点击确认后如下提示 最终上报fail 解决方法 内核升级导致,需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元(GRU)长短期记忆神经网络(LSTM)…...
Spring AI与Spring Modulith核心技术解析
Spring AI核心架构解析 Spring AI(https://spring.io/projects/spring-ai)作为Spring生态中的AI集成框架,其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似,但特别为多语…...

R语言速释制剂QBD解决方案之三
本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解
在 C/C 编程的编译和链接过程中,附加包含目录、附加库目录和附加依赖项是三个至关重要的设置,它们相互配合,确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中,这些概念容易让人混淆,但深入理解它们的作用和联…...

Qemu arm操作系统开发环境
使用qemu虚拟arm硬件比较合适。 步骤如下: 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载,下载地址:https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

结构化文件管理实战:实现目录自动创建与归类
手动操作容易因疲劳或疏忽导致命名错误、路径混乱等问题,进而引发后续程序异常。使用工具进行标准化操作,能有效降低出错概率。 需要快速整理大量文件的技术用户而言,这款工具提供了一种轻便高效的解决方案。程序体积仅有 156KB,…...

运行vue项目报错 errors and 0 warnings potentially fixable with the `--fix` option.
报错 找到package.json文件 找到这个修改成 "lint": "eslint --fix --ext .js,.vue src" 为elsint有配置结尾换行符,最后运行:npm run lint --fix...