重学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 元素,而是将标签和内容显示为原始文本。

相关推荐
晓得迷路了4 小时前
栗子前端技术周刊第 96 期 - Rspack v1.5、ESLint v9.34.0、Bun v1.2.1...
前端·javascript·bun
剪一朵云爱着4 小时前
PAT 1088 Rational Arithmetic
算法·pat考试
程序视点4 小时前
局域网文件传输神器LocalSend:比微信QQ更快更安全的跨平台传输方案
前端·后端
勤劳的进取家4 小时前
论文阅读:GOAT: GO to Any Thing
论文阅读·人工智能·算法·语言模型·自然语言处理
luofeiju4 小时前
直线拟合方法全景解析:最小二乘、正交回归与 RANSAC
人工智能·线性代数·算法·机器学习·数据挖掘·回归
用户6120414922134 小时前
springboot+vue+小程序做的积分兑换系统
前端·vue.js·spring boot
卡尔曼的BD SLAMer4 小时前
北斗导航 | RAIM算法改进方案及性能对比分析报告
算法·raim·接收机自主完好性·mhss·多假设、
IT_陈寒4 小时前
🚀 Vite 5个鲜为人知的性能优化技巧:让你的构建速度提升300%
前端·人工智能·后端
ShineWinsu6 小时前
对于牛客网—语言学习篇—编程初学者入门训练—复合类型:BC136 KiKi判断上三角矩阵及BC139 矩阵交换题目的解析
c语言·c++·学习·算法·矩阵·数组·牛客网