重学JS-004 --- JavaScript算法与数据结构（四）JavaScript 表单验证

HTML

HTML 属性应该用双引号引起来。

label 属性

for=“”

input 属性

id=“”
type=“number/text/radio/checkbox/button/emial/submit”
min=“0”
max=“14”
placeholder=“”
required

button 属性

id=“”
name=“”
type=“submit”

fieldset 属性

id=“”

<fieldset id="breakfast"><legend>Breakfast</legend>
</fieldset>

select 属性

id=“”
name=“”

option 属性

id=“”
name=“”
value=“”
selected

div 属性

id=“”
class=“”

script

<script src="./script.js"></script>

getElementById

要访问具有给定 id 名称的 HTML 元素，可以使用 getElementById() 方法。

在编程中，在变量前面加上 is 或 has 是一种常见的做法，表示该变量代表布尔值。

output 变量是一个元素，它具有 classList 属性，具有 .remove() 方法，接受一个字符串，表示要从元素中删除的类。
classList 属性具有 .add() 方法，它接受一个字符串来表示要添加到元素的类。

const output = document.getElementById('output');
output.classList.remove("hide"); 
output.classList.add("hide");

querySelectorAll

querySelectorAll() 方法返回与选择器匹配的所有元素的 NodeList。 NodeList
是一个类似数组的对象，因此可以使用括号表示法访问其中的元素。

document.querySelectorAll 返回 NodeList，它类似于数组，但不是数组。
但是，Array 对象有一个 .from() 方法，它接受类似数组的对象并返回一个数组。

注意：HTML input 字段的值在 JavaScript 中以字符串形式接收。 在执行任何计算之前，你需要将这些字符串转换为数字。

null

JavaScript 中的 null 是一个特殊原语，表示故意缺少某个值。 在布尔上下文中，null 被认为是假的，在条件语句中其计算结果为 false。

循环

for...of

模版文字

JavaScript 具有一项称为 模板文字 的功能，它允许你直接在字符串中插入变量。 模板文字用反引号 `` 表示，而不是单引号或双引号。 可以通过用 ${} 包围变量来将变量传递到模板文字中 - 变量的值将插入到字符串中。
const templateLiteral = Hello, my name is ${name}~!;

函数

接受参数类型的函数

function cleanInputString(str) {}

事件监听器

addEntryButton.addEventListener("click", addEntry);
calorieCounter.addEventListener("submit", calculateCalories);

regex

要匹配字符串中的特定字符，可以使用正则表达式或简称**“regex”**。

JavaScript 中的正则表达式由正斜杠包裹的模式表示。

在 JavaScript 正则表达式中，​​开头斜杠 /和结尾斜杠 /​​ 是正则表达式的​​字面量定界符​​，用于表示正则表达式的开始和结束。

• 要匹配任意数字，可以使用字符类 [0-9]。 这将匹配 0 和 9 之间的任意数字。
• 有一个简写字符类可以匹配任何数字：\d。 用这个简写替换你的 [0-9] 字符类。
• 正则表达式中的 + 修饰符允许你匹配出现一次或多次的模式。 要匹配数字模式一次或多次，请在每个数字字符类后添加加号。
• 字符串有一个 .match() 方法，它接受一个正则表达式参数。
• .match() 将返回匹配结果数组 - 包含第一个匹配项，如果使用全局标志，则包含所有匹配项。
• 当未找到匹配项时，match 方法返回 null。

[ ‘1e3’, index: 0, input: ‘1e3’, groups: undefined ]
match 方法返回一个包含字符串中找到的所有匹配项的数组。

以下是该信息的完整分类：

“1e3” 是与 /\d+e\d+/i 正则表达式匹配的值。
index: 0 是字符串中匹配值的索引。
input: ‘1e3’ 是匹配的原始字符串。
groups: undefined 是匹配的组。

1. ​​基本语法​​
   const regex = /pattern/flags;
   • ​​/pattern/​​：两个斜杠之间的内容是正则表达式的模式（pattern）。
   • ​​flags​​（可选）：跟在最后一个斜杠后面的标志（如 g、i、m等），用于修改匹配行为。Regex 对此有一个标志 - i 标志，代表“不敏感”。

2. ​​与 RegExp构造函数的区别​​
   JavaScript 支持两种方式创建正则表达式：
   • ​​字面量形式​​（使用 /…/）：
   const regex = /ab+c/i; // 匹配 “ab+c”，忽略大小写
   • ​​构造函数形式​​（使用 new RegExp()）：
   const regex = new RegExp(“ab+c”, “i”); // 同上
   ​​区别​​：
   • 字面量形式 (/…/) 在​​代码解析时​​编译，适合静态模式。
   • RegExp构造函数在​​运行时​​编译，适合动态生成的正则表达式。

3. ​​斜杠 /在正则模式中的转义​​
   如果正则表达式本身需要匹配 /字符，必须用 ``转义：
   const regex = /https://example.com/; // 匹配 “https://example.com”
   • 在 RegExp构造函数中，由于模式是字符串，斜杠不需要额外转义：
   const regex = new RegExp(“https://example\.com”); // 同上

4. ​​总结​​
   形式 | 语法 | 适用场景
   —|—|—
   ​​正则字面量​​ | /pattern/flags | 固定模式，代码更简洁
   ​​RegExp构造函数​​ | new RegExp(“pattern”, “flags”) | 动态模式（如用户输入）

​​关键点​​：
• /…/是正则表达式的​​字面量表示法​​，类似于字符串的 "…"或 ‘…’。
• 斜杠 /本身不是正则语法的一部分，只是 JavaScript 的语法标记。
• 如果模式包含 /，必须转义为 /。

注意需要使用反斜杠字符 \ 来转义 + 符号，因为它在正则表达式中具有特殊含义。

在正则表达式中，简写字符类允许你匹配特定字符，而无需在模式中写下这些字符。
速记字符类前面带有反斜杠（\）。
字符类 \s 将匹配任何空白字符。

举例

const regex = /±\s/; 按顺序匹配特定字符
将你的 ±\s 模式转变为字符类。const regex = /[±\s]/; 匹配特定字符中的一个

const regex = /±\s/;
const regex = /[±\s]/;
这两个 JavaScript 正则表达式看起来相似但有重要区别：

1. const regex = /±\s/;
   • 匹配确切的字符序列：加号 +后跟连字符 -后跟一个空白字符
   • 例如会匹配 "± "这样的字符串
   • 这里的 +是转义加号，-是普通连字符，\s是空白字符

2. const regex = /[±\s]/;
   • 匹配字符类中的任意一个字符：
   • +普通加号（在字符类中不需要转义）
   • -连字符（因为它位于字符类的末尾，所以被解释为字面量）
   • \s任何空白字符
   • 例如会匹配 “+”、"-"或任何空白字符（空格、制表符等）

关键区别：
• 第一个是匹配特定序列，第二个是匹配字符类中的任意单个字符
• 在字符类 []中，+不需要转义，-如果在开头或结尾也不会有特殊含义

正则表达式还可以采用特定标志来改变模式匹配行为。
标志被添加在结束的 / 之后。 g 标志代表“全局”，它将告诉模式在找到匹配项后继续查找。

String

JavaScript 提供了 .replace() 方法，使你可以用另一个字符串替换字符串中的字符。 此方法接受两个参数。 第一个参数是要替换的字符序列，可以是字符串或正则表达式模式。 第二个参数是替换匹配序列的字符串。

由于字符串是不可变的，replace 方法返回一个替换字符后的新字符串。

字符串有一个 .match() 方法，它接受一个正则表达式参数。 .match() 将返回匹配结果数组 - 包含第一个匹配项，如果使用全局标志，则包含所有匹配项。

match 方法返回一个包含字符串中找到的所有匹配项的数组。

当未找到匹配项时，match 方法返回 null。 (JavaScript 中的 null 是一个特殊原语，表示故意缺少某个值。 在布尔上下文中，null 被认为是假的，在条件语句中其计算结果为 false。)

toLowerCase()
将字符串转换为小写时，可以使用 toLowerCase() 方法。 此方法返回转换为小写的调用字符串值。

Math

Math.abs() 是一种内置的 JavaScript 方法，它将返回数字的绝对值。

Array

Array.from()

container 的 innerHTML 属性设置为空字符串。 这将清除该输入容器的所有内容
container.innerHTML = ‘’;
清除input的值：budgetNumberInput.value = ‘’;
清除 output 元素的文本。 你可以通过将 innerText 属性设置为空字符串来实现此目的。
output.innerText = ‘’;

innerText 和 innerHTML 的区别在于 innerText 不会呈现 HTML 元素，而是将标签和内容显示为原始文本。