javascrip基础语法

为什么学习 JavaScript?

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 控制了网页的行为

1. JavaScript 输出

1.1 console.log()：用于将信息输出到浏览器控制台，例如console.log("Hello, World!");，可以输出字符串、变量、表达式等。

1.2 console.error()：专门用于输出错误信息，方便调试时快速定位问题，如console.error("An error occurred!");。
1.3 console.warn()：用于输出警告信息，提示开发者可能存在的潜在问题，如console.warn("This might cause an issue!");。

2. JavaScript 语法

2.1 语句与表达式
- 2.1.1 语句：JavaScript 代码的基本执行单元，以分号;结尾，例如var x = 5;是一个赋值语句，if (x > 3) { console.log("x is greater than 3"); }是一个条件语句。
- 2.1.2 表达式：可以产生一个值，如5 + 3是一个算术表达式，其值为8；x > 3是一个比较表达式，其值为true或false。
2.2 代码块：用花括号{}括起来的一组语句，常用于条件语句、循环语句等中，例如if (condition) { statements; }，花括号内的statements就是一个代码块。

3. JavaScript 语句

3.1 变量声明语句
- 3.1.1 var：函数作用域变量声明，例如var num = 10;，在函数内声明的var变量在整个函数内都可访问，即使在声明之前使用也不会报错（变量提升），但值为undefined。
- 3.1.2 let：块级作用域变量声明，如let count = 5;，只在声明所在的块（花括号内）及嵌套块中可访问，在声明之前使用会报错。
- 3.1.3 const：声明常量，值不可修改，如const PI = 3.14;，必须在声明时初始化，且后续不能重新赋值，同样具有块级作用域。
3.2 条件语句
- 3.2.1 if 语句：基本形式为if (condition) { statements1; } else { statements2; }，根据condition的真假执行不同的代码块。还可以有if...else if...else的形式，例如if (x > 10) { console.log("x is greater than 10"); } else if (x > 5) { console.log("x is greater than 5 but less than or equal to 10"); } else { console.log("x is less than or equal to 5"); }。
- 3.2.2 switch 语句：根据表达式的值执行不同的代码块，例如：

switch (expression) {
    case value1:
        statements1;
        break;
    case value2:
        statements2;
        break;
    default:
        defaultStatements;
}

当expression的值与某个case后的value相等时，执行对应的statements，直到遇到break跳出switch语句，若都不匹配则执行default后的代码。

4. JavaScript 注释

4.1 单行注释：以//开头，注释该行后面的内容，例如// This is a single-line comment，常用于对单行代码进行简单说明。
4.2 多行注释：以/*开头，以*/结尾，可注释多行内容，例如：

/*
This is a
multi-line comment
It can span across multiple lines
*/

常用于对一段代码或一个函数等进行详细注释。

5. JavaScript 变量

5.1 变量命名规则
- 可以包含字母、数字、下划线_和美元符号$。
- 不能以数字开头。
- 区分大小写，例如myVar和myvar是不同的变量。
- 不能使用 JavaScript 的关键字和保留字作为变量名。
5.2 变量作用域
- 全局作用域：在函数外部声明的变量具有全局作用域，可在整个 JavaScript 程序中访问，例如在 HTML 文档中引入的外部 JavaScript 文件中声明的全局变量，在该文档的所有脚本中都可访问。
- 函数作用域：在函数内部声明的var变量具有函数作用域，可在该函数内部及嵌套函数中访问（变量提升）。
- 块级作用域：let和const声明的变量具有块级作用域，只在声明所在的块（花括号内）及嵌套块中可访问，在块外不可访问。

6. JavaScript 数据类型

6.1 基本数据类型
- 6.1.1 数值类型：包括整数和浮点数，例如10（整数）、3.14（浮点数）。JavaScript 中的数值可以进行各种算术运算。
- 6.1.2 字符串类型：用单引号''或双引号""括起来的字符序列，如'Hello'、"JavaScript"。可以进行字符串连接、截取、查找等操作。
- 6.1.3 布尔类型：只有true和false两个值，常用于条件判断和逻辑运算。
- 6.1.4 undefined：表示变量未被赋值，例如var x;，此时x的值为undefined。
- 6.1.5 null：表示空值，通常用于主动将变量设置为空，例如var y = null;，与undefined有所区别。
6.2 引用数据类型
- 6.2.1 对象：由键值对组成，例如var person = { name: 'John', age: 30 };，可以通过.或[]访问对象的属性，如person.name或person['name']，对象还可以包含方法（函数）。
- 6.2.2 数组：一种特殊的对象，用于存储多个值，如var colors = ['red', 'green', 'blue'];，可以通过索引访问数组元素，如colors[0]获取第一个元素'red'，数组有很多内置方法用于操作数组，如push()、pop()、slice()等。

7. JavaScript 对象

7.1 对象创建
- 7.1.1 字面量方式：如上述var person = { name: 'John', age: 30 };，直接使用花括号和键值对创建对象，简洁直观，常用于创建简单对象。
- 7.1.2 使用 new 关键字和构造函数：例如var obj = new Object(); obj.name = 'Tom';，先创建一个空对象，然后通过点语法添加属性和方法。JavaScript 还提供了一些内置的构造函数，如Array、Date等，用于创建特定类型的对象。
7.2 对象属性和方法
- 7.2.1 属性：通过.或[]访问，如person.name或person['name']，可以动态添加、修改和删除属性，例如person.city = 'New York';添加一个新属性，delete person.age;删除age属性。
- 7.2.2 方法：在对象中定义的函数，如var person = { name: 'John', sayHello: function() { console.log('Hello!'); } }; person.sayHello();，通过对象名和方法名调用方法，方法内部可以访问对象的属性，使用this关键字指代当前对象。

8. JavaScript 函数

8.1 函数定义
- 8.1.1 函数声明：function functionName(parameters) { statements; return value; }，例如function add(a, b) { return a + b; }，函数声明会被提升到当前作用域的顶部，所以可以在声明之前调用函数（但不推荐这样做，会影响代码可读性）。
- 8.1.2 函数表达式：var functionName = function(parameters) { statements; return value; }，如var multiply = function(x, y) { return x * y; }，函数表达式不会被提升，只有在执行到赋值语句时，函数才被定义，所以必须在赋值之后才能调用。
8.2 函数参数
- 8.2.1 形参：函数定义时的参数，如function add(a, b)中的a和b，用于接收函数调用时传递的实参。
- 8.2.2 实参：函数调用时传递的参数，例如add(3, 5)中的3和5，实参会赋值给对应的形参。
- 8.2.3 默认参数：可以为函数参数设置默认值，如function greet(name = 'Guest') { console.log('Hello,'+ name); }，如果调用函数时没有传递该参数，则使用默认值。

9. JavaScript 作用域

9.1 全局作用域：在函数外部定义的变量和函数具有全局作用域，可在任何地方访问，例如在 HTML 文档中引入的外部 JavaScript 文件中声明的全局变量和函数，在该文档的所有脚本中都可访问。全局作用域中的变量可能会导致命名冲突，尤其是在大型项目中，应谨慎使用。
9.2 函数作用域：在函数内部声明的变量和函数只在该函数内部及嵌套函数中可访问（对于var声明的变量）。函数作用域内的变量和函数与外部的同名变量和函数互不干扰，形成了一个相对独立的作用域空间。
9.3 块级作用域：let和const声明的变量具有块级作用域，只在声明所在的块（花括号内）及嵌套块中可访问。块级作用域使得变量的作用范围更加明确，有助于避免一些由于变量作用域不清晰导致的问题，例如循环中的变量污染等。

10. JavaScript 事件

10.1 事件类型
- 10.1.1 鼠标事件：如click（点击）、mouseover（鼠标移入）、mouseout（鼠标移出）等，常用于响应用户对页面元素的鼠标操作，例如document.getElementById('myButton').addEventListener('click', function() { console.log('Button clicked!'); });，当点击id为myButton的按钮时，控制台输出'Button clicked!'。
- 10.1.2 键盘事件：如keydown（按键按下）、keyup（按键抬起）等，可用于处理用户的键盘输入，例如document.addEventListener('keydown', function(event) { console.log('Key pressed:', event.key); });，当用户按下键盘上的键时，控制台输出按下的键。
- 10.1.3 页面加载事件：如load，当页面及其资源（如图片、脚本等）完全加载完成后触发，例如window.addEventListener('load', function() { console.log('Page loaded!'); });，在页面加载完成后控制台输出'Page loaded!'。
10.2 事件处理程序
- 10.2.1 内联事件处理：在 HTML 元素中直接指定事件处理函数，如<button onclick="myFunction()">Click Me</button>，当点击按钮时，会调用名为myFunction的 JavaScript 函数。这种方式将 HTML 和 JavaScript 紧密耦合，不利于代码的维护和管理，一般不推荐在大型项目中使用。
- 10.2.2 通过 JavaScript 代码绑定事件处理函数：使用addEventListener方法为元素绑定事件处理函数，如document.getElementById('myButton').addEventListener('click', myFunction);，这种方式将 HTML 和 JavaScript 分离，更便于代码的组织和维护，是推荐的事件处理方式。addEventListener可以为同一个事件绑定多个处理函数，它们会按照绑定的顺序依次执行。

11. JavaScript 字符串

11.1 字符串操作
- 11.1.1 连接字符串：使用+运算符，如var str1 = 'Hello'; var str2 = 'World'; var result = str1 + str2;，result的值为'HelloWorld'。也可以使用+=运算符进行字符串的追加，例如str1 += str2;，此时str1的值变为'HelloWorld'。
- 11.1.2 获取字符串长度：通过length属性获取字符串的长度，如var length = 'JavaScript'.length;，length的值为10。
- 11.1.3 提取子字符串：
  - substring(start, end)：提取从start索引（包含）到end索引（不包含）之间的子字符串，例如var str = 'Hello World'; var subStr = str.substring(0, 5);，subStr的值为'Hello'。
  - substr(start, length)：从start索引开始，提取length个字符的子字符串，如var subStr2 = str.substr(6, 5);，subStr2的值为'World'。
  - slice(start, end)：与substring类似，但slice支持负数索引，表示从字符串末尾开始计数，例如var subStr3 = str.slice(6, -1);，subStr3的值为'World'（不包含最后一个字符'd'）。

12. JavaScript 字符串模板

12.1 模板字面量：用反引号括起来，可以包含变量和表达式，如var name = 'John'; var greeting = Hello, ${name}!; console.log(greeting);，输出'Hello, John!'。模板字面量使得字符串的拼接更加方便和直观，尤其是在需要插入变量或表达式时，可以避免繁琐的字符串连接操作，提高代码的可读性。

13. JavaScript 运算

13.1 算术运算
- 加+、减-、乘*、除/、取余%，例如var x = 5 + 3;，x的值为8；var y = 10 % 3;，y的值为1。
- 递增++、递减--，分为前置和后置两种形式，前置++（--）会先将变量的值加（减）1，然后再使用该变量的值，例如var a = 5; var b = ++a;，此时a和b的值都为6；后置++（--）会先使用变量的值，然后再将变量的值加（减）1，例如var c = 5; var d = c++;，此时c的值为6，d的值为5。
13.2 比较运算
- 等于==、全等===、不等于!=、不全等!==、大于>、小于<、大于等于>=、小于等于<=。==在比较时会进行类型转换，例如'5' == 5结果为true；===不会进行类型转换，'5' === 5结果为false。比较运算常用于条件判断，如if (x > 3) { console.log("x is greater than 3"); }。
13.3 逻辑运算
- 与&&、或||、非!，例如if (x > 0 && y < 10) { console.log('Both conditions are true'); }，只有当x > 0和y < 10都为true时，才会执行花括号内的代码；if (x > 0 || y < 10) { console.log('At least one condition is true'); }，只要x > 0或y < 10其中一个为true，就会执行花括号内的代码；if (!x) { console.log('x is false'); }，当x为false（或转换为false的值，如0、null、undefined、空字符串等）时，执行花括号内的代码。

14.JavaScript 比较和逻辑运算符

比较运算符

比较运算符在逻辑语句中使用，以测定变量或值是否相等。x=5，下面的表格解释了比较运算符：

运算符	描述	比较	返回值	实例
==	等于	x==8	false	实例 »
==	等于	x==5	true	实例 »
===	绝对等于（值和类型均相等）	x==="5"	false	实例 »
===	绝对等于（值和类型均相等）	x===5	true	实例 »
!=	不等于	x!=8	true	实例 »
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）	x!=="5"	true	实例 »
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）	x!==5	false	实例 »
>	大于	x>8	false	实例 »
<	小于	x<8	true	实例 »
>=	大于或等于	x>=8	false	实例 »
<=	小于或等于	x<=8	true	实例 »

逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。给定 x=6 以及 y=3，下表解释了逻辑运算符：

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
\|\|	or	(x==5 \|\| y==5) 为 false
!	not	!(x==y) 为 true

条件运算符

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

语法

variablename=(condition)?value1:value2

例子

如果变量 age 中的值小于 18，则向变量 voteable 赋值 "年龄太小"，否则赋值 "年龄已达到"。

voteable=(age<18)?"年龄太小":"年龄已达到";

15. JavaScript for 循环

15.1 基本语法：

for (initialization; condition; increment/decrement) {
    // 循环体语句
}

initialization：初始化表达式，用于初始化循环变量，只在循环开始时执行一次。例如var i = 0;。
condition：条件表达式，每次循环开始前都会检查该条件，如果为true，则执行循环体，否则循环结束。例如i < 5;。
increment/decrement：递增或递减表达式，用于在每次循环体执行后更新循环变量的值。例如i++;。
示例：

收起

javascript

for (var i = 0; i < 5; i++) {
    console.log(i);
}

上述代码会输出0、1、2、3、4。
15.2 for...in 循环：用于遍历对象的可枚举属性（包括继承的可枚举属性），但不建议用于遍历数组（因为会遍历数组的索引，且顺序不一定是数组元素的顺序）。

收起

javascript

for (var prop in obj) {
    console.log(obj[prop]);
}

例如：

收起

javascript

var person = { name: 'John', age: 30 };
for (var key in person) {
    console.log(key + ': ' + person[key]);
}

输出：

收起

plaintext

name: John
age: 30

16. JavaScript while 循环

16.1 while 循环：

while (condition) {
    // 循环体语句
}

只要condition为true，就会一直执行循环体。

示例：

var i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

输出0、1、2、3、4。

16.2 do...while 循环：

do {
    // 循环体语句
} while (condition);

先执行一次循环体，然后再检查condition，如果为true，则继续执行循环体，直到condition为false。

示例：

var j = 0;
do {
    console.log(j);
    j++;
} while (j < 5);

输出0、1、2、3、4。

17. JavaScript break 和 continue 语句

17.1 break 语句：用于跳出当前循环（for、while、do...while），不再执行循环体中剩余的语句，直接执行循环后面的代码。
- 示例：

for (var k = 0; k < 5; k++) {
    if (k == 3) {
        break;
    }
    console.log(k);
}

输出0、1、2，当k等于3时，执行break，循环结束。

17.2 continue 语句：用于跳过当前循环的剩余语句，直接进入下一次循环的条件判断。
- 示例：

for (var l = 0; l < 5; l++) {
    if (l == 2) {
        continue;
    }
    console.log(l);
}

输出0、1、3、4，当l等于2时，执行continue，跳过本次循环体中console.log(l);语句，直接进行下一次循环。

18. JavaScript typeof

18.1 用途：用于检测变量的数据类型，返回值为字符串。
- 示例：

typeof 5; // 返回'number'
typeof 'Hello'; // 返回'string'
typeof true; // 返回'boolean'
typeof undefined; // 返回'undefined'
typeof null; // 返回'object'（这是JavaScript的一个历史遗留问题，实际上null是一个特殊值，不是对象）
typeof {}; // 返回'object'
typeof []; // 返回'object'（数组也是对象的一种特殊形式）
typeof function() {}; // 返回'function'

19. JavaScript 类型转换

19.1 显式类型转换：
- 数值转换：
  - Number('123')：将字符串转换为数值，如果字符串不能转换为有效的数值，则返回NaN（Not a Number）。例如Number('123')返回123，Number('abc')返回NaN。
  - parseInt('123')：将字符串转换为整数，从字符串开头开始解析，直到遇到非数字字符为止。例如parseInt('123abc')返回123，parseInt('abc123')返回NaN。还可以指定进制，如parseInt('10', 2)将二进制字符串'10'转换为十进制整数2。
  - parseFloat('3.14')：将字符串转换为浮点数，与parseInt类似，但可以解析小数点。例如parseFloat('3.14abc')返回3.14，parseFloat('abc3.14')返回NaN。
- 字符串转换：
  - String(123)：将其他类型的值转换为字符串，例如String(123)返回'123'。
  - 123.toString()：将数值转换为字符串，注意null和undefined没有toString方法，如果直接调用会报错。例如(123).toString()返回'123'。
- 布尔转换：
  - Boolean(0)：将其他类型的值转换为布尔值，以下值转换为false：0、null、undefined、空字符串''、NaN，其他值都转换为true。例如Boolean(0)返回false，Boolean('abc')返回true。
19.2 隐式类型转换：在某些运算或操作中自动发生，例如：
- '5' + 3：由于+运算符一侧是字符串，另一侧是数值，JavaScript 会将数值3隐式转换为字符串'3'，然后进行字符串连接，结果为'53'。
- '5' * 3：*运算符要求两侧都是数值，JavaScript 会将字符串'5'隐式转换为数值5，然后进行乘法运算，结果为15。

20. JavaScript 正则表达式

20.1 创建正则表达式：
- 字面量方式：/pattern/flags，例如/abc/gi，pattern是正则表达式的模式，flags是可选的标志，g表示全局匹配（查找所有匹配，而不是在找到第一个匹配后停止），i表示不区分大小写。
- 使用RegExp构造函数：new RegExp('pattern', 'flags')，例如new RegExp('abc', 'gi')，与字面量方式效果相同。
20.2 正则表达式方法：

test()：用于检测字符串是否匹配正则表达式，返回true或false。

var regex = /abc/;
regex.test('abcdef'); // 返回true
regex.test('defabc'); // 返回false

match()：返回匹配的结果，如果正则表达式带有g标志，则返回所有匹配的结果组成的数组，否则返回第一个匹配的结果及相关信息（如匹配的起始位置等）。

var str = 'abcdefabc';
str.match(/abc/g); // 返回['abc', 'abc']
str.match(/abc/); // 返回['abc', index: 0, input: 'abcdefabc', groups: undefined]

21. JavaScript 错误

21.1 错误类型：
- Error：基本错误类型，其他错误类型都继承自它。
- SyntaxError：语法错误，例如代码中存在拼写错误、缺少括号等语法问题时会抛出该错误。
- ReferenceError：引用错误，当使用未声明的变量或访问不存在的对象属性时会抛出该错误。
- TypeError：类型错误，例如对不支持的操作数进行操作，如'abc' + 5（字符串和数值相加），或者调用不存在的方法等情况会抛出该错误。
21.2 错误处理：
- 使用try...catch语句来捕获和处理错误，例如：

try {
    // 可能出错的代码
    var x = y; // y未声明，会抛出ReferenceError
} catch (error) {
    console.log(error.message); // 输出错误信息
}

try块中放置可能会抛出错误的代码，catch块用于捕获错误并进行处理，可以通过error对象获取错误的相关信息，如message属性获取错误消息。

22. JavaScript 调试

22.1 浏览器开发者工具：
- 大多数现代浏览器都提供了开发者工具，通常可以通过按F12键打开。开发者工具包含多个面板，如控制台（Console）、元素（Elements）、源代码（Sources）等。
- 在控制台面板中，可以查看代码运行时输出的信息（包括console.log等输出）、错误信息等，还可以直接在控制台中输入 JavaScript 代码进行测试。
- 在源代码面板中，可以查看页面加载的 JavaScript 文件，设置断点（在代码行号旁边点击即可设置断点），当代码执行到断点时，会暂停执行，此时可以查看变量的值、调用栈等信息，方便调试代码。
22.2 使用debugger语句：在代码中设置断点，当代码执行到debugger时，会暂停执行，进入调试模式（前提是浏览器开发者工具已打开且处于调试状态）。例如：

function myFunction() {
    var x = 5;
    debugger;
    var y = 10;
}
myFunction();

当执行myFunction函数时，代码执行到debugger语句会暂停，此时可以在开发者工具中进行调试操作。

23. JavaScript 变量提升

23.1 变量提升现象：
- 使用var声明的变量会发生变量提升，即变量声明会被提升到函数顶部，但赋值不会提升。例如：

console.log(x); // 输出undefined
var x = 10;

在上述代码中，虽然var x = 10;在console.log(x);之后，但由于变量提升，JavaScript 会将var x;提升到函数顶部，所以在console.log(x);时，x已经声明，但还未赋值，所以输出undefined。
let和const声明的变量不存在变量提升，在声明之前使用会报错。例如：

console.log(y); // 报错：ReferenceError: y is not defined
let y = 20;

24. JavaScript 严格模式

24.1 启用严格模式：
- 在函数内部开头添加'use strict';，则该函数内的代码将处于严格模式。例如：

function strictFunction() {
    'use strict';
    // 函数内的代码处于严格模式
}

也可以在整个脚本开头添加（对于模块脚本，默认处于严格模式），则整个脚本内的代码都处于严格模式。
24.2 严格模式的限制和变化：
- 禁止使用未声明的变量，在非严格模式下，给未声明的变量赋值会自动在全局作用域创建该变量，但在严格模式下会报错。
- 禁止删除变量或对象，在非严格模式下，可以使用delete操作符删除某些对象的属性，但在严格模式下，除了删除对象的可配置属性外，其他情况使用delete都会报错。
- 函数的参数不能有同名属性，在非严格模式下，函数参数可以像对象属性一样被赋值和修改，但在严格模式下，这种行为是不允许的，会报错。
- 不允许使用八进制字面量（如010），在严格模式下，必须使用0o10表示八进制数。

25. JavaScript 使用误区

25.1 常见错误和不良实践：
- 全局变量滥用：在全局作用域中随意声明变量，可能导致命名冲突，尤其是在大型项目中，多个脚本文件可能会相互影响。例如在一个脚本中声明了var globalVar = 10;，在另一个脚本中可能会不小心覆盖这个变量的值，或者使用了相同的变量名但含义不同，导致难以排查的问题。
- 不恰当的类型转换：如上述提到的隐式类型转换可能导致意外结果，开发者应该清楚地知道在什么情况下会发生类型转换，并根据需要进行显式类型转换，以避免出现不符合预期的结果。例如在进行数值计算时，如果涉及到字符串和数值的混合运算，应该先确保数据类型的正确性。
- 过度依赖隐式类型转换：使代码可读性变差，其他开发者可能不容易理解代码的意图和逻辑。例如if ('5' == 5)这种比较，虽然在 JavaScript 中可以正常工作，但不如if (Number('5') === 5)这样的代码清晰易懂，明确地展示了类型转换的过程。

26. JavaScript 表单

26.1 表单元素获取：
- 通过document.getElementById()方法根据id获取表单元素，例如var inputElement = document.getElementById('myInput');，获取id为myInput的输入框元素。
- 通过document.querySelector()方法使用 CSS 选择器获取表单元素，如var buttonElement = document.querySelector('button.submitButton');，获取类名为submitButton的按钮元素。
- 通过document.querySelectorAll()方法获取多个符合条件的表单元素，返回一个 NodeList 集合，例如var inputElements = document.querySelectorAll('input[type="text"]');，获取所有type为text的输入框元素。
26.2 表单元素的属性和方法：
- 属性：
  - value：获取或设置表单元素的值，例如inputElement.value获取输入框的值，inputElement.value = 'New Value';设置输入框的值。
  - checked：对于复选框（checkbox）和单选按钮（radio），用于获取或设置是否选中，例如checkboxElement.checked = true;选中复选框。
  - disabled：用于获取或设置表单元素是否禁用，例如buttonElement.disabled = true;禁用按钮。
- 方法：
  - focus()：使表单元素获得焦点，例如inputElement.focus();使输入框获得焦点，方便用户输入。
  - blur()：使表单元素失去焦点，例如inputElement.blur();。

27. JavaScript 表单验证

27.1 客户端验证：
- 在表单提交前，使用 JavaScript 检查输入内容是否符合要求，例如：

function validateForm() {
    var nameInput = document.getElementById('name');
    if (nameInput.value === '') {
        alert('请输入姓名');
        return false;
    }
    // 其他验证逻辑，如邮箱格式、密码强度等
    return true;
}

将onsubmit事件绑定到表单的onsubmit属性上，如<form onsubmit="return validateForm();">，当validateForm函数返回false时，表单不会提交，从而实现客户端的表单验证，减少无效数据提交到服务器。

28. JavaScript 验证 API

28.1 HTML5 表单验证属性：HTML5 提供了一些内置的表单验证属性，可以在表单元素上直接设置，无需编写大量 JavaScript 代码。例如：
- required：表示该表单元素为必填项，例如<input type="text" required>，如果用户未填写该输入框，表单提交时会自动提示必填。
- pattern：用于设置正则表达式模式，验证输入内容是否符合指定的格式，例如<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}">，用于验证邮箱格式。
- min、max：用于设置数值输入框的最小值和最大值，例如<input type="number" min="1" max="100">，限制输入的数值范围。
- 可以通过checkValidity()方法检查表单元素是否有效，通过validity属性获取表单元素的有效性状态信息，例如

var inputElement = document.getElementById('myInput');
inputElement.checkValidity(); // 返回true或false，表示元素是否有效
inputElement.validity; // 返回一个对象