23 JavaScript学习:验证API

JavaScript验证API

在这里插入图片描述

举例:

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</button><p id="demo"></p><script>function myFunction() {var inpObj = document.getElementById("id1");if (inpObj.checkValidity() == false) {document.getElementById("demo").innerHTML = inpObj.validationMessage;}
}</script>

约束验证 DOM 方法

在 JavaScript 中,您可以使用以下基本的 DOM 方法来进行约束验证:

  1. checkValidity():这是一个 HTMLInputElement 对象的方法,用于检查输入元素的有效性。如果输入元素的值有效,则返回 true,否则返回 false。
var inputElement = document.getElementById("myInput");
if(inputElement.checkValidity()) {// 输入有效
} else {// 输入无效
}
  1. setCustomValidity():这个方法允许您设置自定义的验证消息。如果一个输入元素的值无效,您可以使用这个方法设置自定义消息,从而向用户显示特定的验证错误。
var inputElement = document.getElementById("myInput");
if(inputElement.value.length < 5) {inputElement.setCustomValidity("输入长度必须至少为5个字符");
} else {inputElement.setCustomValidity("");
}

这些是一些基本的约束验证方法,可以帮助您在前端验证用户输入。您也可以结合使用这些方法与表单事件,如 submit 事件、input 事件等,来实现更复杂的输入验证逻辑。

约束验证 DOM 属性

在 JavaScript 中,约束验证的 DOM 属性是指那些用于描述和控制表单元素验证行为的属性。其中一些常见的约束验证 DOM 属性包括:

  1. required:当这个属性存在于表单元素时,它表示该元素必须填写或选择一个值,否则表单提交时会触发验证错误。
<input type="text" id="username" name="username" required>
  1. pattern:用于指定一个正则表达式,该正则表达式描述了输入字段的预期格式。如果输入值与指定的模式不匹配,表单提交时会触发验证错误。
<input type="text" id="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  1. minmax:用于指定数值或日期输入的最小值和最大值。
<input type="number" id="quantity" name="quantity" min="1" max="10">
<input type="date" id="start-date" name="start-date" min="2024-01-01" max="2024-12-31">
  1. maxlengthminlength:用于指定输入字段的最大长度和最小长度。
<input type="text" id="username" name="username" maxlength="20" minlength="5">

这些是一些常见的约束验证 DOM 属性,它们可用于在客户端对用户输入进行基本的验证和约束。结合上述的属性和相关的事件,如 input 事件、submit 事件,您可以实现强大的前端验证逻辑。如果您需要进一步的解释或示例,请随时告诉我。

JavaScript 标准

所有的现代浏览器完全支持 ECMAScript 3(ES3,JavaScript 的第三版,从 1999 年开始)。

ECMAScript 4(ES4)未通过。

ECMAScript 5(ES5,2009 年发布)。

ECMAScript 6(ES6,2015 年发布),是 JavaScript 最新的官方版本。

所有的现代浏览器已经完全支持 ES6。

JavaScript 保留关键字

JavaScript中的保留关键字是一些被语言规范保留用于特定目的的单词,不能被用作标识符(比如变量名、函数名等)。这些关键字通常用于语言结构、控制流程、声明、特定功能等方面。以下是JavaScript中的一些保留关键字:

  1. break: 用于终止循环或switch语句。
  2. case: 在switch语句中用于定义不同的情况。
  3. catch: 用于捕获异常。
  4. class: 用于声明类。
  5. const: 用于声明常量。
  6. continue: 用于跳过循环中的当前迭代并继续下一次迭代。
  7. debugger: 用于在调试过程中停止代码执行。
  8. default: 在switch语句中定义默认情况。
  9. delete: 用于删除对象的属性。
  10. do: 用于执行循环。
  11. else: 在if语句中定义条件不满足时的情况。
  12. export: 用于导出模块、函数、变量等。
  13. extends: 用于实现类的继承。
  14. finally: 在try-catch语句中定义无论是否发生异常都会执行的代码块。
  15. for: 用于定义循环。
  16. function: 用于声明函数。
  17. if: 用于条件判断。
  18. import: 用于导入模块、函数、变量等。
  19. in: 用于检查对象是否具有特定属性。
  20. instanceof: 用于检查对象是否是特定类的实例。
  21. let: 用于声明块级作用域的变量。
  22. new: 用于创建对象实例。
  23. return: 用于从函数中返回值。
  24. super: 用于调用父类的方法。
  25. switch: 用于多分支条件判断。
  26. this: 用于引用当前对象。
  27. throw: 用于抛出异常。
  28. try: 用于定义可能发生异常的代码块。
  29. typeof: 用于获取操作数的数据类型。
  30. var: 用于声明变量(在ES6之前使用,现已被let和const取代,但仍然保留)。
  31. void: 用于返回undefined。
  32. while: 用于定义循环。
  33. with: 用于将代码的作用域设置为特定对象的作用域(已废弃,不建议使用)。
  34. yield: 用于暂停和恢复生成器函数的执行。

这些保留关键字在JavaScript中有着特定的语法和语义,因此不能被用作标识符,否则会导致语法错误。

JavaScript 对象、属性和方法

在这里插入图片描述

JavaScript中Java 保留关键字

在这里插入图片描述

Windows 保留关键字

在这里插入图片描述

HTML 事件句柄

在这里插入图片描述

关注我,不迷路,共学习,同进步

关注我,不迷路,共学习,同进步

img

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3017595.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

HarmonyOS实战开发-如何实现Web组件中网页长截图。

介绍 本案例实现了Web组件中网页长截图的方案。支持截图后展示大小浮窗预览、保存图片到相册、手势左滑关闭等功能。 效果图预览 实现思路 本解决方案通过循环滚动Web组件&#xff0c;每次滚动截取当前状态后拼接到离屏画布&#xff0c;最后一次性转为PixelMap图片并显示在全…

Arduino PlatformIO避坑记

实在受不了Arduino IDE上古时期的界面风格&#xff0c;最要命的是编译速度慢到极点&#xff0c;好在有PlatformIO。VS搭配PlatformIO&#xff0c;有微软加持&#xff0c;界面自然是妥妥的了&#xff0c;编译速度提升也肉眼可见。 至于PlatformIO的安装过程&#xff0c;网上教程…

Day 24 数据库管理及数据类型

数据库管理及数据类型 一&#xff1a;数据类型 1.数值类型 整数类型 ​ 整数类型&#xff1a;TINYINT SMALLINT MEDIUMINT INT BIGINT ​ 作用&#xff1a;用于存储用户的年龄、游戏的Level、经验值等 浮点数类型 ​ 浮点数类型&#xff1a;FLOAT DOUBLE ​ 作用&#xf…

超疏水TiO₂纳米纤维网膜的良好性能

超疏水TiO₂纳米纤维网膜是一种具有特殊性能的材料&#xff0c;它结合了TiO₂的光催化性能和超疏水表面的自清洁、防腐、防污等特性。这种材料在防水、自清洁、油水分离等领域具有广阔的应用前景。 制备超疏水TiO₂纳米纤维网膜的过程中&#xff0c;通过精确控制纺丝溶液的成分…

vue3专栏项目 -- 项目介绍以及准备工作

这是vue3TS的项目&#xff0c;是一个类似知乎的网站&#xff0c;可以展示专栏和文章的详情&#xff0c;可以登录、注册用户&#xff0c;可以创建、删除、修改文章&#xff0c;可以上传图片等等。 这个项目全部采用Composition API 编写&#xff0c;并且使用了TypeScript&#…

PyQt5中重要的概念:信号与槽

PyQt中信号与槽概念定义如下&#xff08;网络上引用的&#xff09;&#xff1a; 信号&#xff08;signal&#xff09;和槽&#xff08;slot&#xff09;是Qt的核心机制&#xff0c;也是在PyQt编程中对象之间进行通信的机制。在创建事件循环之后&#xff0c;通过建立信号和槽的…

3W 1.5KVDC 3KVDC 隔离宽范围输入,单、双输出 DC/DC 电源模块——TP2L-3W 系列

TP2L-3W系列是一款高性能、超小型的电源模块&#xff0c;宽范围2:1,4:1输入&#xff0c;输出有稳压和连续短路保护功能&#xff0c;隔离电压为1.5KVDC、3KVDC工作温度范围为–40℃到85℃。特别适合对输出电压的精度有严格要求的地方&#xff0c;外部遥控功能对您的设计又多一项…

AIGC绘画辅助网站

Midjourney风格样式 Midjourney Style Classifier | Andrei Kovalevs Midlibrary

Python-VBA函数之旅-property函数

目录 一、property函数的常见应用场景 二、property函数使用注意事项 三、如何用好property函数&#xff1f; 1、property函数&#xff1a; 1-1、Python&#xff1a; 1-2、VBA&#xff1a; 2、推荐阅读&#xff1a; 个人主页&#xff1a;神奇夜光杯-CSDN博客 一、prop…

Django 4.x 智能分页get_elided_page_range

Django智能分页 分页效果 第1页的效果 第10页的效果 带输入框的效果 主要函数 # 参数解释 # number: 当前页码&#xff0c;默认&#xff1a;1 # on_each_side&#xff1a;当前页码前后显示几页&#xff0c;默认&#xff1a;3 # on_ends&#xff1a;首尾固定显示几页&#…

多对多字段,执行aerich migrate命令报错

报错状态&#xff1a; 解决&#xff1a; 目前只知道通过修改源码的方式进行更改

【牛客】【模板】差分

原题链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 差分模板。 b[0]a[0]; b[1]a[1]-a[0]; b[2]a[2]-a[1]; ...... b[n-1]a[n-1]-a[n-2]; b[n]a[n]-a[n-1]; 差分标记&#xff1a;b[l]k,b…

一部手机实现全行业的AI实景自动无人直播软件:为商家提供更便捷的推广方式

随着人工智能技术的快速发展&#xff0c;AI实景自动无人直播软件成为了商家推广产品的新宠。这款软件结合了智能讲解、一键开播、智能回复等多项功能&#xff0c;为商家提供了一种全新的直播方式。 首先&#xff0c;智能讲解功能让专业主播录制直播脚本&#xff0c;并通过软件自…

计划订单转采购申请的增强点和可以增强的内容

MD15 MD14 计划订单转采购申请&#xff0c;涉及的增强点和增强内容 对于外协的采购申请&#xff0c;有时候需要对组件的内容做一些特殊的处理&#xff0c;但是处理组件清单的增强ME_COMPONENTS_UPDATE的增强点&#xff08;这个增强点对于手工创建的外协PR、外协PO,外协pr转外协…

【负载均衡在线OJ项目日记】编译与日志功能开发

目录 日志功能开发 常见的日志等级 日志功能代码 编译功能开发 创建子进程和程序替换 重定向 编译功能代码 日志功能开发 日志在软件开发和运维中起着至关重要的作用&#xff0c;目前我们不谈运维只谈软件开发&#xff1b;日志最大的作用就是用于故障排查和调试&#x…

DBCO-PEG-DBCO,聚乙二醇双二苯基环辛炔可以用于功能化修饰生物材料的表面

【试剂详情】 英文名称 DBCO-PEG-DBCO 中文名称 二苯基环辛炔-聚乙二醇-二苯基环辛炔&#xff0c; 聚乙二醇双二苯基环辛炔 外观性状 由分子量决定&#xff0c;粘稠液体或者固体。 分子量 0.4k&#xff0c;0.6k&#xff0c;1k&#xff0c;2k&#xff0c;3.4k&#xff0c…

F.softmax(cls) + 1e-4

这个代码段中的 softmax 操作结合了一个微小的常数&#xff0c;这个常数通常被称为平滑化参数。softmax 函数将原始的分类输出转换为概率分布&#xff0c;其公式如下&#xff1a; 在实践中&#xff0c;当某些分类得分特别大时&#xff0c;softmax 函数会将对应的概率接近于 1&a…

【C++】C++11--- 类的新功能

目录 类的新功能 默认成员函数 示例 类成员变量初始化 强制生成默认函数的关键字default 禁止生成默认函数的关键字delete 类的新功能 默认成员函数 构造函数析构函数拷贝构造函数拷贝赋值重载取地址重载const取地址重载 C11在原先的6个默认成员函数的基础上&#xff0c…

Baidu Comate:你的智能编程伙伴,编程界的AI革命者

文章目录 Baidu Comate 介绍Baidu Comate下载安装Baidu Comate 实操体验代码解释函数注释行间注释调优建议生成单测注释生成实时续写常用快捷方式智能对话问答 Baidu Comate 建议改进Baidu Comate 体验总结 Baidu Comate 介绍 Baidu Comate 智能编码助手 是基于文心大模型&…

【工作记录】openjdk-22基础镜像的构建

背景 近期使用到的框架底层都用的是springboot3.0&#xff0c;要求jdk版本在17甚至更高。 于是决定制作一个基于openjdk22的基础镜像&#xff0c;本文对这一过程进行记录。 作为记录的同时也希望能够帮助到需要的朋友。 期望效果 容器内可以正常使用java相关命令且版本是2…