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.…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...
(二)TensorRT-LLM | 模型导出(v0.20.0rc3)
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述,后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作,其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中,接口是一种抽象类型,它定义了一组方法的集合: // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的: // 矩形结构体…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表,若其中包含环,则输出环的入口节点。 若其中不包含环,则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式
点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...
Xen Server服务器释放磁盘空间
disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...
音视频——I2S 协议详解
I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议,专门用于在数字音频设备之间传输数字音频数据。它由飞利浦(Philips)公司开发,以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...
搭建DNS域名解析服务器(正向解析资源文件)
正向解析资源文件 1)准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2)服务端安装软件:bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...
