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

JavaScript 用HTML5约束验证API做表单验证

一、验证属性与通过与否

以下为在表单元素上的可用属性:

required<boolean> 必填字段,接受布尔值,默认false
pattern<string> 接受正则,用户输入的文本必须满足该正则

表单元素对象上有checkValidity()方法,其返回布尔值,可以由表单子元素调用以验证单个子元素值是否通过验证:

if(document.form[0].element[0].checkValidity()) {}

也支持由表单调用验证全表单:

 if(document.form[0].checkValidity()) {}

该方法只返回布尔值以反映验证通过与否.


二、获取验证失败的原因

那么如何得知不通过的原因?
validity属性反应不通过的原因,该属性也由表单元素对象暴露.

if(formEle.validity) {console.log(validity);
}

该属性可能的值及值的意义如下:

customError: 若设置了setCustomValidity()则返回truefalse
pattenMismatch: 字段值不符合pattern正则的要求
rangeOverflow: 字段值大于max值返回true.
rangeUnderflow: 字段值小于min值返回true
stepMismatch: 字段值与min、 max、step值不相符则返true
toolong: 字段值长度超过maxlength值返true
valid: 如其他属性值都为falsetrue
valueMissing: 有required必填项未填返true
typeMismatch: 返回true表示字段值并非email或url属性要求的格式

例:

if(formEle.validity.valueMissing) {console.log("required value missing.");
}

END

如有疏漏,请为我指正,谢谢.

相关文章:

JavaScript 用HTML5约束验证API做表单验证

一、验证属性与通过与否 以下为在表单元素上的可用属性&#xff1a; required<boolean> 必填字段&#xff0c;接受布尔值&#xff0c;默认false pattern<string> 接受正则&#xff0c;用户输入的文本必须满足该正则表单元素对象上有checkValidity()方法&#xff…...

Unity 编辑器多开

开发多人联机的功能时大多数会遇到测试机不方便的问题。想多开同一个项目Uinty又禁止。。。因为在使用Unity Editor打开一个项目时&#xff0c;Unity Editor会在项目目录建立一个Temp目录&#xff0c;同时对里面的一个UnityLockfile文件进行加锁。SO...可以使用以下方法进行多开…...

【Spring Boot React】Spring Boot和React教程 完整版

【Spring Boot & React】Spring Boot和React教程 在B站找到一个不错的SpringBoot和React的学习视频&#xff0c;作者是amigoscode 【Spring Boot & React】Spring Boot和React教程 2023年更新版【Spring Boot React】价值79.9美元&#xff0c;全栈开发&#xff0c;搭…...

Linux中的多线程

Linux线程概念 在一个程序里的一个执行路线就叫做线程&#xff08;thread&#xff09;。更准确的定义是&#xff1a;线程是“一个进程内部的控制序 列” 进程是系统分配资源的基本实体 线程是CPU调度的基本单位 POSIX线程库 创建线程 功能&#xff1a;创建一个新的线程 原…...

《计算机原理与系统结构》学习系列

系列文章目录 一、计算机概要与技术 二、指令&#xff1a;计算机的语言&#xff08;上&#xff09; 三、指令&#xff1a;计算机的语言&#xff08;中&#xff09; 四、指令&#xff1a;计算机的语言&#xff08;下&#xff09; 五、计算机的算数运算&#xff08;上&#…...

征程6 工具链常用工具和 API 整理(含新手示例)

1.引言 征程6 工具链目前已经提供了比较丰富的集成化工具和接口来支持模型的移植和量化部署&#xff0c;本帖将整理常用的工具/接口以及使用示例来供大家参考&#xff0c;相信这篇文章会提升大家对 征程6 工具链的使用理解以及效率。 干货满满&#xff0c;欢迎访问 2.hb_con…...

我有一张图,我怎么让midjourney按照这张图继续生成呢?

使用文字生成图片是一种基本的功能&#xff0c;但是还有一种场景&#xff0c;不是从文字生成图片&#xff0c;而是基于已有的一张图片生成另一张图片&#xff0c;这个时候&#xff0c;就需要以图生图的功能了。 以图生图:image to image generator 以图生图技术让我们见识到…...

MSF捆绑文件

msf捆绑文件 msf快速打开不启动banner msfconsole -q msf捆绑文件 msfvenom -p windows/meterpreter/reverse_tcp LHOST127.0.0.1 LPORT8888 -f exe -x 1.exe -o msf.exe...

01_SQLite

文章目录 ** SQLite 存储各类和数据类型 **** SQLite 五种亲缘类型** SQLite 创建数据表删除数据表插入数据信息从数据表中获取数据&#xff0c;以结果表的形式返回数据&#xff08;结果集&#xff09;updatedistinctorder bygroup byhaving触发器删除一个触发器&#xff08;tr…...

【STM32开发笔记】移植AI框架TensorFlow到STM32单片机【下篇】

【STM32开发笔记】移植AI框架TensorFlow到STM32单片机【下篇】 一、上篇回顾二、项目准备2.1 准备模板项目2.2 支持计时功能2.3 配置UART4引脚2.4 支持printf重定向到UART42.5 支持printf输出浮点数2.6 支持printf不带\r的换行2.7 支持ccache编译缓存 三、TFLM集成3.1 添加tfli…...

畅阅读小程序|畅阅读系统|基于java的畅阅读系统小程序设计与实现(源码+数据库+文档)

畅阅读系统小程序 目录 基于java的畅阅读系统小程序设计与实现 一、前言 二、系统功能设计 三、系统实现 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农|毕设布道师…...

【机器学习(十一)】糖尿病数据集分类预测案例分析—XGBoost分类算法—Sentosa_DSML社区版

文章目录 一、XGBoost算法二、Python代码和Sentosa_DSML社区版算法实现对比(一) 数据读入和统计分析(二)数据预处理(三)模型训练与评估(四)模型可视化 三、总结 一、XGBoost算法 关于集成学习中的XGBoost算法原理&#xff0c;已经进行了介绍与总结&#xff0c;相关内容可参考【…...

二分查找一>寻找峰值

1.题目&#xff1a; 2.解析&#xff1a; 暴力遍历代码&#xff1a;O(N),由于该题数据很少所以可以通过 暴力遍历&#xff1a;O(N),由于该题数据很少所以可以通过int index 0;for(int i 1; i < nums.length-1; i) {//某段区域内一直递增&#xff0c;更新就indexif(nums[i]…...

《Linux从小白到高手》理论篇:深入理解Linux的网络管理

今天继续宅家&#xff0c;闲来无事接着写。本篇详细深入介绍Linux的网络管理。 如你所知&#xff0c;在Linux中一切皆文件。网卡在 Linux 操作系统中用 ethX,是由 0 开始的正整数&#xff0c;比如 eth0、eth1… ethX。而普通猫和ADSL 的接口是 pppX&#xff0c;比如 ppp0 等。 …...

redis数据类型介绍

1. 字符串&#xff08;String&#xff09; 字符串是 Redis 中最基本的数据类型&#xff0c;它可以存储任何形式的字符串&#xff0c;包括文本、数字等。字符串类型的操作非常丰富&#xff0c;比如 SET、GET、INCR&#xff08;自增&#xff09;、DECR&#xff08;自减&#xff0…...

一张照片变换古风写真,Flux如何做到?

前言 解锁图像创作新体验&#xff1a;ComfyUI指南 在AI图像生成领域&#xff0c;ComfyUI 已成为不可忽视的力量。它是基于Stable Diffusion的图像生成工具&#xff0c;提供了一个节点式图形用户界面&#xff08;GUI&#xff09;&#xff0c;让用户可以通过简单的拖拽与配置来…...

医药行业的智能合同审查:大模型与AI赋能合规管理

随着医药行业的快速发展&#xff0c;尤其是在全球化背景下&#xff0c;企业在业务拓展、合作协议签订中需要处理大量复杂的合同。合同不仅是业务的法律保障&#xff0c;更是风险管理的重要工具。医药行业合同审查的复杂性源于其严格的合规性要求&#xff0c;包括与政府机构、研…...

幂等性接口实现

1、什么是幂等性 幂等&#xff08;idempotence&#xff09;&#xff0c;这个词源自数学&#xff0c;幂等性是数学中的一个概念&#xff0c;常见于抽象代数中。表达的是N次变换与1次变换的结果相同。简单来说&#xff0c;就是如果方法调用一次和调用多次产生的效果是相同的&…...

C++ 语言特性29 - 协程介绍

一&#xff1a;什么是协程 C20 引入了协程&#xff08;coroutine&#xff09;&#xff0c;这是 C 标准库中一个强大的新特性。协程是一种可以在执行中暂停并随后恢复的函数&#xff0c;允许程序在异步或并行场景下高效管理任务&#xff0c;而不需要传统的线程或复杂的回调机制。…...

[Day 84] 區塊鏈與人工智能的聯動應用:理論、技術與實踐

AI在公共安全中的應用實例 引言 隨著技術的進步&#xff0c;人工智能&#xff08;AI&#xff09;在公共安全領域的應用越來越廣泛。AI不僅能夠提高安全部門的工作效率&#xff0c;還能有效幫助預防和處理各類公共安全事件。從人臉識別、行為分析到災害預測&#xff0c;AI正在…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

Kafka主题运维全指南:从基础配置到故障处理

#作者&#xff1a;张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1&#xff1a;主题删除失败。常见错误2&#xff1a;__consumer_offsets占用太多的磁盘。 主题日常管理 …...

02.运算符

目录 什么是运算符 算术运算符 1.基本四则运算符 2.增量运算符 3.自增/自减运算符 关系运算符 逻辑运算符 &&&#xff1a;逻辑与 ||&#xff1a;逻辑或 &#xff01;&#xff1a;逻辑非 短路求值 位运算符 按位与&&#xff1a; 按位或 | 按位取反~ …...

Xcode 16 集成 cocoapods 报错

基于 Xcode 16 新建工程项目&#xff0c;集成 cocoapods 执行 pod init 报错 ### Error RuntimeError - PBXGroup attempted to initialize an object with unknown ISA PBXFileSystemSynchronizedRootGroup from attributes: {"isa">"PBXFileSystemSynchro…...