JavaScript学习，常用常记（使用误区，表单，表单验证）

发布时间：2026-05-07 21:02

学习如何使用银行对账单和信用卡账单来生成报表 #生活技巧# #财务管理技巧# #家庭财务报表#

赋值运算符应用错误

if 中使用赋值运算符的等号 (=) 将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号 (==)。

比较运算符常见错误

在常规的比较中，数据类型是被忽略的

var x = 10;

var y = "10";

document.getElementById("demo").innerHTML = Boolean(x == y);

javascript

运行

在严格的比较运算中，=== 为恒等计算符，同时检查表达式的值与类型

这种错误经常会在 switch 语句中出现，switch 语句会使用恒等计算符(===)进行比较

加法与连接注意事项

加法是两个数字相加。连接是两个字符串连接。JavaScript 的加法和连接都使用 + 运算符。

var x = 10 + 5;

var x = 10 + "5";

javascript

运行

浮点型数据使用注意事项

JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定。

var x = 0.1;

var y = 0.2;

var z = x + y

if (z == 0.3)

var z = (x * 10 + y * 10) / 10;

javascript

运行

更多内容可以参考：JavaScript 中精度问题以及解决方案

JavaScript 字符串分行

JavaScript 允许我们在字符串中使用断行语句:

var x =

"Hello World!";

javascript

运行

但是，在字符串中直接使用回车换行是会报错的（可使用转义字符修改）

错误的使用分号

if 语句失去方法体，原 if 语句的方法体作为独立的代码块被执行，导致错误的输出结果。

Return 语句使用注意事项

JavaScript 默认是在代码的最后一行自动结束。以下两个实例返回结果是一样的(一个有分号一个没有):

function myFunction(a) {

var power = 10

return a * power

}

function myFunction(a) {

var power = 10;

return a * power;

}

javascript

运行

JavaScript 也可以使用多行来结束一个语句。但是第二个实例结果会返回 undefined。

function myFunction(a) {

var

power = 10;

return a * power;

}

function myFunction(a) {

var

power = 10;

return

a * power;

}

javascript

运行

由于 return 是一个完整的语句，所以 JavaScript 将关闭 return 语句。

数组中使用名字来索引

许多程序语言都允许使用名字来作为数组的索引。使用名字来作为索引的数组称为关联数组(或哈希)。JavaScript 不支持使用名字来索引数组，只允许使用数字索引。

var person = [];

person[0] = "John";

person[1] = "Doe";

person[2] = 46;

var x = person.length;

var y = person[0];

javascript

运行

在 JavaScript 中, 对象使用 名字作为索引。如果你使用名字作为索引，当访问数组时，JavaScript 会把数组重新定义为标准对象。执行这样操作后，数组的方法及属性将不能再使用，否则会产生错误:

var person = [];

person["firstName"] = "John";

person["lastName"] = "Doe";

person["age"] = 46;

var x = person.length;

var y = person[0];

var z = person["lastName"];

javascript

运行

定义数组元素，最后不能添加逗号

添加逗号虽然语法没有问题，但是在不同的浏览器可能得到不同的结果。

var colors = [5, 6, 7,]; //这样数组的长度可能为3 也可能为4。

正确的定义方式：

points = [40, 100, 1, 5, 25, 10];

定义对象，最后不能添加逗号

错误的定义方式：

websites = {site:"菜鸟教程", url:"www.runoob.com", like:460,}

正确的定义方式：

websites = {site:"菜鸟教程", url:"www.runoob.com", like:460}

Undefined 不是 Null

在 JavaScript 中, null 用于对象, undefined 用于变量，属性和方法。对象只有被定义才有可能为 null，否则为 undefined。如果我们想测试对象是否存在，在对象还没定义时将会抛出一个错误。

错误的使用方式：

if (myObj !== null && typeof myObj !== "undefined")

正确的方式是我们需要先使用 typeof 来检测对象是否已定义：

if (typeof myObj !== "undefined" && myObj !== null)

程序块作用域

在每个代码块中 JavaScript 不会创建一个新的作用域，一般各个代码块的作用域都是全局的。以下代码的的变量 i 返回 10，而不是 undefined：

for (var i = 0; i < 10; i++) {

}

return i;

javascript

运行

JavaScript 表单验证

判断表单字段(fname)值是否存在，如果存在，则弹出信息，否则阻止表单提交：

<!DOCTYPE html>

<html>

<head>

function validateForm() {

var x = document.forms["myForm"]["fname"].value;

if (x == null || x == "") {

alert("需要输入名字。");

return false;

}

</script>

</head>

<body>

名字: <input type="text" name="fname">

</form>

</body>

</html>

html

JavaScript 验证输入的数字

JavaScript 常用于对输入数字的验证：

function myFunction() {

var x, text;

x = document.getElementById("numb").value;

if (isNaN(x) || x < 1 || x > 10) {

text = "输入错误";

} else {

text = "输入正确";

}

document.getElementById("demo").innerHTML = text;

}

javascript

运行

HTML 表单自动验证

HTML 表单验证也可以通过浏览器来自动完成。如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：

</form>

html

数据验证

数据验证用于确保用户输入的数据是有效的。典型的数据验证有：必需字段是否有输入?用户是否输入了合法的数据?在数字字段是否输入了文本?大多数情况下，数据验证用于确保用户正确输入数据。数据验证可以使用不同方法来定义，并通过多种方式来调用。服务端数据验证是在数据提交到服务器上后再验证。客户端数据验证 side validation是在数据发送到服务器前，在浏览器上完成验证。

HTML 约束验证

HTML5 新增了 HTML 表单的验证方式：约束验证（constraint validation）。

约束验证是表单被提交时浏览器用来实现验证的一种算法。

HTML 约束验证基于：

HTML 输入属性CSS 伪类选择器DOM 属性和方法 约束验证 HTML 输入属性属性描述disabled规定输入的元素不可用max规定输入元素的最大值min规定输入元素的最小值pattern规定输入元素值的模式required规定输入元素字段是必需的type 规定输入元素的类型

完整列表，请查看 HTML 输入属性。

约束验证 CSS 伪类选择器选择器描述:disabled选取属性为 "disabled" 属性的 input 元素:invalid选取无效的 input 元素:optional选择没有"required"属性的 input 元素:required选择有"required"属性的 input 元素:valid选取有效值的 input 元素

完整列表，请查看 CSS 伪类。

上面用 js 表单验证判断表单字段(fname)值是否存在，多个表单使用同一个函数，传参后功能失效

function validateForm(form) {

var x = form.name.value;

if (x == null || x == "") {

alert("输入不能为空！");

return false;

}

onsubmit="return validateForm(this)"

javascript

运行

οnsubmit="return validateForm()" 为什么不是 οnsubmit="validateForm()" ？？

οnsubmit="validateForm()"：

能够调用 validateForm() 对表单进行验证，但是在验证不通过的情况下，并不能阻止表单提交。

οnsubmit="return validateForm()"：

当验证不通过时，返回 false，可以阻止表单提交。

为何？

原来 onsubmit 就像是 <form> 这个 html 对象的一个方法名，其值（一字符串）就是其方法体，默认返回 true；

οnsubmit="return validateForm()"

相当于:

Form.prototype.onsubmit = function() { return validateForm() };

这样复写了 onsubmit 的默认方法（默认返回 true），根据 validateForm() 的结果返回 true 或 false，当验证不通过时，返回 false，οnsubmit="return false;" 阻止表单提交。

JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

表单数据经常需要使用 JavaScript 来验证其正确性：

验证表单数据是否为空？验证输入是否是一个正确的email地址？验证日期是否输入正确？验证表单输入内容是否为数字型？

必填（或必选）项目

E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号

function validateForm(){

var x=document.forms["myForm"]["email"].value;

var atpos=x.indexOf("@");

var dotpos=x.lastIndexOf(".");

if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){

alert("不是一个有效的 e-mail 地址");

return false;

}

javascript

运行

网址：JavaScript学习，常用常记（使用误区，表单，表单验证） https://www.yuejiaxmz.com/news/view/1456186

⬅️上一篇：python常见误区“value

➡️下一篇：本草科普|中药=无毒? 警惕四种

JavaScript学习，常用常记（使用误区，表单，表单验证）

赋值运算符应用错误

比较运算符常见错误

加法与连接注意事项

浮点型数据使用注意事项

JavaScript 字符串分行

错误的使用分号

Return 语句使用注意事项

数组中使用名字来索引

定义数组元素，最后不能添加逗号

定义对象，最后不能添加逗号

Undefined 不是 Null

程序块作用域

JavaScript 表单验证

JavaScript 验证输入的数字

HTML 表单自动验证

数据验证

HTML 约束验证

JavaScript 表单验证

E-mail 验证

相关内容

随便看看

最新动态分享

热点动态分享

专题

推荐动态分享