JavaScript中BOM及DOM的学习
1 BOM编程
1.1 BOM编程概述
1.1.1 BOM编程的概念
BOM：Browser Object Model 浏览器对象模型
1.1.2 BOM编程的作用
用于操作浏览器中的各种对象，不同浏览器定义上是有差别的，实现方式也会有不同。以下是Chrome浏览器各个BOM对象。
1.1.3 BOM常用的对象
| BOM常用对象 | 作用 |
|---|---|
| window | 浏览器窗体对象 |
| location | 浏览器地址栏对象 |
| history | 历史记录对象 |
1.2 window对象
BOM的核心对象是window，它表示浏览器的一个实例。
注:只要是window的方法和属性，window对象名都可以省略
1.2.1 与对话框有关的方法
| 方法 | 作用 |
|---|---|
| alert() | 弹出一个确认按钮的信息框 |
| string prompt(“提示信息”,"默认值”) | 弹出一个输入信息框，返回字符串类型 |
| boolean confirm(“提示信息”) | 弹出一个信息框，有确定和取消按钮。 如果点确定，返回true，点取消返回false |
| console | 向控制台输出，有log,warn,error等类型 |
1.2.2 与计时有关的方法
| 方法 | 作用 |
|---|---|
| setTimeout(函数名, 间隔毫秒数) | 在指定的时间后调用1次函数，只执行1次，单位是毫秒。 返回值：返回一个整数类型的计时器 函数调用有两种写法： 1) setTimeout(“函数名(参数)”, 1000); 2) setTimeout(函数名,1000, 参数); 注意方式二：没有引号，没有括号 |
| setInterval(函数名, 间隔毫秒数) | 每过指定的时间调用1次函数，不停的调用函数，单位是毫秒。 返回值：返回一个整数类型的计时器。 |
| clearInterval(计时器) | 清除setInterval()方法创建的计时器 |
| clearTimeout(计时器) | 清除setTimeout()方法创建的计时器 |
1.2.3 获取网页元素
<div id="box" class="box" name="box">我是网页内容</div>
<div id="box" class="box" name="box">我是网页内容111</div>
<script type="text/javascript">
// 获取元素 document 网页
// 根据 id 获取一个元素
var box = document.getElementById("box");
// 根据 class 获取元素, 只要 class 包含即可
var divs = document.getElementsByClassName("box");
// 根据 name 获取元素
var names = document.getElementsByName("box");
// 根据标签名 获取元素
var div = document.getElementsByTagName("div");
// 根据 选择器 选择 一个元素
var element = document.querySelector("#box");
// 根据 选择器 选择 所有元素, 返回的一定是数组
var elements = document.querySelectorAll(".box");
console.log(elements);
</script>
1.2.4 修改元素内容的几个方法和属性
| 名称 | 作用 |
|---|---|
| 方法：document.getElementById(“id”) | 通过id得到一个元素，如果有同名的元素则得到第1个 |
| 属性：innerHTML | 获得：元素内部的HTML 设置：修改元素内部的HTML |
| 属性：innerText | 获得：元素内部的文本 设置：修改元素内部的纯文本，其中的html标签不起作用 |
示例：时钟
页面上有两个按钮，一个开始按钮，一个暂停按钮。点开始按钮时间开始走动，点暂停按钮，时间不
动。再点开始按钮，时间继续走动。
步骤：
- 在页面上创建一个h1标签，用于显示时钟，设置颜色和大小。
- 点开始按钮调用一个方法start()，在方法内部每过1秒中调用另一个方法begin()
- begin()方法内部得到现在的时间，并将得到的时间显示在h1标签内部
- 暂停的按钮调用另一个方法：pause()，在方法内部清除上面setInterval()的计时器。
- 为了防止多次点开始按钮出现bug，在开始调用计时器之前清除上一个计时器。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>时钟</title>
<style type="text/css">
#clock {
color: green;
font-size: 30px;
}
</style>
</head>
<body>
<h1 id="clock">我是时间</h1>
<input type="button" value="开始" onclick="start()" />
<input type="button" value="暂停" onclick="pause()" />
<script type="text/javascript">
//定义定时器
var timer;
//开始调用
function start() {
//先清除上一个计时器，再开启一个计时器
window.clearInterval(timer);
//1000毫秒调用begin()
timer = window.setInterval("begin()", 1000);
}
//思路：每过1秒钟调用1次时间，并且将时间显示在某个元素内部
function begin() {
//得到现在的时间
var time = new Date();
//得到h1元素
var clock = document.getElementById("clock");
//将时间显示在h1中
clock.innerHTML = time.toLocaleString();
}
//暂停
function pause() {
//清除计时器
window.clearInterval(timer);
}
</script>
</body>
</html>
1.3 location对象
1.3.1 location是什么
代表浏览器的地址栏对象
1.3.2 location常用的属性
- href 属性
- 获取href属性，获得当前地址栏访问的地址
- 设置href属性，用于页面的跳转，跳转到一个新的页面
1.3.3 location常用的方法
- reload() 重新加载当前的页面，相当于浏览器上的刷新按钮
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>location</title>
</head>
<body>
<input type="button" value="跳转到百度" onclick="jump()" />
<input type="button" value="刷新" onclick="refresh()" />
<script>
function jump () {
//获得属性
//document.write("获得href属性：" + location.href + "<br/>");
location.href = "http://www.baidu.com";
}
function refresh(){
location.reload();
}
</script>
</body>
</html>
1.4 history对象
1.4.1 作用
访问浏览器之前已经访问过的页面
1.4.2 方法
| 方法 | 作用 |
|---|---|
| forward() | 类似于浏览器上前进按钮 |
| back() | 类似于浏览器上后退按钮 |
| go() | 正数或负数，go(1)相当于forward()，go(-1)相当于back() |
示例：倒计时跳转到另一个页面
页面上显示一个倒计时3秒的数字，到了3秒以后跳转到另一个页面
步骤：
- 页面上创建一个span用于显示变化的数字，点返回链接直接跳转。
- 定义一个变量为3，每过1秒调用1次刷新refresh()函数
- 编写函数，修改span中的数字
- 判断变量是否为1，如果是1则跳转到新的页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>倒计时跳转</title>
</head>
<body>
<span id="time">3</span>秒后回到主页
<script type="text/javascript">
//定义一个变量为3
var count = 3;
//一开始就执行
window.setInterval("refresh()", 1000);
function refresh() {
if (count > 1) {
//修改span中的数字
document.getElementById("time").innerText = --count;
} else {
location.href = "http://www.baidu.com";
}
}
</script>
</body>
</html>
2 DOM编程
2.1 DOM编程概述
2.1.1 DOM编程的基本概念
Document Object Model 文档对象模型，用于操作网页中元素
2.1.2 DOM编程的作用
每个HTML页面在被浏览器解析的时候都会在内存中创建一棵DOM树，我们通过编写JS代码就可以访问这棵树上任何一个节点，并且对节点进行操作。通过 DOM模型，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。新创建的元素对象，要挂到DOM树上才可以在网页上显示出来。
2.2 查找节点
2.2.1 查找节点的方法
| 方法 | 作用 |
|---|---|
| document.getElementById(“id”) | 通过id属性得到唯一的元素 如果页面上有多个同名的id，则得到第1个元素 |
| document.getElementsByName(“name”) | 通过name属性得到一组标签，返回一个数组 |
| document.getElementsByTagName (“标签名”) | 通过标签名字得到一组标签，返回一个数组 |
| document.getElementsByClassName(“类名”) | 通过类名得到一组标签，返回一个数组 |
| document.querySelector(“选择器”) | 根据选择器查询元素，返回一个元素 |
| document.querySelectorAll(“选择器”) | 根据选择器查询所有元素，返回一个数组 |
2.2.2 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取节点</title>
</head>
<body>
<input type="button" value="(通过标签名)给a链接添加地址" id="b2" />
<input type="button" value="(通过name属性)给div设值" id="b3" />
<input type="button" value="(通过类名)给div设值" id="b4" />
<hr />
<a>百度一下</a><br />
<a>百度一下</a><br />
<a>百度一下</a><br />
<hr />
<div name="one"></div>
<div name="one"></div>
<div name="one"></div>
<hr />
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
<script type="text/javascript">
window.onload = function() {
//根据标签名找元素
var b2 = document.getElementById("b2");
b2.onclick = function() {
//返回的是一个数组对象
var aNodes = document.getElementsByTagName("a");
for (var index = 0; index < aNodes.length; index++) {
aNodes[index].href = "http://www.baidu.com";
}
}
//根据name的属性值找
var b3 = document.getElementById("b3");
b3.onclick = function() {
//根据name的属性值找元素，返回一个数组对象
var divs = document.getElementsByName("one");
for (var index = 0; index < divs.length; index++) {
divs[index].innerHTML = "<a href='#'>我是一个程序员</a>";
}
}
var b4 = document.getElementById("b4");
b4.onclick = function() {
//根据class的属性值找元素，返回一个数组对象
var divs = document.getElementsByClassName("two")
for (var index = 0; index < divs.length; index++) {
divs[index].innerHTML = "<a href='#'>JavaEE开发</a>";
}
}
}
</script>
</body>
</html>
效果：
2.2.3 示例：实现全选/全不选，商品结算的功能
页面上有5件商品，前面都有复选框(checkbox)，名字叫item，value是商品的价格。下面有一个"全选/全不选"的复选框，id是"all"，点它实现全选或全不选的功能，还有个反选的按钮，点它实现反选的功能。下面有一个按钮，点它则计算选中商品的总金额。
分析：
- 知识点：复选框如果要选中，设置checked=true，取消设置checked=false。
- 全选：通过name属性得到上面所有的复选框对象，遍历集合，将每一个元素的checked设置为true。
- 全不选：将所有元素的checked属性设置为false。
- 反选：原来选中的设置false，原来没选的设置为true。
- 结账：将所有选中的元素的value转成数字，再累加，将累加的结果显示在后面的span中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>商品价格列表</h3>
<input type="checkbox" name="item" value="1500" /> 山地自行车1500<br />
<input type="checkbox" name="item" value="200" /> 时尚女装200<br />
<input type="checkbox" name="item" value="3000" /> 笔记本电脑3000元<br />
<input type="checkbox" name="item" value="800" /> 情侣手表800<br />
<input type="checkbox" name="item" value="2000" /> 桑塔纳2000<br />
<hr />
<input type="checkbox" id="all" onclick="selectAll()" />全选/全不选
<input type="button" id="reverse" onclick="reverseSelect()" value=" 反 选 " />
<input type="button" value=" 结 账 " onclick="total()" /> <span id="result"></span>
<script type="text/javascript">
//全选/全不选
function selectAll() {
//得到下面复选框的状态
var all = document.getElementById("all");
//得到上面所有的复选框
var items = document.getElementsByName("item");
for (var i = 0; i < items.length; i++) {
items[i].checked = all.checked;
}
}
//反选
function reverseSelect() {
//得到上面所有的复选框
var items = document.getElementsByName("item");
for (var i = 0; i < items.length; i++) {
items[i].checked = !items[i].checked;
}
}
//结账
function total() {
var sum = 0;
//得到上面所有的复选框
var items = document.getElementsByName("item");
for (var i = 0; i < items.length; i++) {
//选中的才加
if (items[i].checked) {
//把值相加
sum += parseFloat(items[i].value);
}
}
//显示到span中
document.getElementById("result").innerHTML = "￥" + sum;
}
</script>
</body>
</html>
2.2.4 示例：省市级联的操作
有两个下拉列表，左边选择相应的省份，右边出现相应省份的城市列表
例分析：
- 创建二维数组，保存每个省份对应的城市，第1维的第0个元素是一个空数组。
- 给左边省的下拉列表添加改变事件(onchange)，在事件方法中获取到当前省份所选择到的索引值。
- 索引从0开始，索引值对应的就是该省份对应的城市数组索引，城市所有的名字是一个一维数组。
- 先创建一个字符串，内容是："–请选择市–"
- 遍历一维城市数组，每个城市用字符串拼接成一个option字符串。
- 得到城市的下拉列表，将上面接近的option字符串，使用innerHTML加到下拉列表中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>省市级联</title>
</head>
<body>
<select id="provinceId" onchange="selectCity(this)">
<option>-请选择-</option>
<option>陕西</option>
<option>四川</option>
</select>
<select id="cityId">
<option value="">--请选择市--</option>
</select>
<script type="text/javascript">
//每个省份对应的数组
var citys = new Array(5);
citys[0] = [];
citys[1] = ["西安市", "咸阳市", "宝鸡市", "渭南市"];
citys[2] = ["成都市", "广元市", "南充市", "眉山市"];
function selectCity(pNode) {
//获取到当前省份所选择到的索引值
var index = pNode.selectedIndex;
//根据索引值取出该 省份对应 的城市
var cityData = citys[index]; //一维数组
//清除原来城市下拉选下的所有子元素且初始化
var options = "<option>--请选择市--</option>"
//遍历一维城市数组，每个城市就是一个option。
for (var index = 0; index < cityData.length; index++) {
var cityName = cityData[index];
options += "<option>" + cityName + "</option>";
}
//把这些所有的城市添加到cityselect框下。
var cityNode = document.getElementById("cityId");
cityNode.innerHTML = options;
}
</script>
</body>
</html>
第二种方式(扩展)：
这种方式需要用到html的dom操作方式(参考w3cschool的XML DOM操作),使用到的方法和属性有如下几个
| 方法 | 作用 |
|---|---|
| document.createElement() | 创建元素节点 |
| document.createTextNode() | 创建文本节点 |
| 元素对象.appendChild() | 向节点的子节点列表末尾添加新的子节点 |
| 元素对象.removeChild() | 删除子节点 |
| 元素对象.hasChildNodes() | 返回元素是否拥有子节点 |
| 属性 | 作用 |
|---|---|
| 元素对象.firstChild | 返回元素的首个子节点 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>省市级联</title>
</head>
<body>
<select id="provinceId" onchange="selectCity(this)">
<option>-请选择-</option>
<option>陕西</option>
<option>四川</option>
</select>
<select id="cityId">
<option value="">--请选择市--</option>
</select>
<script type="text/javascript">
//每个省份对应的数组
var citys = new Array(3);
citys[0] = [];
citys[1] = ["西安市", "咸阳市", "宝鸡市", "渭南市"];
citys[2] = ["成都市", "广元市", "南充市", "眉山市"];
function selectCity(pNode) {
//获取到当前省份所选择到的索引值
var index = pNode.selectedIndex;
//根据索引值取出该 省份对应 的城市
var cityData = citys[index]; //一维数组
//获取城市下拉选框
var cityNode = document.getElementById("cityId");
//清除原来城市下拉选下的所有子元素.循环删除当前元素下的子元素
while (cityNode.hasChildNodes()) {
cityNode.removeChild(cityNode.firstChild);
}
//初始化城市下拉选框
var optionObj = document.createElement("option");
var textObj = document.createTextNode("--请选择市--");
//将文本节点添加到option标签中
optionObj.appendChild(textObj);
//将option节点添加到城市下拉选中
cityNode.appendChild(optionObj);
//遍历一维城市数组，每个城市就是一个option。
for (var index = 0; index < cityData.length; index++) {
var optionObj = document.createElement("option");
var textObj = document.createTextNode(cityData[index]);
//将文本节点添加到option标签中
optionObj.appendChild(textObj);
//将option节点添加到城市下拉选中
cityNode.appendChild(optionObj);
}
}
</script>
</body>
</html>
2.3 js操作css样式
2.3.1 在JS中操作CSS属性命名上的区别
以前css直接写死在html中，现在可以通过js脚本去动态修改一个标签的样式
| CSS | JS | 说明 |
|---|---|---|
| color | color | 一个单词的样式写法是相同 |
| font-size | fontSize | 驼峰命名法，首字母小写，第二个单词以后首字母大写 |
2.3.2 方式一：
元素.style.样式名 = “样式值”;
2.3.3 方式二：
元素.className = “类名”;
2.3.4 JS修改CSS的示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.two {
color: red;
font-size: 45px;
font-family: 隶书;
}
</style>
</head>
<body>
<p id="first">
这是第一自然段
</p>
<p id="second">
这是第二自然段
</p>
<input type="button" value="改变几个样式" onclick="changeCss()" />
<input type="button" value="改变类样式" onclick="changeClass()" />
<script type="text/javascript">
//方式一：修改多个样式属性
function changeCss() {
//color: blue; font-size: 30px; font-family: 楷体;
//得到first这个p
var p1 = document.getElementById("first");
//语法：元素.style.样式名=样式值;
p1.style.color = "blue";
p1.style.fontSize = "30px";
p1.style.fontFamily = "楷体";
}
//方式二：首先创建一个类样式，然后一条语句一次性修改所有的样式
function changeClass() {
var p2 = document.getElementById("second");
//语法：元素.className = "类名";
p2.className = "two";
}
</script>
</body>
</html>
使用css操作样式，如果是操作style添加的是行内样式，也就是说是在元素的style属性中添加。
如果是操作css的话是修改css属性的值，也就是将元素中如果原来有class会替换掉
练习 ：
使用JS修改表格行的背景色，产生隔行变色的效果，鼠标移上去的时候这一行变成其它颜色，移出去的时候还原成之前的背景色。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table {
margin: auto;
border-collapse: collapse;
}
tr {
text-align: center;
height: 32px; 15
}
.redStyle {
background: lightpink;
}
.yellowStyle {
background: lightyellow;
}
.greenStyle {
background: lightgreen;
}
</style>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
<tr style="background-color: #ccc;">
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
<script type="text/javascript">
//记录颜色
var color = "";
window.onload = function() {
//获取所有行
var trNodes = document.getElementsByTagName("tr");
//遍历所有的行，如果是偶数，则设置为浅黄色
for (var index = 1; index < trNodes.length; index++) {
if (index % 2 == 0) {
trNodes[index].className = "yellowStyle";
} else {
trNodes[index].className = "redStyle";
}
//鼠标经过的事件
trNodes[index].onmouseover = function() {
//记录没有换颜色之前的颜色
color = this.className;
this.className = "greenStyle";
}
//鼠标移出事件
trNodes[index].onmouseout = function() {
//如果鼠标移出之后，要回到原来的颜色。
this.className = color;
}
}
}
</script>
</body>
</html>
3 表单校验
3.1 String对象
String对象是JavaScript中最常见的对象之一。用户在表单中输入的数据默认都是String类型。
JavaScript对String类型的数据提供了丰富的操作API。下表是String类常用的方法，字符串以“I Love This Game！！！”为例：
| 方法 | 作用 |
|---|---|
| charAt(pos) | 查找指定下标的字符。例如：charAt(5)，返回“e” 等同于： str[5] |
| indexOf | 查找匹配字符串第一次出现的位置 |
| charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
| fromCharCode() | 将 Unicode 转换为字符串 |
| match() | 找到一个或多个正则表达式的匹配 |
| split() | 把字符串分割为子字符串数组 |
| substr() | 从起始索引号提取字符串中指定数目的字符 |
| substring() | 提取字符串中两个指定的索引号之间的字符 |
js中的string和java中的String差不多
练习：利用prompt方法接收用户输入的多个单词，多个单词用空格分开，使用JavaScript代码将用户录入的单词组合成符合帕斯卡命名法的标示符。例如：用户录入“good GoOd STUDY DaY dAy up”，运行结果显示“GoodGoodStudyDayDayUp”
3.2 表单校验
表单验证是JavaScript学习的重点。表单验证就是JavaScript在数据被提交到服务器端之前，对HTML表单中的数据进行验证，在验证所有信息均符合要求之后，将表单提交到服务器由服务器进行数据处理。
数据到达服务端后，服务端对数据再次验证，不合法的数据将响应到客户端。
在客户端验证数据的优势就在于减轻服务器的压力，改善用户的体验。
表单验证的基本思路是
- 激发验证数据的HTML事件
- HTML事件激发后调用JavaScript函数，函数对数据进行验证
- 通过DOM解析提示用户验证结果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单校验</title>
<style>
/*公共样式设置*/
* {
margin: 0;
padding: 0;
color: #666;
}
body {
background-color: #EEE;
}
.container {
width: 700px;
margin: 0 auto;
}
table {
width: 700px;
border-radius: 10px;
background-color: #FFF;
}
td {
height: 30px;
padding: 2px;
}
/*文本框默认的样式*/
.reg_text {
width: 234px;
height: 28px;
line-height: 28px;
border: 1px solid gray;
}
/*文本框值错误的样式*/
.reg_error {
width: 234px;
height: 28px;
line-height: 28px;
border: 1px solid red;
}
/*获得焦点时的文本警告样式*/
.text_waring {
color: #666;
}
/*文本错误的样式*/
.text_error {
color: #F00;
}
</style>
</head>
<body>
<div class="container">
<form id="form1" method="post" action="" onSubmit="return checkAll()">
<table align="center" cellspacing="0" id="main">
<tr>
<td width="120" align="right"> </td>
<td width="240"> </td>
<td> </td>
</tr>
<tr>
<td align="right">名字：</td>
<td><input id="fname" type="text" class="reg_text" onFocus="waringFname()" onBlur="checkFname()" /></td>
<td>
<div class="red" id="divFname"></div>
</td>
</tr>
<tr>
<td align="right">姓氏：</td>
<td><input id="lname" type="text" class="reg_text" onFocus="waringLname()" onBlur="checkLname()" /></td>
<td>
<div class="red" id="divLname"></div>
</td>
</tr>
<tr>
<td> </td>
<td><input type="image" id="Button" style="border:0px;" src="img/submit.gif" />
<img src="img/reset.gif" onClick="javascript:form1.reset();" style="cursor:pointer;" alt="重置" /></td>
<td> </td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
//获取元素的公共函数
function $(ElementID) {
return document.getElementById(ElementID);
}
/************************** 名字的验证 ****************************/
//名字获得焦点时的警告
function waringFname() {
var divFname = $("divFname");
divFname.className = "textWaring";
divFname.innerHTML = "请输入名字";
}
//名字失去焦点时的验证
function checkFname() {
var fname = $("fname");
var divFname = $("divFname");
if (fname.value == "") {
divFname.className = "text_error";
divFname.innerHTML = "名字不能为空";
fname.className = "reg_error";
return false;
}
for (var i = 0; i < fname.value.length; i++) {
var j = fname.value.substring(i, i + 1)
if (j >= 0) {
divFname.className = "text_error";
divFname.innerHTML = "名字中不能包含数字";
fname.className = "reg_error";
return false;
}
}
//验证通过
fname.className = "reg_text";
divFname.innerHTML = "<img src='img/right.png' width='20'>";
}
/************************** 姓氏的验证 ****************************/
//姓氏获得焦点时的警告
function waringLname() {
var divLname = $("divLname");
divLname.className = "textWaring";
divLname.innerHTML = "请输入姓氏";
}
//姓氏失去焦点时的验证
function checkLname() {
var lname = $("lname");
var divLname = $("divLname");
if (lname.value == "") {
divLname.className = "text_error";
divLname.innerHTML = "名字不能为空";
lname.className = "reg_error";
return false;
}
for (var i = 0; i < lname.value.length; i++) {
var j = lname.value.substring(i, i + 1)
if (j >= 0) {
divLname.className = "text_error";
divLname.innerHTML = "姓氏中不能包含数字";
lname.className = "reg_error";
return false;
}
}
//验证通过
lname.className = "reg_text";
divLname.innerHTML = "<img src='img/right.png' width='20'>";
}
/********************* 表单提交时验证所有的数据 ***********************/
function checkAll() {
if (checkFname() == false || checkLname() == false) {
return false;
}
}
</script>
</body>
</html>
4 正则表达式
在任何编程语言中都会经常处理字符串，经常需要匹配某些复杂规则的字符串。正则表达式就是用于描述字符串规则的工具。换句话说，正则表达式就是记录文本规则的代码。正则表达式可应用于各种编程语言中。
4.1 常见的正则表达式
| 正则表达式 | 描述 |
|---|---|
^[\w-]+(.[\w-]+)*@[\w-]+(.[\w-]+)+$ | Email格式 |
^[a-zA-z]+://(\w+(-\w+))(.(\w+(-\w+)))(\?\S)?$ | URL地址 |
[a-zA-Z0-9_-] | 常用合法文本 |
^\d+$ | 非负整数 |
[\u4e00-\u9fa5] | 中文字符 |
<(.)>.<\/\1>|<(.*) /> | HTML标记 |
(\d{3}-|\d{4}-)?(\d{8}|\d{7}) | 国内电话 |
4.2 正则表达式语法
4.2.1 元字符
元字符是构成正则表达式最基本的部分，主要的元字符如下表所示
| 元字符 | 描述 |
|---|---|
| . | 查找单个字符，除了换行和行结束符。 |
| \w | 查找单词字符。 |
| \W | 查找非单词字符。 |
| \d | 查找数字。 |
| \D | 查找非数字字符。 |
| \s | 查找空白字符。 |
| \S | 查找非空白字符。 |
| \b | 匹配单词边界(开始或结束)。 |
| \B | 匹配非单词边界。 |
| \0 | 查找 NULL 字符。 |
| \n | 查找换行符。 |
| \f | 查找换页符。 |
| \r | 查找回车符。 |
| \t | 查找制表符。 |
| \v | 查找垂直制表符。 |
4.2.2 重复(量词)
正则表达式验证字符出现的次数，是通过重复限定符来实现的。常用的重复限定符如下表所示
| 重复限定符 | 描述 |
|---|---|
| * | 重复零次或更多次 |
| + | 重复一次或更多次，至少出现一次 |
| ? | 重复零次或一次，最多一次 |
| {n} | 重复n次 |
| {n,} | 重复n次或更多次，至少出现n次 |
| {n,m} | 重复n到m次，至少出现n次，最多出现m次 |
| n$ | 匹配任何结尾为 n 的字符串。 |
| ^n | 匹配任何开头为 n 的字符串。 |
| ?=n | 匹配任何其后紧接指定字符串 n 的字符串。 |
| ?!n | 匹配任何其后没有紧接指定字符串 n 的字符串 |
4.2.3 范围
方括号用于查找某个范围内的字符
| 表达式 | 描述 |
|---|---|
| [abc] | 查找方括号之间的任何字符。 |
| [^abc] | 查找任何不在方括号之间的字符。 |
| [0-9] | 查找任何从 0 至 9 的数字。 |
| [a-z] | 查找任何从小写 a 到小写 z 的字符。 |
| [A-Z] | 查找任何从大写 A 到大写 Z 的字符。 |
| [A-z] | 查找任何从大写 A 到小写 z 的字符。 |
| [adgk] | 查找给定集合内的任何字符。 |
| [^adgk] | 查找给定集合外的任何字符。 |
(red|blue|green) | 查找任何指定的选项。 |
4.2.4 修饰符
修饰符用于执行区分大小写和全局匹配:
| 修饰符 | 描述 |
|---|---|
| i | 执行对大小写不敏感的匹配。 |
| g | 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 |
| m | 执行多行匹配。 |
4.2.5 分支
正则表达式中的分支指的是有几种规则，如果满足其中任何一种规则都是匹配的，只需要将不同的规则以 | 分开罗列即可。
例如：0\d{2}-\d{8}|0\d{3}-\d{7}这个表达式可以匹配三位区号（029-12345678）和四位区号（0910-1234567）两种固定电话号码。
4.3 正则表达式在js中的应用
4.3.1 创建的方式
方式1：
正则表达式是JS中是一个类：RegExp = Regular Expression 正则表达式
var reg = new RegExp("正则表达式");
方式2：
以/开头，以/结尾，中间的部分就是正则表达式
var reg = /正则表达式/;
两种方式的区别：
- 在js中，正则表达式的两种声明方式对于“\d、\D”之类的匹配模式中，前者需要转义，而后者无需转义
- 前者支持字符串拼接，支持变量，更加灵活；后者对于固定的表达式，书写起来方便快捷、更加直观。
匹配模式：
即修饰符， i 表示忽略大小写进行比较，两种写法：
var reg = new RegExp("正则表达式", "匹配模式");
var reg = /正则表达式/匹配模式;
注意:在开发中我们一般不会自己去编写正则表达式 , 一般会使用别人已写好的正则表达式 , 在这里只需大家能读得懂基本的正则表达式和会使用正则表达式即可.
4.3.2 常用的方法
RegExp 对象方法
| 方法 | 描述 |
|---|---|
| toString | 返回正则表达式的字符串。 |
| exec | 检索字符串中指定的值。返回找到的值，并确定其位置。 |
| test | 检索字符串中指定的值。返回 true 或 false。 |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正则</title>
</head>
<body>
<script>
//方式一：RegExp
var reg = new RegExp("\\d{3}");
//方式二：/正则表达式/
var reg = /\d{3}/;
//判断是否匹配
var flag = reg.test("123");
//ignore忽略大小写
var reg = /cat/i;
var reg = new RegExp("cat", "i");
var flag = reg.test("CAT");
document.write("结果：" + flag);
</script>
</body>
</html>
4.3.3 注意
Java中也有正则表达式,默认情况下必须要精确匹配 ;而在JS中默认是模糊匹配，只要字符串包含了正则表达式的内容就返回true
| 正则表达式 | 匹配字符串 | Java中匹配结果 | JavaScript中匹配结果 |
|---|---|---|---|
| \d{3} | a123b | false | true |
| ^\d{3} | 123b | false | true |
| \d{3}$ | a123 | false | true |
| ^\d{3}$ | 123 | true | true |
练习：完成注册表单校验
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
