重学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=""

html 复制代码
<fieldset id="breakfast">
  <legend>Breakfast</legend>
</fieldset>

select 属性

id=""

name=""

option 属性

id=""

name=""

value=""

selected

div 属性

id=""

class=""

script

javascript 复制代码
<script src="./script.js"></script>

getElementById

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

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

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

classList 属性具有 .add() 方法,它接受一个字符串来表示要添加到元素的类。

javascript 复制代码
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}~!;

函数

接受参数类型的函数

javascript 复制代码
function cleanInputString(str) {

}

事件监听器

javascript 复制代码
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 元素,而是将标签和内容显示为原始文本。

相关推荐
Cosolar21 小时前
Coze-JS WsChatClient 实时语音对话源码解析
前端
郝学胜-神的一滴21 小时前
享元模式(Flyweight Pattern)
开发语言·前端·c++·设计模式·软件工程·享元模式
zheshiyangyang1 天前
Sass开发【四】
前端·css·sass
讨厌吃蛋黄酥1 天前
🔥 面试必考题:手写数组扁平化,5种方法全解析(附代码+图解)
前端·javascript·面试
麦当_1 天前
Cloudflare Workers 环境下的数据库死锁问题及解决方案
javascript·数据库·后端
java1234_小锋1 天前
Scikit-learn Python机器学习 - 回归分析算法 - Lasso 回归 (Lasso Regression)
python·算法·机器学习
GISer_Jing1 天前
作业帮前端面试(准备)
前端·面试·职场和发展
大数据001 天前
Flink消费Datahub到ClickhouseSink
java·前端·flink
thginWalker1 天前
分布式协议与算法实战-实战篇
分布式·算法
知识分享小能手1 天前
React学习教程,从入门到精通,React 前后端交互技术详解(29)
前端·javascript·vue.js·学习·react.js·前端框架·react