目录
1.2.search 方法使用字符串。字符串参数会转换为正则表达式：
5.2.意识到数值会被意外转换为字符串或 NaN（Not a Number）。
1.1. HTML 表单验证能够通过 JavaScript 来完成。
三、正则表达、异常、使用误区、代码约定、this关键词
1.正则表达
正则表达式是由一个字符序列形成的搜索模式。
当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。
正则表达式可以是一个简单的字符，或一个更复杂的模式。
正则表达式可用于所有文本搜索和文本替换的操作。
var patt = /runoob/i/runoob/i 是一个正则表达式。
runoob 是一个正则表达式主体 (用于检索)。
i 是一个修饰符 (搜索不区分大小写)。
1.1.search() 方法使用正则表达式
<p>搜索字符串 "Runoob", 并显示匹配的起始位置：</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<p id="demo1"></p>
<script>
function myFunction() {
var str = "Visit Runoob!";
var n = str.search(/Runoob/i);
document.getElementById("demo").innerHTML = str;
document.getElementById("demo1").innerHTML = n;
}
</script>
1.2.search 方法使用字符串。字符串参数会转换为正则表达式：
<p>搜索字符串 "Runoob", 并显示匹配的起始位置：</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<p id="demo1"></p>
<script>
function myFunction() {
var str = "Visit Runoob!";
var n = str.search("Runoob");
document.getElementById("demo").innerHTML = str;
document.getElementById("demo1").innerHTML = n;
}
</script>
1.3.replace() 方法使用正则表达式
<p>替换 "microsoft" 为 "Runoob" :</p>
<button onclick="myFunction()">点我</button>
<p id="demo">Visit Microsoft!</p>
<script>
function myFunction() {
var str = document.getElementById("demo").innerHTML;
var txt = str.replace(/microsoft/i,"Runoob");
document.getElementById("demo").innerHTML = txt;
}
</script>结果输出为:
Visit Runoob!
1.4.replace() 方法使用字符串
var str = document.getElementById("demo").innerHTML;
var txt = str.replace("Microsoft","Runoob");结果输出为:
Visit Runoob!
- 正则表达式修饰符
修饰符 可以在全局搜索中不区分大小写:
| 修饰符 | 描述 |
|---|---|
| i | 执行对大小写不敏感的匹配。 |
| g | 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 |
| m | 执行多行匹配。 |
-
正则表达式模式
方括号用于查找某个范围内的字符：
| 表达式 | 描述 |
|---|---|
| [abc] | 查找方括号之间的任何字符。 |
| [0-9] | 查找任何从 0 至 9 的数字。 |
| (x|y) | 查找任何以 | 分隔的选项。 |
- 元字符是拥有特殊含义的字符：
| 元字符 | 描述 |
|---|---|
| \d | 查找数字。 |
| \s | 查找空白字符。 |
| \b | 匹配单词边界。 |
| \uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。 |
- 量词:
| 量词 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一个 n 的字符串。 |
| n* | 匹配任何包含零个或多个 n 的字符串。 |
| n? | 匹配任何包含零个或一个 n 的字符串。 |
1.5.test() 是一个正则表达式方法。
<!DOCTYPE html>
<html>
<body>
<p>检索下面段落中的一个 "e"：</p>
<p id="p01">The best things in life are free!</p>
<p id="demo"></p>
<script>
text = document.getElementById("p01").innerHTML;
document.getElementById("demo").innerHTML = /e/.test(text);
</script>
</body>
</html>
1.6.exec() 方法是一个正则表达式方法。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 正则表达式</h2>
<p id="demo"></p>
<script>
var obj = /e/.exec("The best things in life are free!");
document.getElementById("demo").innerHTML =
" 在文本: " + obj.input + " 的位置 " + obj.index + " 发现 " + obj[0] ;
</script>
</body>
</html>
2.JavaScript异常
try 语句使您能够测试代码块中的错误。
catch 语句允许您处理错误。
throw 语句允许您创建自定义错误。
finally 使您能够执行代码，在 try 和 catch 之后，无论结果如何。
2.1.try 和 catch
JavaScript 语句 try 和 catch 成对出现：
try {
供测试的代码块
}
catch(err) {
处理错误的代码块
} 实例：我们通过 adddlert 编写警告代码来故意制造了一个错误：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
try {
adddlert("欢迎您，亲爱的用户！");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
</body>
</html>
结果输出为：
adddlert is not defined
2.2.JavaScript 抛出错误
当发生错误时，JavaScript 通常会停止并产生错误消息。
技术术语是这样描述的：JavaScript 将抛出异常（抛出错误）。
JavaScript 实际上会创建带有两个属性的 Error 对象：name 和 message。
<!DOCTYPE html>
<html>
<body>
<p>请输入 5 到 10 之间的数字：</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">检测输入</button>
<p id="p01"></p>
<script>
function myFunction() {
var message, x;
message = document.getElementById("p01");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "是空的";
if(isNaN(x)) throw "不是数字";
x = Number(x);
if(x < 5) throw "太小";
if(x > 10) throw "太大";
}
catch(err) {
message.innerHTML = "输入：" + err;
}
}
</script>
</body>
</html>
2.3. finally 语句
finally 语句允许您在 try 和 catch 之后执行代码，无论结果：
try {
供测试的代码块
}
catch(err) {
处理错误的代码块
}
finally {
无论 try / catch 结果如何都执行的代码块
}<!DOCTYPE html>
<html>
<body>
<p>请输入 5 到 10 之间的数字：</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">检测输入</button>
<p id="p01"></p>
<script>
function myFunction() {
var message, x;
message = document.getElementById("p01");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "是空的";
if(isNaN(x)) throw "不是数字";
x = Number(x);
if(x > 10) throw "太大";
if(x < 5) throw "太小";
}
catch(err) {
message.innerHTML = "输入：" + err;
}
finally {
document.getElementById("demo").value = ""; //清空输入框内容
}
}
</script>
</body>
</html>
2.4.Error 对象
JavaScript 拥有当错误发生时提供错误信息的内置 error 对象。
error 对象提供两个有用的属性：name 和 message。
- Error 对象属性
| 属性 | 描述 |
|---|---|
| name | 设置或返回错误名 |
| message | 设置或返回错误消息（一条字符串） |
- Error Name Values
error 的 name 属性可返回六个不同的值：
| 错误名 | 描述 |
|---|---|
| EvalError | 已在 eval() 函数中发生的错误 |
| RangeError | 已发生超出数字范围的错误 |
| ReferenceError | 已发生非法引用 |
| SyntaxError | 已发生语法错误 |
| TypeError | 已发生类型错误 |
| URIError | 在 encodeURI() 中已发生的错误 |
- 范围错误
RangeError 会在您使用了合法值的范围之外的数字时抛出。
<p>您不能将数字的有效位数设置为500：</p>
<p id="demo">
<script>
var num = 1;
try {
num.toPrecision(500); //范围错误
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
</script>
- 引用错误
假如您使用（引用）了尚未声明的变量，则 ReferenceError 会被抛出：
<p>您不能使用不存在的变量的值：</p>
<p id="demo"></p>
<script>
var x;
try {
x = y + 1; //引用错误
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
</script>
- 语法错误
假如您计算带语法错误的代码，会 SyntaxError 被抛出：
<p>您无法评估包含语法错误的代码：</p>
<p id="demo"></p>
<script>
try {
eval("alert('Hello)"); 缺少 ' 会产生错误
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
</script>
- 类型错误
假如使用的值不在期望值的范围之内，则TypeError被抛出：
<p>您无法将数字转换为大写：</p>
<p id="demo"></p>
<script>
var num=1;
try{
num.toUpperCase(); //无法将数字转换为大写
}
catch(err){
document.getElementById("demo").innerHTML=err.name;
}
</script>
- URI错误
例如您在URI函数中使用非法字符，则URIError被抛出：
<p>使用 decodeURI() 无法解码某些字符：</p>
<p id="demo"></p>
<script>
try {
decodeURI("%%%");
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
</script>
- 非标准的 Error 对象属性
Mozilla 和 Microsoft 定义了非标准的 error 对象属性：
fileName (Mozilla)
lineNumber (Mozilla)
columnNumber (Mozilla)
stack (Mozilla)
description (Microsoft)
number (Microsoft)
<p id="demo"></p>
<p>开启调试工具，在代码执行到第三行前会停止执行。</p>
<script>
var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>
3.严格模式的限制(use strict)
"use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。
它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。
"use strict" 的目的是指定代码在严格条件下执行。
严格模式下你不能使用未声明的变量。
<body>
<script>
"use strict";
var x = 3.14;
delete x; // 报错 不允许删除变量或对象。
"use strict";
function x(p1, p2) {};
delete x; // 报错 不允许删除函数。
"use strict";
function x(p1, p1) {}; // 报错 不允许变量重名
"use strict";
var x = 010; // 报错 不允许使用八进制
"use strict";
var x = \010; // 报错 不允许使用转义字符
"use strict";
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});
obj.x = 3.14; // 报错 不允许对只读属性赋值:
"use strict";
var obj = {get x() {return 0} };
obj.x = 3.14; // 报错 不允许对一个使用getter方法读取的属性进行赋值
"use strict";
delete Object.prototype; // 报错 不允许删除一个不允许删除的属性
"use strict";
var eval = 3.14; // 报错 变量名不能使用 "eval" 字符串
"use strict";
var arguments = 3.14; // 报错 变量名不能使用 "arguments" 字符串
"use strict";
with (Math){x = cos(2)}; // 报错 不允许使用以下这种语句
"use strict";
eval ("var x = 2");
alert (x); // 报错 由于一些安全原因，在作用域 eval() 创建的变量不能被调用
"use strict";
var public = 1500; // 报错 使用 "use strict": 严格模式不允许使用保留关键字。
</script>
</body>
为了向将来Javascript的新版本过渡，严格模式新增了一些保留关键字：
- implements
- interface
- let
- package
- private
- protected
- public
- static
- yield
| "use strict" 指令只允许出现在脚本或函数的开头。 |
4.JavaScript使用误区
4.1.赋值运算符应用错误
在 JavaScript 程序中如果你在 if 条件语句中使用赋值运算符的等号 (=) 将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号 (==)。
<p id="demo"></p>
<script>
var x = 0; // if 条件语句返回 false (是我们预期的)因为 x 不等于 10:
document.getElementById("demo").innerHTML = Boolean(x == 10);
</script>返回结果：false
if 条件语句返回 true (不是我们预期的)因为条件语句执行为 x 赋值 10，10 为 true:
var x = 0;
if (x = 10)if 条件语句返回 false (不是我们预期的)因为条件语句执行为 x 赋值 0，0 为 false:
var x = 0;
if (x = 0)4.2.比较运算符常见错误
在常规的比较中，数据类型是被忽略的，以下 if 条件语句返回 true：
var x = 10;
var y = "10";
if (x == y)在严格的比较运算中，=== 为恒等计算符，同时检查表达式的值与类型，以下 if 条件语句返回 false：
var x = 10;
var y = "10";
if (x === y)这种错误经常会在 switch 语句中出现，switch 语句会使用恒等计算符(===)进行比较:
以下实例会执行 alert 弹窗：
var x = 10;
switch(x) {
case 10: alert("Hello");
}
以下实例由于类型不一致不会执行 alert 弹窗：
var x = 10;
switch(x) {
case "10": alert("Hello");
}4.3.加法与连接注意事项
加法是两个数字相加。连接是两个字符串连接
var x = 10 + 5; // x 的结果为 15
var x = 10 + "5"; // x 的结果为 "105"var x = 10;
var y = 5;
var z = x + y; // z 的结果为 15
var x = 10;
var y = "5";
var z = x + y; // z 的结果为 "105"4.4.浮点型数据使用注意事项
JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。
所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定：
var x = 0.1;
var y = 0.2;
var z = x + y // z 的结果为 0.30000000000000004
if (z == 0.3) // 返回 false为解决以上问题，可以用整数的乘除法来解决：
var x = 0.1;
var y = 0.2;
var z = (x * 10 + y * 10) / 10; // z 的结果为 0.34.5.JavaScript 字符串分行
var x = "Hello \
World!";示例1：
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
var power = 10;
return a * power;
}
</script>返回结果： 550
JavaScript 也可以使用多行来结束一个语句。
以下实例返回相同的结果:
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
var
power = 10;
return a * power;
}
</script>返回结果： 550
4.6.数组中使用名字来索引
许多程序语言都允许使用名字来作为数组的索引。使用名字来作为索引的数组称为关联数组(或哈希)。
JavaScript 不支持使用名字来索引数组，只允许使用数字索引。
<p id="demo"></p>
<script>
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
// person[0] 返回 "John" ， person.length 返回 3
document.getElementById("demo").innerHTML = person[0] + " " + person.length;
</script>在 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] 返回 undefined4.7.Undefined 不是 Null
在 JavaScript 中, null 用于对象, undefined 用于变量，属性和方法。
对象只有被定义才有可能为 null，否则为 undefined。
如果我们想测试对象是否存在，在对象还没定义时将会抛出一个错误。
错误的使用方式：
if (myObj !== null && typeof myObj !== "undefined") 正确的方式是我们需要先使用 typeof 来检测对象是否已定义：
if (typeof myObj !== "undefined" && myObj !== null) 4.8.程序块作用域
在每个代码块中 JavaScript 不会创建一个新的作用域，一般各个代码块的作用域都是全局的。
以下代码的的变量 i 返回 10，而不是 undefined：
<p id="demo"></p>
<script>
for (var i = 0; i < 10; i++) {
// some code
}
document.getElementById("demo").innerHTML = i;
</script>5.JavaScript 样式指南和代码约定
1.请始终在运算符（ = + - * / ）周围以及逗号之后添加空格：
2.请始终使用对代码块缩进使用 4 个空格：
3.请始终以分号结束单条语句：
4.针对复杂语句（compound）的通用规则：
请在第一行的结尾处写开括号
请在开括号前使用一个空格
请在新行上写闭括号，不带前导空格
请不要以分号来结束复杂语句
5.对象定义的通用规则：
把开括号与对象名放在同一行
在每个属性与其值之间使用冒号加一个空格
不要在最后一个属性值对后面写逗号
请在新行上写闭括号，不带前导空格
请始终以分号结束对象定义
6.行长度小于 80
7.命名约定
变量和函数名以驼峰大小写来写
全局变量使用大写（我们不这样做，但是相当普遍）
常量（比如 PI）使用大写
8.在 HTML 中加载 JavaScript
<script src="myscript.js"></script>9.访问 HTML 元素
使用“不整洁的” HTML 样式的后果，也许是导致 JavaScript 错误。
这两条 JavaScript 语句会产生不同的结果：
var obj = getElementById("Demo")
var obj = getElementById("demo") 10.请避免全局变量、new、===、eval()
11.请不要声明数值、字符串或布尔对象
var x = "Bill"; // x 是字符串
var y = new String("Bill"); // y 是对象
document.getElementById("demo").innerHTML = x===y;// 结果为 false，因为 x 是字符串，而 y 是对象。
12.用字符串减去字符串，不会产生错误而是返回 NaN（Not a Number）：
13.用 default 来结束 switch
14.避免使用 eval()
eval() 函数用于将文本作为代码来允许。在几乎所有情况下，都没有必要使用它。
因为允许任意代码运行，它同时也意味着安全问题。
15.避免使用 with。
它对速度有负面影响。它也将混淆 JavaScript 作用域。严格模式中不允许 with 关键词。
5.1.请勿使用 new Object()
请使用 {} 来代替 new Object()
请使用 "" 来代替 new String()
请使用 0 来代替 new Number()
请使用 false 来代替 new Boolean()
请使用 [] 来代替 new Array()
请使用 /()/ 来代替 new RegExp()
请使用 function (){}来代替 new Function()
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x1 = {}; // 新对象
var x2 = ""; // 新的原始字符串值
var x3 = 0; // 新的原始数值
var x4 = false; // 新的原始布尔值
var x5 = []; // 新的数组对象
var x6 = /()/; // 新的正则表达式
var x7 = function(){};// 新的函数对象
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>";
</script>
</body>
</html>
执行结果：
x1: object
x2: string
x3: number
x4: boolean
x5: object
x6: object
x7: function
5.2.意识到数值会被意外转换为字符串或 NaN（Not a Number）。
var x = 5 + 7; // x.valueOf() 是 12, typeof x 是数值
var x = 5 + "7"; // x.valueOf() 是 57, typeof x 是字符串
var x = "5" + 7; // x.valueOf() 是 57, typeof x 是字符串
var x = 5 - 7; // x.valueOf() 是 -2, typeof x 是数值
var x = 5 - "7"; // x.valueOf() 是 -2, typeof x 是数值
var x = "5" - 7; // x.valueOf() 是 -2, typeof x 是数值
var x = 5 - "x"; // x.valueOf() 是 NaN, typeof x 是数值5.3.减少循环中的活动
循环每迭代一次，循环中的每条语句，包括 for 语句，都会被执行。能够放在循环之外的语句或赋值会使循环运行得更快。
差的代码：
var i;
for (i = 0; i < arr.length; i++) {
更好的代码：
var i;
var l = arr.length;
for (i = 0; i < l; i++) {
5.4.减少 DOM 访问
与其他 JavaScript 相比，访问 HTML DOM 非常缓慢。
假如您期望访问某个 DOM 元素若干次，那么只访问一次，并把它作为本地变量来使用：
<p id="demo"></p>
<script>
var obj;
obj = document.getElementById("demo");
obj.innerHTML = " Hello";
</script>尽量保持 HTML DOM 中较少的元素数量。
这么做总是会提高页面加载，并加快渲染（页面显示），尤其是在较小的设备上。
每一次试图搜索 DOM（比如 getElementsByTagName）都将受益于一个较小的 DOM。
5.5.避免不必要的变量
请不要创建不打算存储值的新变量。
通常您可以替换代码：
var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName; 用这段代码：
document.getElementById("demo").innerHTML = firstName + " " + lastName
5.6.延迟 JavaScript 加载
请把脚本放在页面底部，使浏览器首先加载页面。
脚本在下载时，浏览器不会启动任何其他的下载。此外所有解析和渲染活动都可能会被阻塞。
HTTP 规范定义浏览器不应该并行下载超过两种要素。
一个选项是在 script 标签中使用 defer="true"。defer 属性规定了脚本应该在页面完成解析后执行，但它只适用于外部脚本。
如果可能，您可以在页面完成加载后，通过代码向页面添加脚本：
<script>
window.onload = downScripts;
function downScripts() {
var element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
}
</script>6.this 关键词
JavaScript this 关键词指的是它所属的对象。
它拥有不同的值，具体取决于它的使用位置：
- 在方法中，this 指的是所有者对象。
- 单独的情况下，this 指的是全局对象。
- 在函数中，this 指的是全局对象。
- 在函数中，严格模式下，this 是 undefined。
- 在事件中，this 指的是接收事件的元素。
像 call() 和 apply() 这样的方法可以将 this 引用到任何对象。
6.1.方法中的 this
在对象方法中，this 指的是此方法的“拥有者”。在本页最上面的例子中，this 指的是 person 对象。
person 对象是 fullName 方法的拥有者。
<p>在本例中，<b>this</b> 代表 <b>person</b> 对象。</p>
<p>因为 person 对象“拥有” fullName 方法。</p>
<p id="demo"></p>
<script>
// 创建对象：
var person = {
firstName: "Bill",
lastName : "Gates",
id : 678,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// 显示来自对象的数据：
document.getElementById("demo").innerHTML = person.fullName();
</script>
6.2.单独的 this
在单独使用时，拥有者是全局对象，因此 this 指的是全局对象。
在浏览器窗口中，全局对象是 [object Window]：
在本例中，this 引用 window 对象：
<p id="demo"></p>
<script>
var x = this;
document.getElementById("demo").innerHTML = x;
</script>执行结果：
[object Window]
严格模式下，如果单独使用，this 也是指向全局(Global)对象。
<p id="demo"></p>
<script>
"use strict";
var x = this;
document.getElementById("demo").innerHTML = x;
</script>执行结果：
[object Window]
6.3.函数中使用this(严格模式)
严格模式下函数是没有绑定到this上，这时候this是undefined。
<p id="demo"></p>
<script>
"use strict";
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
return this;
}
</script>执行结果：
undefined
6.4.事件中的this
在HTML事件句柄中，this指向了接收事件的HTML元素：
<button onclick="this.style.display='none'">点我后我就消失了</button>6.5.对象方法中绑定
下面实例中，this是person对象，person对象是函数的所有者：
<p id="demo"></p>
<script>
var person = { // 创建一个对象
firstName : "John",
lastName : "Doe",
id : 5566,
myFunction : function() {
return this;
}
};
document.getElementById("demo").innerHTML = person.myFunction();// 显示表单数据
</script>执行结果： [object Object]
<p id="demo"></p>
<script>
var person = { // 创建一个对象
firstName : "John",
lastName : "Doe",
id : 5566,
myFunction : function() {
return this.firstName + " " + this.lastName; //this.firstName表示this (person)对象的firstName属性
}
};
document.getElementById("demo").innerHTML = person.myFunction();//显示表单数据
</script>执行结果： John Doe
显式函数绑定
在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象
<p id="demo"></p>
<script>
var person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;//this 将指向 person2, 即便它是 person1 的方法：
}
}
var person2 = {
firstName:"John",
lastName: "Doe",
}
var x = person1.fullName.call(person2);
document.getElementById("demo").innerHTML = x;
</script>执行结果： John Doe
四、表单
1.表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
数据验证可以使用不同方法来定义，并通过多种方式来调用。
服务端数据验证是在数据提交到服务器上后再验证。
客户端数据验证是在数据发送到服务器前，在浏览器上完成验证。
1.1. HTML 表单验证能够通过 JavaScript 来完成。
如果某个表单字段（fname）是空的，那么该函数会发出一条警告消息，并返回 false，以防止表单被提交出去：
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x==null || x == "") {
alert("必须填写姓名！");
return false;
}
}
</script>
<form name="myForm" action="/demo/action_page.php" onsubmit="return validateForm()" method="post">
姓名：<input type="text" name="fname">
<input type="submit" value="提交">
</form>
1.1.验证输入的数字
<p>请输入 1 与 10 之间的数：</p>
<input id="numb">
<button type="button" onclick="myFunction()">提交</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
x = document.getElementById("numb").value;// 获取 id="numb" 的输入字段的值
if (isNaN(x) || x < 1 || x > 10) { // 如果 x 不是数字或小于 1 或大于 10
text = "输入无效: " + x;
} else {
text = "输入有效: " + x;
}
document.getElementById("demo").innerHTML = text;
}
</script>
1.2.HTML 表单自动验证
HTML 表单验证也可以通过浏览器来自动完成。
如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：
<body>
<form action="demo_form.php" method="post">
<input type="text" name="fname" required="required">
<input type="submit" value="提交">
</form>
<p>点击提交按钮，如果输入框是空的，浏览器会提示错误信息。</p>
</body>
1.3.E-mail验证
输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：
<script>
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;
}
}
</script>
<body>
<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
</body>
2. 验证 API
2.1.约束验证 DOM 方法
| Property | Description |
|---|---|
| checkValidity() | 如果 input 元素中的数据是合法的返回 true，否则返回 false。 |
| setCustomValidity() | 设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。 使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成true，则 checkValidity 总是会返回false。如果要重新判断需要取消自定义提示，方式如下： |
checkValidity() 方法
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</button>
<p>如果输入的数字小于 100 或大于300，会提示错误信息。</p>
<p id="demo"></p>
<script>
function myFunction() {
var inpObj = document.getElementById("id1");
if (inpObj.checkValidity() == false) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
} else {
document.getElementById("demo").innerHTML = "输入正确";
}
}
</script>
2.2.约束验证 DOM 属性
| 属性 | 描述 |
|---|---|
| validity | 布尔属性值，返回 input 输入值是否合法 |
| validationMessage | 浏览器错误提示信息 |
| willValidate | 指定 input 是否需要验证 |
-
Validity 属性
input 元素的 validity 属性包含一系列关于 validity 数据属性:
| 属性 | 描述 |
|---|---|
| customError | 设置为 true, 如果设置了自定义的 validity 信息。 |
| patternMismatch | 设置为 true, 如果元素的值不匹配它的模式属性。 |
| rangeOverflow | 设置为 true, 如果元素的值大于设置的最大值。 |
| rangeUnderflow | 设置为 true, 如果元素的值小于它的最小值。 |
| stepMismatch | 设置为 true, 如果元素的值不是按照规定的 step 属性设置。 |
| tooLong | 设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。 |
| typeMismatch | 设置为 true, 如果元素的值不是预期相匹配的类型。 |
| valueMissing | 设置为 true，如果元素 (required 属性) 没有值。 |
| valid | 设置为 true，如果元素的值是合法的。 |
- rangeOverflow 属性 ，如果输入的值大于 100，显示一个信息：
<input id="id1" type="number" max="100">
<button onclick="myFunction()">验证</button>
<p>如果输入的数字大于 100 ( input 的 max 属性), 会显示错误信息。</p>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeOverflow) {
txt = "输入的值太大了";
} else {
txt = "输入正确";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
- rangeUnderflow 属性 ，如果输入的值小于 100，显示一个信息：
<input id="id1" type="number" min="100" required>
<button onclick="myFunction()">验证</button>
<p>如果输入的数字小于 100 ( input 的 min 属性), 会显示错误信息。</p>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
var inpObj = document.getElementById("id1");
if(!isNumeric(inpObj.value)) {
txt = "你输入的不是数字";
} else if (inpObj.validity.rangeUnderflow) {
txt = "输入的值太小了";
} else {
txt = "输入正确";
}
document.getElementById("demo").innerHTML = txt;
}
// 判断输入是否为数字
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>