赋值运算符应用错误
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;
}
}