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

最新推荐文章于 2022-04-09 07:46:47 发布

hhjian6666

最新推荐文章于 2022-04-09 07:46:47 发布

阅读量416

点赞数

分类专栏： ***JavaScript + jQuery***Study

本文链接：https://blog.csdn.net/qq_30796379/article/details/89040460

版权

***JavaScript + jQuery***Study 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

赋值运算符应用错误

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

比较运算符常见错误

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

var x = 10;
var y = "10";
document.getElementById("demo").innerHTML = Boolean(x == y);//true

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

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

加法与连接注意事项

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

var x = 10 + 5;          // x 的结果为 15
var x = 10 + "5";        // x 的结果为 "105"

浮点型数据使用注意事项

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

var x = 0.1;
var y = 0.2;
var z = x + y            // z 的结果为 0.3
if (z == 0.3)            // 返回 false

var z = (x * 10 + y * 10) / 10;       // z 的结果为 0.3

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

JavaScript 字符串分行

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

var x =
"Hello World!";

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

错误的使用分号

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

Return 语句使用注意事项

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

function myFunction(a) {
    var power = 10  
    return a * power
}

function myFunction(a) {
    var power = 10;
    return a * power;
}

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

function myFunction(a) {
    var
    power = 10;  
    return a * power;
}

function myFunction(a) {
    var
    power = 10;  
    return
    a * power;
}

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

数组中使用名字来索引

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

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;         // person.length 返回 3
var y = person[0];             // person[0] 返回 "John"

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

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;         // person.length 返回 0
var y = person[0];             // person[0] 返回 undefined
var z = person["lastName"];    //person["lastName"] 返回 "Doe"

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

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

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++) {
    // some code
}
return i;

JavaScript 表单验证

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script>
	function validateForm() {
		var x = document.forms["myForm"]["fname"].value;
		if (x == null || x == "") {
			alert("需要输入名字。");
			return false;
		}
	}
	</script>
</head>
	
<body>
	<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
		名字: <input type="text" name="fname">
		<input type="submit" value="提交">
	</form>
</body>
</html>

JavaScript 验证输入的数字

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

function myFunction() {
    var x, text;
    x = document.getElementById("numb").value;// 获取 id="numb" 的值
	
    if (isNaN(x) || x < 1 || x > 10) {// 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10
        text = "输入错误";
    } else {
        text = "输入正确";
    }
    document.getElementById("demo").innerHTML = text;
}

HTML 表单自动验证

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

<form action="demo_form.php" method="post">
  <input type="text" name="fname" required="required">
  <input type="submit" value="提交">
</form>

数据验证

数据验证用于确保用户输入的数据是有效的。
典型的数据验证有：
- 必需字段是否有输入?
- 用户是否输入了合法的数据?
- 在数字字段是否输入了文本?
大多数情况下，数据验证用于确保用户正确输入数据。
数据验证可以使用不同方法来定义，并通过多种方式来调用。
服务端数据验证是在数据提交到服务器上后再验证。
客户端数据验证 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)"

ο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;
  }
}

hhjian6666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript学习，常用常记（使用误区，表单，表单验证）

赋值运算符应用错误if 中使用赋值运算符的等号 (=) 将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号 (==)。比较运算符常见错误在常规的比较中，数据类型是被忽略的var x = 10;var y = "10";document.getElementById("demo").innerHTML = Boolean(x == y);//true在严格的比较运...
复制链接

扫一扫