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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

pinctrl和gpio子系统

文章目录 一、pinctrl 子系统简介二、pinctrl子系统的配置形式分析1.主要功能2.配置格式3.pinctrl驱动匹配 三、gpio子系统1.gpio系统使用流程 四、程序举例-led五、总结 一、pinctrl 子系统简介 在led操作设备树的实验中&#xff0c;对于gpio的初始化是直接操作的寄存器&…

idea No versioned directories to update were found

idea如何配置svn以及svn安装时需要注意什么 下载地址&#xff1a;https://112-28-188-82.pd1.123pan.cn:30443/download-cdn.123pan.cn/batch-download/123-820/3ec9445a/1626635-0/3ec9445a25ba365a23fc433ce0c16f34?v5&t1714358478&s171435847804276f7d9249382ba512…

使用Mybatis映射时间 DateTime ==> LocalDateTime

首先查看&#xff0c;数据库字段&#xff1a; 书写映射实体类对象VO&#xff1a; Data public class OrderListVO implements Serializable {private Integer orderId;private String memberName;private String orderNumber;private BigDecimal orderPrice;private String l…

【数据结构与算法】力扣 239. 滑动窗口最大值

题干描述 给你一个整数数组 nums&#xff0c;有一个大小为 k **的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 示例 1&#xff1a; 输入&#xff1a; nums [1,3,-1,-3,5,3…

C/C++实现高性能并行计算——1.pthreads并行编程(中)

系列文章目录 pthreads并行编程(上)pthreads并行编程(中)pthreads并行编程(下)使用OpenMP进行共享内存编程 文章目录 系列文章目录前言一、临界区1.1 pi值估计的例子1.2 找到问题竞争条件临界区 二、忙等待三、互斥量3.1 定义和初始化互斥锁3.2 销毁。3.3 获得临界区的访问权&…

安卓中对象序列化面试问题及回答

1. 什么是对象的序列化&#xff1f; 答&#xff1a; 序列化是将对象转换为字节流的过程&#xff0c;以便将其存储在文件、数据库或通过网络传输。反序列化则是将字节流重新转换为对象的过程。 2. 为什么在 Android 开发中需要对象的序列化&#xff1f; 答&#xff1a; 在 An…

ctfshow——JWT

文章目录 web 345web 346——算法改为Noneweb 347-348——爆破密匙web 349——非对称加密算法RS256私钥泄漏web 350——泄漏公钥、非对称密码算法改为对称密码算法 web 345 抓个包&#xff0c;可以看到cookie部分使用JWT&#xff08;Json Web Token&#xff09;。 JWT实际上是…

Django后台项目开发实战一

开发环境使用 Anaconda, IDE 使用 pycharm 第一阶段 创建 Django 项目 在 Anaconda Prompt 中逐步输入下面的命令&#xff08;之后的所有命令都在这个&#xff09; 首先创建一个虚拟环境&#xff0c;名称自拟&#xff0c;python 版本我这里使用 3.9.18 关于 python 版本和…

STM32中断之TIM定时器详解

系列文章目录 STM32单片机系列专栏 C语言术语和结构总结专栏 文章目录 1. TIM简述 2. 定时器类型 2.1 基本定时器 2.2 通用定时器 2.3 高级定时器 3. 定时中断 4. 代码示例1 5. 代码示例2 1. TIM简述 定时器的基本功能&#xff1a;定时器可以在预定的时间间隔内产生周…

经典机器学习法---感知模型机

优质博文&#xff1a;IT-BLOG-CN 1、模型形式 感知机模型主要用于解决二分类问题&#xff0c;即响应变量Y是个二分类变量&#xff08;如性别&#xff09;。其基本思想是拟找出一个超平面S&#xff0c;将样本空间中的训练集分为两个部分&#xff0c;使得位于超平面S合一侧的点具…

启发式搜索算法4 -遗传算法实战:吊死鬼游戏

相关文章: 启发式搜索算法1 – 最佳优先搜索算法 启发式搜索算法2 – A*算法 启发式搜索算法2 – 遗传算法 有一个小游戏叫吊死鬼游戏&#xff08;hangman&#xff09;&#xff0c;在学习英语的时候&#xff0c;大家有可能在课堂上玩过。老师给定一个英文单词&#xff0c;同学们…

2024深圳杯数学建模竞赛A题(东三省数学建模竞赛A题):建立火箭残骸音爆多源定位模型

更新完整代码和成品完整论文 《2024深圳杯&东三省数学建模思路代码成品论文》↓↓↓&#xff08;浏览器打开&#xff09; https://www.yuque.com/u42168770/qv6z0d/zx70edxvbv7rheu7?singleDoc# 2024深圳杯数学建模竞赛A题&#xff08;东三省数学建模竞赛A题&#xff0…

前端性能优化知识梳理

1.重要性 当我们面试的时候&#xff0c;前端性能优化方面算是必考的知识点&#xff0c;但是工作中我们又很少会重点的对项目进行前端优化&#xff0c;它真的不重要吗&#xff1f; 如果我们可以将后端响应时间缩短一半&#xff0c;整体响应时间只能减少5%~10%。而如果关注前端…

手把手实现一个简约酷美美的版权声明模块

1. 导语 版权声明在很多网站都有用到&#xff0c;出场率还是很高的。所以今天就实现一个属于自己分风格的版权声明模块&#xff0c;技术上采用原生的前端三剑客: HTMLCSSJavaScript(可能会用到) 比如CSDN的版权声明是这样的 2. 需求分析 先看看成品吧&#xff0c;这篇文字结…

翻译: 什么是ChatGPT 通过图形化的方式来理解 Transformer 架构 深度学习一

合集 ChatGPT 通过图形化的方式来理解 Transformer 架构 翻译: 什么是ChatGPT 通过图形化的方式来理解 Transformer 架构 深度学习一翻译: 什么是ChatGPT 通过图形化的方式来理解 Transformer 架构 深度学习二翻译: 什么是ChatGPT 通过图形化的方式来理解 Transformer 架构 深…

强网杯 2019]随便注解题方式

先来看题 这里只有一个提交&#xff0c;那我们就先提交看看情况找找思路 这里提交以后发现也没有什么有用的信息 这样我们只能根据我们的经验先试试 输入1发现有报错 有报错信息就可以试试报错注入了&#xff0c;但是这种ctf题通常会有限制字符所以我使用 1 select 1,2# 来…

c#数据库: 4.修改学生成绩

将4年级的学生成绩全部修改为100分,。修改前的学生信息表如图所示: using System; using System.Collections.Generic; using System.Data.SqlClient; using System.Linq; using System.Text; using System.Threading.Tasks;namespace StudentUpdate {internal class Program{s…

Apache SeaTunnel k8s 集群模式 Zeta 引擎部署指南

SeaTunnel提供了一种运行Zeta引擎(cluster-mode)的方法&#xff0c;可以让Kubernetes在本地运行Zeta引擎&#xff0c;实现更高效的应用程序部署和管理。在本文中&#xff0c;我们将探索SeaTunnel k8s运行zeta引擎(cluster-mode模式)的更多信息&#xff0c;了解如何更好地利用Ze…

JavaScript基础(二)

JS语法结构——引入方式 js很明显可以是一个后缀名为js的文件&#xff0c;js的引入方式和css一样&#xff0c;也有三种方式。 1.外部 使用script表现&#xff0c;只不过增加一个src属性&#xff0c;把js文件的路径src属性中。 <script src "js文件路径">&l…

h5+Vant左滑删除

介绍&#xff1a;这是一个上拉加载下拉刷新的列表&#xff0c;外加左滑删除。废话不多说&#xff0c;直接上代码&#xff01;&#xff01;&#xff01;&#xff01; <template><div class"info-list"><div class"top-bar"><van-nav-…