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 方法来进行约束验证：

checkValidity()：这是一个 HTMLInputElement 对象的方法，用于检查输入元素的有效性。如果输入元素的值有效，则返回 true，否则返回 false。

javascript 复制代码

var inputElement = document.getElementById("myInput");
if(inputElement.checkValidity()) {
    // 输入有效
} else {
    // 输入无效
}

setCustomValidity()：这个方法允许您设置自定义的验证消息。如果一个输入元素的值无效，您可以使用这个方法设置自定义消息，从而向用户显示特定的验证错误。

javascript 复制代码

var inputElement = document.getElementById("myInput");
if(inputElement.value.length < 5) {
    inputElement.setCustomValidity("输入长度必须至少为5个字符");
} else {
    inputElement.setCustomValidity("");
}

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

约束验证 DOM 属性

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

required：当这个属性存在于表单元素时，它表示该元素必须填写或选择一个值，否则表单提交时会触发验证错误。

html 复制代码

<input type="text" id="username" name="username" required>

pattern：用于指定一个正则表达式，该正则表达式描述了输入字段的预期格式。如果输入值与指定的模式不匹配，表单提交时会触发验证错误。

html 复制代码

<input type="text" id="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">

min 和 max：用于指定数值或日期输入的最小值和最大值。

html 复制代码

<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">

maxlength 和 minlength：用于指定输入字段的最大长度和最小长度。

html 复制代码

<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中的一些保留关键字：

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

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

23 JavaScript学习：验证API

JavaScript验证API

约束验证 DOM 方法

约束验证 DOM 属性

JavaScript 标准

JavaScript 保留关键字

JavaScript 对象、属性和方法

JavaScript中Java 保留关键字

Windows 保留关键字

HTML 事件句柄

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