目录
1.4.2 使用document.write()将内容写入到html文档
1、概述
1.1 什么是JavaScript?
1.1.1 概念
JavaScript 是脚本语言,是一种解释性脚本语言(代码不进行预编译)
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript
插入 HTML 页面后,可由所有的现代浏览器执行
1.1.2 作用
1、为网页添加各式各样的动态功能,
2、为用户提供更流畅美观的浏览效果。
通常
JavaScript脚本是通过嵌入在HTML中来实现自身的功能
的
层叠样式表(英文全称:Cascading Style Sheets)
层叠:多个样式可以作用在同一个html的元素上,同时生效
1.3 JavaScript的用法
JavaScript
通常简称为
js,
或者
js
脚本。
1.3.1 HTML页面中的JavaScript
在
html
页面中的脚本必须位于
script
围堵标签之间,
script
标签放在
head
中可以,
body
中也可以, 放在最后也可以,对
位置要求不严格
。
我们可以在
HTML
文档中放入
不限数量
的
script
标签,通常的做法是把内容统一
放入head或者页
面底部
。这样就可以把它们安置到同一处位置,不会干扰页面的内容。
PS:
有些案例中可能会
在 script 标签中出现type="text/javascript"。现在完全可以省略了
,
JavaScript
已
经 是所有现代浏览器以及
HTML5
中的
默认脚本语言
。
![](https://i-blog.csdnimg.cn/blog_migrate/06f9440c8d3f0736ffec8c8666a52e1e.png)
1.3.2 外部的JavaScript
可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部
JavaScript
文件的文件
扩展名是 .js。
当我们使用外部文件时,在
HTML
页面的
script
标签的
"src"
属性中设置该
.js
文件:
PS:外部脚本不能包含 script 标签
。
1.3.3 标签属性中的JavaScript
直接编写在
HTML
标签的一些属性中,用于简单的
JavaScript
代码的编写,用的偏少。
![](https://i-blog.csdnimg.cn/blog_migrate/f4c56c5c2103834d0ced9a7d9f40126f.png)
1.4 JavaScript显示数据
1.4.1 使用window.alert()弹出框
PS
:这里的
window
可以省略,等价于
alert("hello world");
1.4.2 使用document.write()将内容写入到html文档
1.4.3 使用innerHTML写入到html元素
1.4.4 使用console.log写入到浏览器控制台
2、JavaScript的注释
JavaScript
注释与
java
的单行和多行注释相同。
单行注释以 //
开头。
多行注释以 /*
开始,以
*/
结尾。
3、JavaScript基本语法
JavaScript
是一个脚本语言。它是一个轻量级,但功能强大的编程语言。
JavaScript
语法跟
Java
很相似,但是也有区别。
JavaScript是弱语言类型,即有些时候有些错误不影响运行
,但是依然推荐大家按照规范去编写代码。
3.1 JavaScript变量
声明变量的关键字:
var
语法:var
变量名称;
var
myCompany
;
//
声明变量
myCompany
=
'
你好
'
;
//
赋值
var
x
=
5
;
//
声明的同时赋值
var
y
=
6
;
var
z
=
x
+
y
;
//
变量也可以存储表达式
变量的命名规则:
变量必须以字母开头
变量也能以
$
和
_
符号开头
变量名称对大小写敏感(
y
和
Y
是不同的变量)
不能使用关键字保留字
变量的命名规范:
见名知意 。例如:
breadPirce,userService
等,避免无意义的
a,b,c
等
推荐驼峰命名法,即第一个单词的首字母小写,以后每个单词的首字母大写。例如
lastName
3.2 JavaScript的语句
JavaScript
语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
JavaScript
是脚本语言,浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执 行前对所有代码进行编译。
JavaScript
中也有分支结构和循环结构,语法与
java类似
PS
:一般一行只写一条语句,每句结尾编写分号结束。
3.3 JavaScript的数据类型
3.3.1 值类型(基本类型)
3.3.1.1
字符串
String
字符串是存储字符的变量。字符串可以是引号中的任意文本。必须使用单引号或双引号;
var
gameName
=
"
斗罗大陆
"
;
var
hairstylist
=
'nacy'
;
//PS
:注意引号嵌套
var
message1
=
'
我的发型师是
"tony"
老师
'
;
var
message2
=
"
我的发型师是
'tony'
老师
"
;
3.3.1.2
数字
Number
JavaScript
只有一种数字类型。数字可以带小数点,也可以不带:
var
breadPrice
=
15.9
;
var
gameLevel
=
66
;
//
极大或极小的数字可以通过科学计数法来书写:
var
myMoney1
=
666e5
;
//66600000
var
myMoney2
=-
666e-5
;
//-0.00666
3.3.1.3
布尔
Boolean
只能有两个值:
true
或
false
。
var
isUnderstand
=
true
;
var
isSingle
=
false
;
3.3.1.4
空
Null
var
email
=
null
;
3.3.1.5
未定义
Undefined
表示变量不含有值。可以通过将变量的值设置为
null
来清空变量。
共有
4
中情况会出现
undefifined
的值
1
、变量声明且没有赋值;
var
obj
;
alert
(
obj
);
//obj
值为
undefined
2
、获取对象中不存在的属性时;
var
obj
;
alert
(
obj
.
name
);
//
报错信息:
"Uncaught TypeError: Cannot read property 'name' of
undefined"
3
、函数需要实参,但是调用时没有传值,形参是
undefifined
;
4
、函数调用没有返回值或者
return
后没有数据,接收函数返回的变量是
undefined
。
function
printNum
(
num
){
alert
(
num
);
}
var
result
=
printNum
();
//
调用函数未传递参数,执行函数的时候
num
的值是
undefined
alert
(
result
);
//result
的值也是
undefined
,因为
printNum()
没有返回值
3.3.1.6 Symbol
Symbol
是
ES6
引入了一种新的原始数据类型,表示独一无二的值
3.3.2 引用数据类型:
对象(Object)、数组(Array)、函数(Function)
3.3.3 JavaScript拥有动态类型
JavaScript
拥有动态类型。这意味着相同的变量可用作不同的类型
var
param
;
// param
类型为
undefined
param
=
5
;
//
现在
param
为数字
param
=
"John"
;
//
现在
param
为字符串
PS
:
虽然
JavaScript
支持这种写法,但是不推荐这种写法。尽量开始声明变量的时候就确定好将要 盛放什么类型的值,以后尽量不随意改变。
3.4 JavaScript中的运算符
算数运算符:
+ - * / %
、
++
、
--
赋值运算符:
=
、
+=
、
-=
、
*=
、
/=
、
%=
字符串的连接符:
+
逻辑运算符:
&& ||
!
条件运算符:?
:
比较运算符:
==
、!
=
、
>
、
<
、
>=
、
<=
强调两个新的比较运算符:
var
x
=
5
;
var
res
=
(
x
===
5
);
// true
res
=
(
x
===
'5'
);
// false
res
=
(
x
!==
5
);
// false
res
=
(
x
!==
'5'
);
// true
4、JavaScript对象
4.1 JavaScript的String对象
4.1.1 String对象属性--长度属性
var
str
=
"
我喜欢看
NBA,
最喜欢的球员是
\'
小学生
\'
库里
"
;
//
注意:字符串中出现的
\'
是一个字符,转义为一个单引号
console
.
log
(
str
);
//
获取字符串的长度:,切记:所有转移符号的长度都算一个,即
\'
长度为
1
console
.
log
(
"
字符串的长度
="
+
str
.
length
);
//22
4.1.2 String对象方法
4.2 JavaScript的Array对象
4.2.1
声明数组
![](https://i-blog.csdnimg.cn/blog_migrate/6aa11f0b2866a0c08bbc1f781325ddc2.png)
4.2.2 数组的长度 length属性
4.3 JavaScript的Date对象
4.3.1 创建日期对象
var date1 = new Date();
var date2 = new Date(milliseconds);
var date3 = new Date(dateString);
var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);
![](https://i-blog.csdnimg.cn/blog_migrate/c50b8bfed89f9bb2a6b20e5b63c74430.png)
4.3.2 日期对象的常用方法
![](https://i-blog.csdnimg.cn/blog_migrate/1cc6065d8cca263bef4ccfd5a02bebdf.png)
4.4 JavaScript的Math对象
4.4.1 Math常用属性
![](https://i-blog.csdnimg.cn/blog_migrate/07cbf5857d9ea10f0e9242755e04645b.png)
4.4.2 Math常用方法
![](https://i-blog.csdnimg.cn/blog_migrate/a62a02535834e75575316b87b68482e7.png)
5 JavaScript调试
6、JavaScript的函数
6.1 JavaScript的常用全局函数
JavaScript
中有个常用的
全局属性NaN,即非数值
(
Not a Number
),
NaN
属性用于引用特殊的非数字 值,该属性指定的并不是不合法的数字。
6.1.1 isNaN(param)
用于检查其参数是否是非数字值。
是数值的返回false,不是数值返回true。
console
.
log
(
isNaN
(
666
));
//false
console
.
log
(
isNaN
(
1
+
2
));
//false
console
.
log
(
isNaN
(
"hello"
));
//true
6.1.2 parseFloat(String)
可解析一个字符串,并返回一个浮点数。该函数指定
字符串中的首个字符是否是数字。如果是,则对字符串进行解析,直到到达数字的末端为止,然后以数字返回该数字
,而不是作为字符串。
![](https://i-blog.csdnimg.cn/blog_migrate/18e8661c1efe2ba51f5fe9f5f5627427.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5b70d566191641557ec1bfdc6f151373.png)
字符串中只返回第一个数字。
开头和结尾的空格是允许的。
如果字符串的第一个字符不能被转换为数字,那么
parseFloat()
会返回
NaN
。
6.1.3 parseInt(string,radix)
根据radix进制,解析一个字符串,并返回一个整数
![](https://i-blog.csdnimg.cn/blog_migrate/0545c2c321d563a76262dca42c7dc94f.png)
当参数
radix
的值为
0
,或没有设置该参数时,
parseInt()
会根据
string
来判断数字的基数
当忽略参数
radix , JavaScript
默认数字的基数如下
:
1.
string
以
"0x"
开头,
parseInt()
会把
string
的其余部分
解析为十六进制的整数
。
2.
string
以
0
开头,
ECMAScript v3
允许
parseInt()
的一个实现把其后的字符
解析为八进 制或十六进制的数字
。
3.
string
以
1 ~ 9
的数字开头,
parseInt()
将把它
解析为十进制的整数
。
![](https://i-blog.csdnimg.cn/blog_migrate/cbb97fa8c47480fe0c6057852aa16fc1.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f7d160e5afcf0bf2a0eb3faeda9e1722.png)
只有字符串中的第一个数字会被返回。
开头和结尾的空格是允许的。
如果字符串的第一个字符不能被转换为数字,那么
parseInt()
会返回
NaN
。
在字符串以
"0"
为开始时旧的浏览器默认使用八进制基数。
ECMAScript 5
,默认的是十进制的基数。
6.2 JavaScript的自定义函数
6.2.1 自定义函数语法
使用
function关键字定义函数
。
function
自定义函数名称
(
参数列表
){
//
函数体
}
6.2.2 自定义函数实例
1
、
函数的形参直接写参数名称
,不需要声明类型,即不需要写
var.
2
、
函数的返回取决于函数体中是否有return关键字
。
![](https://i-blog.csdnimg.cn/blog_migrate/33ea71232c2ab25ad617307f0f85ca2a.png)
6.3 JavaScript的匿名函数
使用function关键字定义函数,不给函数名,把定义的函数扔给一个变量。
使用匿名函数:直接调用变量,给个括号,传参数。
![](https://i-blog.csdnimg.cn/blog_migrate/79e1fcecd316160019a2df065b30f5a3.png)
7、JavaScript变量的作用域
7.1 局部 JavaScript 变量
在
JavaScript
函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问
。
在不同的函数中可以声明名称相同变量,因为局部变量出该函数就失效了。
7.2 全局 JavaScript 变量
在函数外声明的变量是全局变量,
网页上的所有脚本和函数都能访问它
![](https://i-blog.csdnimg.cn/blog_migrate/9809f4a4e8194dd55a44fed1084fe308.png)
7.3 变量的生命周期
JavaScript
变量的生命期
从它们被声明的时间开始
。
局部变量会在
函数运行以后被删除
。全局变量会
在页面关闭后被删除
。
8 JavaScript自定义对象
对象也是一个变量,但对象可以包含多个值(多个变量)。
8.1 定义对象
对象中可以有属性,也可以有方法
8.2 对象的属性
可以说
"JavaScript
对象是变量的容器
"
。
但是,我们通常认为
"JavaScript
对象是键值对的容器
"
。
键值对通常写法为
name : value (
键与值以冒号分割
)
。
键值对在
JavaScript
对象通常称为 对象属性
8.3 访问对象的属性
8.4 访问对象的方法
9 JavaScript Window--浏览器对象模型BOM
浏览器对象模型
(BOM)
使 JavaScript 有能力与浏览器"对话"
。
BOM
:
B
rowser
O
bject
M
odel
,中文浏览器对象模型。
9.1 window对象
所有浏览器都支持
window
对象。它
表示浏览器窗口
。
所有
JavaScript
全局对象、函数以及变量均自动成为
window
对象的成员。
全局变量是
window
对象的属性。全局函数是
window
对象的方法。
9.2 window对象属性
![](https://i-blog.csdnimg.cn/blog_migrate/eec9c6b8032780a23c6903b304fcd13d.png)
9.2.1 history对象
window.history
对象
包含浏览器的历史
window.history
对象在编写时可不使用
window
这个前缀。
常用方法:
history.back() -
与在浏览器点击后退按钮相同
history.forward() -
与在浏览器中点击向前按钮相同
history.go(1/-1)--
参数为
1
:等同于
history.forward()
,参数为
-1
,等同于
history.back()
![](https://i-blog.csdnimg.cn/blog_migrate/e717fb1289bc49aedff57b0205f5c1a6.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d2a3ba54ce999cecbdff019a55decb6f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f12ec6359cdeca181fbe2d8aca9427c6.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c4417a29fd4df2329caf15e36cdd8269.png)
9.2.2 location对象
window.location
对象用于
获得当前页面的地址 (URL),并把浏览器重定向到新的页面
。
常用属性和方法:
window.location
对象在编写时可不使用
window
这个前缀。
href
当前
窗口正在浏览的网页地址
replace(url)
转向到url网页地
址
reload()
重新载入当前网址
,如同按下刷新按钮
![](https://i-blog.csdnimg.cn/blog_migrate/a51677d04483207c9758cad354e82903.png)
9.2 window对象方法
![](https://i-blog.csdnimg.cn/blog_migrate/92404442e2594c6a8a428501eb718815.png)
9.2.1 打开和关闭浏览器案例
![](https://i-blog.csdnimg.cn/blog_migrate/822d3566ed020a428c9b01d7f540f78c.png)
9.2.2 弹框案例
![](https://i-blog.csdnimg.cn/blog_migrate/01ef3837a9acbe5ebd9802f7ff843371.png)
9.2.3 定时器案例
var flag1=window.setInterval("showTime1()",1000);
定时器setInterval(定时调用的函数,时间间隔毫秒)
表示定时每隔1秒调用一次函数,定时器名字flag1
var flag2=window
.
setTimeout("showTime2()"
,
1000
);
在指定的毫秒数后调用函数或计算表达式
表示定时1秒后执行该方法,且只执行一次。定时器名字flag2
setTimeout要想实现setInterval功能--递归调用方法
<
a href
=
"javascript:window.clearInterval(flag1)"
>
停止定时器
clearInterval
<
/a>
![](https://i-blog.csdnimg.cn/blog_migrate/0d6efb474a6311cd3fc8f2c47d9e0f7f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1acf167c9b475e2d20d84ce2408257c1.png)
10 JavaScript之事件
事件是写在标签/元素中,
当触发元素的事件后,就需要使用javascript来完成这个事件需要做什么事情。
可以直接在标签中写javascript代码或者直接给事件扔一个方法进去
![](https://i-blog.csdnimg.cn/blog_migrate/b444bc2dd2f25ebb82a10ab1d1de4b7d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2be4d7a16638aad4798d6a00352e077f.png)
10.1 HTML事件
HTML
事件可以是浏览器行为,也可以是用户行为。
通过当事件发生时,我们希望可以做些事情,例如点击完毕按钮之后希望跳转页面、文本框输入完毕之后验证有效性等,那么这些要做的事情我们就可以通过JavaScript
实现。
10.2 常用的HTML事件
![](https://i-blog.csdnimg.cn/blog_migrate/27f441aefdea09ab5156eaa19aabafc0.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d4af7c458b52479afc8fb5b2b5dc240c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7e746eecb4c3b5aa8deeac3e0a1d2847.png)
![](https://i-blog.csdnimg.cn/blog_migrate/22ead935198a6fc238474e17e78436f7.png)
11 JavaScript之DOM模型
通过
HTML DOM
,可访问
JavaScript HTML
文档的所有元素。
DOM:Document Object Model,
文档对象模型。
当网页被加载时,浏览器会创建页面的文档对象模型即DOM树。
HTML DOM
模型被构造为
对象
的树:
![](https://i-blog.csdnimg.cn/blog_migrate/4527b50d5523f6e56f8e2e47df9d7d4f.png)
通过可编程的对象模型,
JavaScript 获得了足够的能力来创建动态的 HTML
。
JavaScript
能够改变页面中的
所有 HTML 元素
JavaScript
能够改变页面中的
所有 HTML 属性
JavaScript
能够改变页面中的
所有 CSS 样式
JavaScript
能够对页面中的
所有事件做出反应
11.1 document对象
当浏览器载入
HTML
文档
,
它就会成为
Document
对象
。
Document
对象是
HTML
文档的根节点。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示:
Document 对象是 Window 对象的一部分
,可通过
window.document
属性对其进行访问。
11.2 document对象常用方法
11.2.1 获取
HTML
元素常用4种方法
![](https://i-blog.csdnimg.cn/blog_migrate/3cf57ded44c9815defdcd3bdd5a95dc7.png)
![](https://i-blog.csdnimg.cn/blog_migrate/920b35bb63535bfdf712b56dbacd01ed.png)
11.2.2 修改 HTML 内容和属性
修改内容
修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
修改
HTML
元素的内容的语法:
document.getElementById(
id
).innerHTML=
新的
HTML
。
PS
: 绝对不要在文档
(DOM)
加载完成之后使用
document.write()
。这会覆盖该文档。
修改 HTML 属性2种方法
修改
HTML
元素属性的语法:
方式
1
:
document.getElementById(
id
).
attribute=新属性值
方式
2
:
document.getElementById(
id
).
setAttribute(属性名,属性值);
![](https://i-blog.csdnimg.cn/blog_migrate/c684f310d84ee5ba796f1f9aef5e9e6c.png)
11.2.3 修改 HTML 元素的css
修改
HTML
元素
css
的语法:
document.getElementById(id).style.property=新样式
![](https://i-blog.csdnimg.cn/blog_migrate/57a7a4007499debe83a4be5f920965c5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/14183f3a1f8ccdc3d88b840f565ee376.png)
11.3 HTML DOM 元素 (节点)
11.3.1 动态创建新的 HTML 元素
要创建新的
HTML
元素
(
节点
)
需要先创建一个元素,然后在已存在的元素中添加它。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button type="button" onclick="createNewP()">动态添加一个元素--appendChild</button>
<button type="button" onclick="createNewP2()">动态添加一个元素-insertBefore</button>
<div id="div1">
<p id="p1">这是段落1</p>
<p id="p2">这是段落2</p>
</div>
<script>
function createNewP(){
var newElementP=document.createElement("p");//创建一个新的段落元素
var text=document.createTextNode("这是我新创建的段落");//新创建的文本节点
//将文本的节点添加到新创建的元素中
newElementP.appendChild(text);
//获取一个页面已经存在的元素
var div=document.getElementById("div1");
//添加新创建的元素p到已经存在的元素div中
div.appendChild(newElementP);
}
function createNewP2(){
var newElementP=document.createElement("p");//创建一个新的段落元素
var text=document.createTextNode("这是我新创建的段落p2");//新创建的文本节点
//将文本的节点添加到新创建的元素中
newElementP.appendChild(text);
//获取一个页面已经存在的元素
var div=document.getElementById("div1");
var p1=document.getElementById("p1");
//添加新创建的元素p到已经存在的元素div中,指定插入到段落P1前面
div.insertBefore(newElementP,p1);
}
</script>
</body>
</html>
11.3.2 替换 HTML 元素 -replaceChild
将div中的元素p1替换为新创建的元素
div.replaceChild(newElementP,p1);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<button type="button" onclick="changeElemnt()">替换p1</button>
<script>
function changeElemnt(){
var newElementP=document.createElement("p");//创建一个新的段落元素
var text=document.createTextNode("这是我新创建的段落p");//新创建的文本节点
//将文本的节点添加到新创建的元素中
newElementP.appendChild(text);
//获取要被替换的元素p1及其父元素div
var div=document.getElementById("div1");
var p1=document.getElementById("p1");
//将div中的元素p1替换为新创建的元素
div.replaceChild(newElementP,p1);
}
</script>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/cf4619e4dd3ea9736270c17b44733884.png)
11.3.3 删除元素 -removeChild()
方式一:
从父元素div中删除子元素p1
div.removeChild(p1);
方式二:
p1.parentNode:作用就是获取要删除元素p1的父元素div
p1.parentNode.removeChild(p1);
![](https://i-blog.csdnimg.cn/blog_migrate/7e0fe1ccbf7fe9f6ffb8c5bf6501743b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/74cca7d170da2c8fe97240dbbd9ee79f.png)
12 表单验证
12.1表单验证意义与场景
1.降低服务器压力
拦截不合格的数据
,避免直接提交到服务器,可以显著降低服务器开销
2.提升用户体验
有了表单验证,反馈是实时的,而且脚本还能把你定位到填写错误的具体字段
。现在虽然无刷新技术早已普及,但是只依赖服务端验证,还是会有几百毫秒的延迟
12.2 表单验证常用事件与属性
表单经常需要做一些
非空验证、长度验证、合法性验证等
。
注意:
1.只有表单项才有value属性
2.要求用户名和密码有规定长度且非空验证,当鼠标光标移开后开始验证(鼠标事件),若有问题则要给出提示红色的信息(即修改元素内容和属性),若没问题则给出提示:用户名可用且颜色为绿色(同样是修改内容和属性)
3.所有的验证方法都没问题(都返回true)才允许提交
4.像下拉菜单这样不能像用户名那样给出提示,一般放在表单提交时候来验证,表单有一个提交事件onsubmit,当值为true时才提交,另外,为了避免用户没有填写表单就点击注册按钮,在提交表单时要保证所有的验证方法都返回true才可。
5.总之,能及时反馈的就要及时反馈,不能则放到表单提交时进行验证(所有的验证都要重新走一遍)
主要是获取元素的value值然后去判断验证。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script>
function validateName() {
//所有的表单项元素都value属性
var name = document.getElementById("userName").value;
var msg = document.getElementById("nameMsg");
if(name == null || name == "") {
msg.innerHTML = "用户名不能为空!";
msg.style.color = "red";
return false;
} else if(name.length < 6) {
msg.innerHTML = "用户名长度必须为大于6的!";
msg.style.color = "red";
return false;
}
msg.innerHTML = "用户名可用";
msg.style.color = "green";
return true;
}
function validatePwd() {
var password1 = document.getElementById("password1").value;
var msg = document.getElementById("pwdMsg1");
if(password1 == null || password1 == "") {
msg.innerHTML = "密码不能为空!";
msg.style.color = "red";
return false;
} else if(password1.length < 8) {
msg.innerHTML = "密码的长度必须为大于8的!";
msg.style.color = "red";
return false;
}
msg.innerHTML = "密码合法";
msg.style.color = "green";
return true;
}
function confirmPwd() {
var pwd1 = document.getElementById("password1").value;
var pwd2 = document.getElementById("password2").value;
var msg = document.getElementById("pwdMsg2");
if(pwd1 != pwd2) {
msg.innerHTML = "两次输入的密码不一致!";
msg.style.color = "red";
return false;
}
msg.innerHTML = "两次输入的密码一致";
msg.style.color = "green";
return true;
}
function validateGender() {
var gender = document.getElementById("gender").value;
if(gender == -1) {
alert("性别为必选项!");
return false;
}
return true;
}
function register() {
return
validateName() && validatePwd() && confirmPwd() && validateGender();
}
</script>
</head>
<body>
<h1>注册</h1>
<form action="提交.html" method="get" onsubmit="return register()">
用户名:<input type="text" id="userName" placeholder="请输入用户名" onblur="validateName()" />
<span id="nameMsg">用户名长度至少6位</span><br />
密码:<input type="password" id="password1" placeholder="请输入密码" onblur="validatePwd()" />
<span id="pwdMsg1">密码长度至少8位</span><br />
确认密码:<input type="password" id="password2" placeholder="请确认密码" onblur="confirmPwd()" />
<span id="pwdMsg2">确认密码与密码一致</span><br />
性别:<select id="gender">
<option value="-1">请选择性别</option>
<option value="0">女</option>
<option value="1">男</option>
</select><br /><br />
<button type="submit">注册</button>
<button type="reset">重置</button>
</form>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/747614a796e4ea35d906978d3f85c35e.png)
14 JavaScript的 RegExp 对象-正则表达式
14.1 概念
RegExp
:是正则表达式(
regular expression
)的简写。
正则表达式(英语:
Regular Expression
,在代码中常简写为
regex、regexp或RE
)是用于描述一组字符串特征的模式,用来匹配特定的字符串。通过特殊字符+普通字符来进行模式描述,从而达到文本匹配目的工具
通常使用正则表达式进行字符串的校验,判断字符串是否匹配指定正则模式, 比如表单中验证身份证的合法性,邮箱的合法性或者网址url,通过字符串不大好验证,正则表达式就可以满足这个要求。
14.2 语法
语法:正则表达式两种声明
var
reg
=
new
RegExp
(
/
正则表达式主体
/
,
修饰符
(
可选
));
或更简单的方法
var
reg
=
/
正则表达式主体
/
修饰符
(
可选
);
案例:
var
reg
=
new
RegExp
(
/nihao/i
);
var
reg
=
/nihao/i
;
//
定义了一个正则表达式。
nihao
是一个正则表达式主体
(
用于检索
)
。
i
是一个修饰符
(
搜索不区分大小写
)
。
14.2.1 修饰符
可以在全局搜索中不区分大小写
:
![](https://i-blog.csdnimg.cn/blog_migrate/fb1c348a97bd6c84b51f54f1a184b5e3.png)
14.2.2 正则表达式模式
方括号用于查找某个范围内的字符:
![](https://i-blog.csdnimg.cn/blog_migrate/04f1e676744b86d627896f77f8cf181c.png)
元字符是拥有特殊含义的字符
![](https://i-blog.csdnimg.cn/blog_migrate/8048e4aca70a80db23e5b9ee25d1566b.png)
量词:
![](https://i-blog.csdnimg.cn/blog_migrate/522762304bbe063d7169463be2a25e52.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a90a244170b1e50c78d77a23557b0714.png)
位置限定符
![](https://i-blog.csdnimg.cn/blog_migrate/db86f98402010f6268d3e65a028c9088.png)
特殊符号
![](https://i-blog.csdnimg.cn/blog_migrate/2357aa9f7554e7c1bd1428d8243d9504.png)
其他普通字符集及其替换
![](https://i-blog.csdnimg.cn/blog_migrate/4409252631f3361151b035dea7a4abce.png)
14.2.3 正则表达式的方法test(str)
test() 方法
用于
检测一个字符串是否匹配某个模式
,
如果字符串中含有匹配的文本,则返回 true
,否则返回 false
。
检测字符串是否与给定的正则匹配
var
reg
=
/nihaoa/i
;
var
res
=
reg
.
test
(
"assdadasd
nihaoa
"
);
console
.
log
(
res
);
//true
要求str以字母开头,且至少一个字母:
^[a-zA-Z]+
紧跟着是0个或者多个汉字:
[\u4e00-\u9fa5]*
结尾是一个数字:
[0-9]$
var
reg
=
/^[a-zA-Z]+[\u4e00-\u9fa5]*[0-9]$/
;
var
str
=
"a
公司拼音为
9"
;
var
res
=
reg
.
test
(
str
);
console
.
log
(
res
);
//true
console
.
log
(
reg
.
test
(
"a
你好
239"
));
//false
14.2.4.RegExp对象方法
14.2.5.支持正则表达式的String对象方法
14.2.6.RgeExp对象属性
14.3 常用的正则表达式校验案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
/*检查输入的身份证号是否正确*/
function checkCard(str) {
/*15位数身份证正则表达式:
* 编码规则顺序从左至右依次为6位数字地址码,6位数字出生年份后两位及日期,3位数字顺序码。
[1-9]\d{5} 前六位地区,非0打头
\d{2} 出生年份后两位00-99
((0[1-9])|(10|11|12)) 月份,01-12月
(([0-2][1-9])|10|20|30|31) 日期,01-31天
\d{3} 顺序码三位,没有校验码
*/
var arg1 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$/;
if (arg1.length == 15 && !arg1.test(arg1)) {
return false;
}
/*
* 18位数身份证正则表达式:
* 编码规则顺序从左至右依次为6位数字地址码,8位数字出生年份日期码,3位数字顺序码,1位数字校验码(可为x)。
[1-9]\d{5} 前六位地区,非0打头
(18|19|([23]\d))\d{2} 出身年份,覆盖范围为 1800-3999 年
((0[1-9])|(10|11|12)) 月份,01-12月
(([0-2][1-9])|10|20|30|31) 日期,01-31天
\d{3}[0-9Xx]: 顺序码三位 + 一位校验码
*/
var arg2 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
if (arg2.length == 18 && !arg2.test(sfzhmcode)){
return false;
}
return true;
/*或者
* if(str.match(arg1)==null&&str.match(arg2)==null){
* return false;
* }else{
* return true;
* }
*
*/
}
/*是否是小数*/
function isDecimal(strValue) {
var objRegExp = /^\d+\.\d+$/;
return objRegExp.test(strValue);
}
/*校验是否中文名称组成 */
function ischina(str) {
var reg = /^[\u4E00-\u9FA5]{2,4}$/;
return reg.test(str);
}
/*校验是否全由8位数字组成 */
function isNum(str) {
var reg = /^[0-9]{8}$/;
return reg.test(str);
}
/*校验电话码格式 :座机和手机*/
function isTelCode(str) {
var reg = /^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/;
return reg.test(str);
}
/*校验手机号*/
function isPhoneNum(str) {
//如果你要精确验证手机号码,那个你可以使用第一个正则。这是根据电信,移动,联通目前发行的号码来的。验证比较精确。
var reg = /^1[3|4|5|7|8][0-9]{9}$/;
如果因为现有的号码不能满足市场需求,电信服务商会增大号码范围。所以一般情况下我们只要验证手机号码为11位,且以1开头。
var reg = /^^1[0-9]{10}$$/;
return reg.test(str);
}
/*校验邮件地址是否合法 */
function IsEmail(str) {
var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
return reg.test(str);
}
/*检查输入的URL地址是否正确 */
function checkURL(str) {
if(str.match(/http(s)?:\/\/[\w.]+[\w\/]*[\w.]*\??[\w=&\+\%]*/i) == null){
return false;
} else {
return true;
}
}
</script>
</body>
</html>