23 JavaScript学习:验证API

简介: 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 事件句柄

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

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

相关文章
|
4月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
4月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
6月前
|
前端开发 JavaScript NoSQL
使用 Node.js、Express 和 React 构建强大的 API
本文详细介绍如何使用 Node.js、Express 和 React 构建强大且动态的 API。从开发环境搭建到集成 React 前端,再到利用 APIPost 高效测试 API,适合各水平开发者。内容涵盖 Node.js 运行时、Express 框架与 React 库的基础知识及协同工作方式,还涉及数据库连接和前后端数据交互。通过实际代码示例,助你快速上手并优化应用性能。
|
5月前
|
JavaScript 数据可视化 前端开发
three.js简单实现一个3D三角函数学习理解
1.Three.js简介 Three.js是一个基于JavaScript编写的开源3D图形库,利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能,如几何体、纹理、光照、阴影等,以便开发者能够快速地创建复杂且逼真的3D场景。同时,Three.js还具有很好的跨平台和跨浏览器兼容性,让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
178 0
|
6月前
|
存储 JavaScript
|
10月前
|
API 数据安全/隐私保护 UED
探索鸿蒙的蓝牙A2DP与访问API:从学习到实现的开发之旅
在掌握了鸿蒙系统的开发基础后,我挑战了蓝牙功能的开发。通过Bluetooth A2DP和Access API,实现了蓝牙音频流传输、设备连接和权限管理。具体步骤包括:理解API作用、配置环境与权限、扫描并连接设备、实现音频流控制及动态切换设备。最终,我构建了一个简单的蓝牙音频播放器,具备设备扫描、连接、音频播放与停止、切换输出设备等功能。这次开发让我对蓝牙技术有了更深的理解,也为未来的复杂项目打下了坚实的基础。
342 58
探索鸿蒙的蓝牙A2DP与访问API:从学习到实现的开发之旅
|
11月前
|
JavaScript 前端开发 API
Vue.js 3:探索组合式API带来的新变革
Vue.js 3:探索组合式API带来的新变革
322 84
|
7月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
11月前
|
JSON 缓存 JavaScript
深入浅出:使用Node.js构建RESTful API
在这个数字时代,API已成为软件开发的基石之一。本文旨在引导初学者通过Node.js和Express框架快速搭建一个功能完备的RESTful API。我们将从零开始,逐步深入,不仅涉及代码编写,还包括设计原则、最佳实践及调试技巧。无论你是初探后端开发,还是希望扩展你的技术栈,这篇文章都将是你的理想指南。