黑马程序员_毕老师_CSS_JS(下)

来源：互联网发布：优化方案答案编辑：程序博客网时间：2024/05/04 03:59

-------android培训、java培训、期待与您交流！ ----------

空间备份

table对象
rows属性：获取表格中所有的行cells属性：表格中所有单元格
使用table对象创建行对象：table.insertRow([index])，index默认-1，表示在行尾插入一行。添加到cells集合中去，和上面一行所说的cells不一样。这里是添加到一行中的单元格中去。
用tr对象创建单元格：tr.insertCell()
注意table的下一级子节点tbody，添加行节点要加在tbody下
tr对象也有cells集合属性，获取的是这一行中的单元格集合
给对象添加属性
1、tabNode.id = “tabid”
2、tabNode.setAttribute(“id”,”tabid”)
删除表格节点：
删除行：tabNode.deleteRow(rowIndex)
删除列：删除所有行的指定单元格获取列数tabNode.rows[0].cells.length
trNode.deleteCell(cellIndex)
表格数据排序过程中定义的临时容器（存放行对象的数组）存放的都是行对象的引用。

对象.innerText 可以获取或设置对象的内部文本，但是包含的HTML标签或属性也会作为纯文本解析。要将内部的标签或HTML属性解析，需要使用innerHTML
按钮一次性点击效果：event.srcElement事件源/input对象.disabled=true按钮点击后变灰

将表格中按照年龄的顺序进行排序，代码如下：
<html>
<head>
<link rel="stylesheet" href="tab.css" />
<script type="text/javascript" src="docTool.js"></script>
<script type="text/javascript">
/*
表格中按照年龄的顺序进行排序
思路：
1，每一个人的信息是一行。
那么先将行都取出，临时存入到数组中。
2，并对数组中的行对象的其中一个单元格中的数据进行排序。
3，将后的行对象重新添加到表格中。
*/
var b = true;
function sorttab()
{
//1,获取表格中所有的行对象
var tabNode = byTag("table")[0];
var trs = tabNode.rows;

//2,定义临时容器，将表格中需要参与排序的行对象临时进行存储。
var arr = new Array(); //在这个临时容器中存入的都是表格行对象引用。
for(var x=1; x<trs.length; x++)
{
arr[x-1] = trs[x];
}
sortt(arr);
var tbdNode = tabNode.childNodes[1];
//alert(tbdNode.nodeName);
if(b)
{
for(var x=0; x<arr.length; x++)
{
//alert(arr[x].cells[0].innerText+"..."+arr[x].cells[1].innerText);
tbdNode.appendChild(arr[x]);
}
b=false;
}
else
{
for(var x=arr.length-1; x>=0; x--)
{
tbdNode.appendChild(arr[x]);
}
b = true;
}
}
function sortt(arr)
{
for(var x=0; x<arr.length; x++)
{
for(var y=x+1; y<arr.length; y++)
{
if(parseInt(arr[x].cells[1].innerText)>parseInt(arr[y].cells[1].innerText))//在这里是按字典的顺序排序，所以要转换为整数的形式。
{
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
}
}
}
</script>
</head>
<table>
<tr>
<th>姓名</th>
<th><a href="javascript:void(0)" onclick="sorttab()">年龄</a></th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>30</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>34</td>
<td>上海</td>
</tr>
<tr>
<td>王武</td>
<td>23</td>
<td>广州</td>
</tr>
<tr>
<td>赵六</td>
<td>27</td>
<td>南京</td>
</tr>
<tr>
<td>周七</td>
<td>25</td>
<td>大连</td>
</tr>
<tr>
<td>孙八</td>
<td>4</td>
<td>铁岭</td>
</tr>
</table>
<body>
</body>
</html>

表格行颜色间隔显示和鼠标悬浮行高亮效果：
间隔显示：奇偶行分别加载不同样式即可，onload事件中加载
悬浮高亮：行对象的onmouseover和onmouseout事件
<html>
<head>
<link rel="stylesheet" href="tab.css" />
<style sype="text/css">
.one{
background-color:#3C6;
}
.two{
background-color:#C93;
}
.over{
background-color:#FF0;
}
</style>
<script type="text/javascript" src="docTool.js"></script>
<script type="text/javascript">
//行颜色间隔显示
function trcolor()
{
var tabNode = byTag("table")[0];
var trs = tabNode.rows;
for(var x=1; x<trs.length; x++)
{
if(x%2==1)
trs[x].className = "one";
else
trs[x].className = "two";
trs[x].onmouseover = function()
{
name = this.className;
this.className = "over";
}
trs[x].onmouseout = function()
{
this.className = name;
}
}
}
var name;
/*
function over(trNode)
{
name = trNode.className;
trNode.className = "over";
}
function out(trNode)
{
trNode.className = name;
}
*/
window.onload = trcolor; //在这里可以写匿名函数，那里面可以加载很多的东西。如果不用匿名函数的话，用trcolor也可以。
</script>
</head>

<body>
<table>
<tr>
<th>姓名</th>
<th><a href="javascript:void(0)" onclick="sorttab()">年龄</a></th>
<th>地址</th>
</tr>
<tr > 
<td>张三</td>
<td>30</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>34</td>
<td>上海</td>
</tr>
<tr>
<td>王武</td>
<td>23</td>
<td>广州</td>
</tr>
<tr>
<td>赵六</td>
<td>27</td>
<td>南京</td>
</tr>
<tr>
<td>周七</td>
<td>25</td>
<td>大连</td>
</tr>
<tr>
<td>孙八</td>
<td>4</td>
<td>铁岭</td>
</tr>
</table>

</body>
</html>

复选框操作：获取总金额
获取所有复选框checkboxs，遍历，判断checked属性if (checkedboxs[x].checked)
注意将复选框的value属性值进行parseInt转换
全选时将其他复选框的checked属性值改为全选框的checked属性值即可
<html>
<head>
<script type="text/javascript" src="docTool.js"></script>
<script type="text/javascript">
//1,获取被选中的chechbox，通过checked属性的状态完成，
//2,获取被选择checkbox的value的金额
//3,求和
//4,定义span区域存储总金额。(这里也可以用div可以如果用div的话会换行了。)
function getSum()
{
var items = byName("item");
var sum = 0;
for(var x=0; x<items.length; x++)
{
if(items[x].checked)
sum += parseInt(items[x].value); //如果不用parseInt话，会显示成字符串的形式。而不会实现金额的数据的累加。
}
var spanNode = byId("sum");
var str = sum + "元";
spanNode.innerHTML = str.fontsize(7);
}
function checkAll(index)
{
var allNode = byName("all")[index];
var items = byName("item");
var sum = 0;
for(var x=0; x<items.length; x++)
{
items[x].checked = allNode.checked
//sum += parseInt(items[x].value);
}
}
</script>
</head>

<body>
<input type="checkbox" name="all" onclick="checkAll(0)"/>全选<br />

<input type="checkbox" name="item" value="3000"/>笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000"/>笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000"/>笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000"/>笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000"/>笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000"/>笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000"/>笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000"/>笔记本电脑：3000元<br />
<input type="checkbox" name="all" onclick="checkAll(1)"/>全选<br />
<input type="button" value="获取总金额" onclick="getSum()" /><span id="sum"></span>
</body>
</html>

通过下拉列表动态改变页面样式：select标签的onchange事件
options属性：所有列表项selectedIndex：选中项的角标
获取列表选中项：selectNode.options[selectNode.selectedIndex] 值.value
DOM代码改变div区域内文本样式：divNode.style.textTransform
uppercase lowercase capitalize首字母大写
<html>
<head>
<script type="text/javascript" src="docTool.js"></script>
<style type="text/css">
#cssid{
height:100px;
width:300px;
background-color:#F93;
}
#textid{
background-color:#CCC;
width:300px;
}
</style>
<script type="text/javascript">
function change()
{
var selNode = byId("selid");
var value = selNode.options[selNode.selectedIndex].value;
//alert(value);
var divNode1 = byId("cssid");
var divNode2 = byId("textid");
divNode1.style.textTransform = value;
divNode2.innerText = "text-transform:"+value+";";
}
</script>
</head>

<body>
<div id="cssid">
Good good study,Day dya up!
</div>
<p>
</p>
<select id="selid" onchange="change()">
<option value="none">--text—transform--</option>
<option value="capitalize">首字母大写</option>
<option value="lowercase">所有字母小写</option>
<option value="uppercase">所有字母大写</option>
</select>
<p></p>
<div id="textid">
text-transform:none;
</div>
</body>
</html>

级联菜单：省市选择示例 select标签onchange事件添加option项
将省份对应的城市城市列表封装进二维数组，角标和省的option项角标一致
选中省份后，遍历对应的城市列表，将其封装进option标签中并添加到子菜单中
注意：在添加子项前需先清空子菜单项，以免将上一选项结果遗留
再次注意：清空子项用遍历时，注意removeChild一次，length就减一次，如果循环变量跟着递增就会移不完
移除下拉选项的简单方法，直接将列表的options属性的length置为0即可
<html>
<head>
<script type="text/javascript" src="docTool.js"></script>
<script type="text/javascript">
function selCity()
{
//在开发中，因为城市太多了，可以在网上找到相差城市后，先切一下，然后封装与数组再来用。这个数组最好封装到一js文件中去，这样的话，很多的样式都可以用。
var arr = [['--选择城市--'],
["海淀区","朝阳区","东城区","西城区"],
["沈阳","大连","鞍山","抚顺"],
["洛阳","郑州","开封","南阳"]];
var index = byId("selid").selectedIndex;
//alert(byId("selid").options[index].innerText);
var subselNode = byId("subselid");
var citys = arr[index];
subselNode.options.length = 0; //这个是上面的那个
/*for(var x=0; x<subselNode.options.length; ) //如果这里是0的话，就没有“--选择城市--这一个选项了”，第一项直接就是海淀区。这个for循环用于在添加之前，把上一个所有添加的东西给移除。另外要明确的是长度在递减，x在自增，一折中，有的东西没有删完。所以不写x++了，不递增了，只删位置为0的位置。
{
//alert(x+".."+subselNode.options[x].innerText+"...."+subselNode.options.length)
subselNode.removeChild(subselNode.options[x]);
}
*/
for(var x=0; x<citys.length; x++)
{
var optNode = doc.createElement("option");
optNode.innerText = citys[x];
subselNode.appendChild(optNode);
}
}
</script>
</head>

<body>
<select id="selid" onchange="selCity()">
<option>--选择城市</option>
<option>北京</option>
<option>辽宁</option>
<option>山东</option>
<option>河南</option>
</select>
<select id="subselid">
<option>--选择城市--</option>
</select>
</body>
</html>

添加附件的事例：
<html>
<head>
<style type="text/css">
table td a:link,table td a:visited{
text-decoration:none;
color:#F63;
}
table,table td{
border:#3F0 1px solid;
}
</style>
<script type="text/javascript" src="docTool.js"></script>
<script type="text/javascript">
var count = 1;
function addFile()
{
var tabNode = byTag("table")[0];
var trNode = tabNode.insertRow();
trNode.id = "tr_"+count;

//给每一行都固定一个名字，这个id名不是我写在标签里面的，而是我动态的创建出来的。
var tdNode_file = trNode.insertCell();
var tdNode_del = trNode.insertCell();
tdNode_file.innerHTML = "<input type = 'file' />";
tdNode_del.innerHTML = "<a href='javascript:void(0)' onclick='delFile1("+count+")'>删除附件"+count+"</a>";
//如果用deleteRow(),删除行的话，等级和长度在发生着变化。少了一行，其他行的角标也在发生着变化。不应该这样，我们可以通过给行对象编号的方式来完成。
//不通过编号的方式来删除，可以用下面的方式：
tdNode_del.innerHTML = "<a href='javascript:void(0)' onclick='delFile(this)'>删除附件"+count+"</a>";
count++;
}
function delFile(node)
{
var trNode = node.parentNode.parentNode;
trNode.parentNode.removeChild(trNode);
}
function delFile1(num)
{
var trNode = byId("tr_"+num);
/*
var tabNode = byTag("table")[0]; //这样做的话麻烦，能不能有更简单的方式呢？
var tbdNode = tabNode.childNodes[1];
tbdNode.removeChild(trNode);
*/
trNode.parentNode.removeChild(trNode);
//alert(node.nodeName);
}
</script>
</head>

<body>
<table>
<tr>
<td>
<a href="javascript:void(0)" onclick="addFile()">添加</a>
</td>
</tr>
</table>
</body>
</html>

JavaScript代码写在head标签内时要注意全局变量的问题：
函数只有调用时才执行，封装在函数内部的变量没有问题；在函数外部定义的全局变量，页面加载时还没读到下边的具体标签，全局变量获取指定标签对象时就会出现null

获取鼠标的坐标，让指定区域随鼠标移动
获取鼠标坐标方法：event.xevent.y
随鼠标移动：改变指定区域的left和top属性
用到的事件：body对象的onmousemove
还用到CSS样式的position定位属性，将页面分层，使指定区域悬浮在body区域上方。层次：直接定义页面所有对象到同一个层里，为了对某个区域进行移动、定位，将该区域分离到另一个单独的层里
<body>
//用position属性将广告区域进行分层，绝对定位，使广告区域悬浮在body区域上方
<div id=”ad” style=”position:absolute; left:0; top:0”>广告</div>
<div id=”bodyid”>body区域</div>
</body>
window.onload=function()
｛
document.body.onmousemove = function()
{
var adNode=document.getElementById(‘ad’)
adNode.style.left = event.x;
adNode.style.top = event.y;
}
｝
流氓：将广告区域的坐标值设置为鼠标坐标值左上一点，使鼠标停在广告区域中
将广告区域用a标签封装
在广告区域添加点击事件，点击后关闭广告ad.style.dislay=none
限定边界： addiv.offsetWidth广告区域自己的宽度
document.body.clientWidthbody区域的宽度
边界内移动代码：
<script type="text/javascript">
var x=y=1;
var movex=movey=0;

function move()
{
var ad = document.getElementById("ad");
movex = movex + x*5;//每次移动位置递增5个像素
movey = movey + y*5;

ad.style.left = movex;//移动
ad.style.top = movey;
//alert("aaaaaaaa");

var bdx = document.body.clientWidth;//获取当前浏览器页面窗口的宽和高
var bdy = document.body.clientHeight;
var adx = ad.offsetWidth;//获取广告区域的大小
var ady = ad.offsetHeight;
//alert(bdx+"----------"+bdy);
if (movex+adx >= bdx)//判断是否移到边界了
{ //移到边界开始递减
x = -1;
}
else if (movex <= 0)//递减只零再开始递增
{
x = 1;
}

if (movey+ady >= bdy)
{
y = -1;
}
else if (movey <= 0)
{
y = 1;
}
}
var timeid;
function fly()//飞吧每个10毫秒执行一次移动
{
//move();
timeid = window.setInterval("move()", 100);
}
function over()//鼠标进入广告区停止移动
{
window.clearInterval(timeid);
}
window.onload = function() //页面一加载就开始飞
{
fly();
var ad = document.getElementById("ad");
ad.onmouseover = function()
{
over(); //鼠标进入取消定时移动
}
ad.onmouseout = function()
{
fly(); //鼠标离开继续移动
}
}
function closeAD() //点击关闭后停止定时移动，隐藏广告区域
{
var ad = document.getElementById("ad");
ad.style.display = 'none';
over();
}
</script>

</head>
<body>

<div id="ad" style="position:absolute; border: red 1px solid; left:0; top:0; height:90; width:90">
<a href="http://www.ad.com" target="_blank">广告</a><br/><br/><br/><br/>
<a href="javascript:void(0)" onclick="closeAD()">关闭广告</a></div>

</body>

邮件列表示例中删除所选邮件时注意：
和用遍历方法删除列表项时的问题一样，删除时，长度递减，循环变量递增，删不全
可定义一个临时容器用来存储待删除的节点索引，然后遍历临时容器时再删除这些节点。临时容器中存放的也是表格行节点的引用，每次删除完颜色事件都要加载一遍

邮件列表示例：
<html>
<head>
<style type="text/css">
table{
border: black 2px solid;
border-collapse: collapse;
text-align: center;
width: 600px;
/* margin: 10px;外框边距*/
}
table th{
background: #33FF33;
}
table td, table th{
padding: 5px;
border: black 1px solid;
}
.one{
background: #CCFF66;
}
.two{
background: #FFCCFF;
}
.over{
background: #FF9933;
}
</style>

<script type="text/javascript">
var name;
//行颜色间隔显示并高亮。
function trColor()
{
var tabNode = document.getElementById("maillist");
var tabRows = tabNode.rows;
for (var x=1; x<tabRows.length-1; x++)
{
if (x%2==1)
{
tabRows[x].className = "one";
}
else
tabRows[x].className = "two";

tabRows[x].onmouseover = function()
{
name = this.className;
this.className = "over";
}
tabRows[x].onmouseout = function()
{
this.className = name;
}
}
}
window.onload = function()
{
trColor();
}
//完成checkbox的全选的动作。
function checkAll(index)
{
var allNodes = document.getElementsByName("all");
//不管选的哪个都让两个全选框一样
allNodes[Math.abs(index-1)].checked = allNodes[index].checked;
var mails = document.getElementsByName("mail");
for (var x=0; x<mails.length; x++)
{
mails[x].checked = allNodes[index].checked;
}
}
//完成按钮的选取
function checkByBut(mode) //选择按钮事件处理
{
var mails = document.getElementsByName("mail");
for (var x=0; x<mails.length; x++)
{
if (mode==2)
mails[x].checked = !mails[x].checked;
else
mails[x].checked = mode; //如果传进来的数字，为0的话为假，为1的话是真。
}
}
//删除所选邮件
function del()
{
if(!window.confirm("你真人要删除所选邮件吗？"))
return ;
/*
var mails = document.getElementsByName("mail");
for (var x=0; x<mails.length; x++)
{
if (mails[x].checked)
{
var trNode = mails[x].parentNode.parentNode;
trNode.removeNode(true);//这样删掉之后length在减小而x在递增导致删一半留一半，可是在这里又不能去掉x++;
}
}
trColor();
*/
//把被选中的那个行对象的索引给它取出来。
var arr = new Array();//定义一个临时的容器，记录所有被选择对象的引用。记录完之后可以统一的干掉。
var pos = 0;
var mails = document.getElementsByName("mail");
for (var x=0; x<mails.length; x++)
{
if (mails[x].checked)
{
var trNode = mails[x].parentNode.parentNode;
arr[pos++] = trNode;
}
}
var tabNode = document.getElementById("maillist");
var tabRows = tabNode.rows;
for (var x=0; x<arr.length; x++)
{
arr[x].removeNode(true);
}
trColor(); //每次删完了之后，重新加载一次样式，颜色间隔效果

}
</script>

<body> 

<table id="maillist">
<tr>
<th><input type="checkbox" name="all" onclick="checkAll(0)" />全选</th>
<th>发件人</th>
<th>邮件主题</th>
<th>邮件内容</th>
<tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三11</td>
<td>主题：邮件11</td>
<td>内容：邮件11</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三22</td>
<td>主题：邮件22</td>
<td>内容：邮件22</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三33</td>
<td>主题：邮件33</td>
<td>内容：邮件33</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三44</td>
<td>主题：邮件44</td>
<td>内容：邮件44</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三55</td>
<td>主题：邮件55</td>
<td>内容：邮件55</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三66</td>
<td>主题：邮件66</td>
<td>内容：邮件66</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三77</td>
<td>主题：邮件77</td>
<td>内容：邮件77</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三88</td>
<td>主题：邮件88</td>
<td>内容：邮件88</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三99</td>
<td>主题：邮件99</td>
<td>内容：邮件99</td>
</tr>

<tr>
<th><input type="checkbox" name="all" onclick="checkAll(1)" />全选</th>
<th colspan=3>
<input type="button" value="全选" onclick="checkByBut(1)" />
<input type="button" value="取消选择" onclick="checkByBut(0)" />
<input type="button" value="反选" onclick="checkByBut(2)" />
<input type="button" value="删除所选邮件" onclick="del()" />
</th>
<tr>
</table>
</body>

表音校验示例1：
<html>
<head>
<script type="text/javascript" src="docTool.js"></script>
<script type="text/javascript">
function checkUser(userNode)
{
var name = userNode.value;
var namereg = new RegExp("^[a-z]{5}$"); //封装一个头，封装一个尾，要保证在字符串的头到尾先是5个。
var spanNode = byId("userspan");
if(name.match(namereg)) //match返回的是一个数组。null就为假，非空就为真。
spanNode.innerHTML = "用户名正确".fontcolor("green");
//这是一种方式，但是要在这里面写文字。不写文字，让文字直接在页面上也可以。
else
spanNode.innerHTML = "错误的用户名".fontcolor("red");
}
</script>
</head>

<body>
<form>
用户名称：<input type="text" name="user" onblur="checkUser(this)" />
<span id="userspan"></span>
<br />
输入密码：<input type="text" name="psw" /><br />
确认密码：<input type="text" name="repsw" /><br />
邮件地址：<input type="text" name="mail" />
<br />
<input type="submit" name="提交数据" />
</form>

</body>
</html>

表单验证示例2：
<html>
<head>
<style type="text/css">
#useryes,#userno{
display:none;
}
</style>
<script type="text/javascript" src="docTool.js"></script>
<script type="text/javascript">
function checkUser(userNode)
{
var name = userNode.value;
var namereg = new RegExp("^[a-z]{5}$");
var spanNode1 = byId("useryes");
var spanNode2 = byId("userno");
if(name.match(namereg))
{
spanNode1.style.display = "inline";
spanNode1.style.color = "green";
spanNode2.style.display = "none";
}
else
{
spanNode2.style.display = "inline";
spanNode2.style.color = "red";
spanNode1.style.display = "none";
}
}
function checkPsw(pswNode)
{
var pass = pswNode.value;
//var passreg = new RegExp("^[0-9]{5}$");
//var passreg = new RegExp("^\\d{5}$");
var passreg = /^\d{5}$/; //只有在字符串中\d才需要转义，在这里用//来表示正则，不用转义了。
var spanNode = byId("pswspan");
if(pass.match(passreg))
spanNode.innerHTML = "密码正确".fontcolor('green');
else
spanNode.innerHTML = "密码错误".fontcolor('red');
}
function checkMail(mailNode)
{
var mail = mailNode.value;
var mailreg = /^\w+@\w+(\.\w+)+$/; //用正则表达式，对数据进行校验
var spanNode = byId("mailspan");
if(mailreg.test(mail))
spanNode.innerHTML = "邮件正确".fontcolor('green');
else
spanNode.innerHTML = "邮件错误".fontcolor('red');
}
function checkForm()
{
//event.returnValue = true; //如果为false,用它可以中途将表单数据给中止掉。如果所有的选项都已经变成为红色的了，那才将其设成为true; 还有另外一种表示方式：不写这一句，只写return true; 在form表单中，onsubmit = "return checkForm()"
//alert(document.froms[0].user.vlaue)
var form = doc.forms[0];
if(checkUser(form.user) && checkPsw(form.psw))//你每次离开的时候校验一次，当要提交的时候再校验一次。增加安全性。
return true;
}
</script>
</head>

<body>
<form action="127.0.0.1" onsubmit="checkForm()">
用户名称：<input type="text" name="user" onblur="checkUser(this)" />
<span id="useryes">用户名正确</span> 
<span id="userno">用户名错误</span>
<br />
输入密码：<input type="text" name="psw" onblur="checkPsw(this)"/>
<span id="pswspan"></span>
<br />
确认密码：<input type="text" name="repsw" /><br />
邮件地址：<input type="text" name="mail" onblur="checkMail(this)" />
<span id="mailspan"></span>
<br />
<input type="submit" name="提交数据" />

</form>
</body>
</html>

表单校验：
可以用document.forms获取页面中的所有表单对象
拿到表单对象后，可以直接使用表单中的组件名获取对应组件
输入框失去焦点时就开始验证：onblur事件发生就开始验证
怎么让表单验证失败时提交不出去呢？
1、表单标签中的onsubmit事件中，event.returnValue=false提交按钮就失效了
2、在onsubmit事件处理函数中返回false（不提交）或true（提交），再将返回结果返回给onsubmit事件即可 onsubmit=“return checkForm()”
事件处理函数中使用returnValue时，onsubmit不用return即可

JS中的正则表达式限定开始结束位置^ $
两种写法：var reg = /^\d{5}$/5位数字，下同
var reg = new RegExp(“^\\d{5}$”);
var namereg = /^[a-z]{5}$/i5为字母后面加i不分大小写
下面的示例创建一个包含正则表达式模式及相关标志的对象(re)，向您演示正则表达式对象的用法。在本例中，作为结果的正则表达式对象又用于 match 方法中：
function MatchDemo(){
var r, re; // 声明变量。
var s = "The rain in Spain falls mainly in the plain";
re = new RegExp("Spain","i"); // 创建正则表达式对象。
r = s.match(re); // 在字符串 s 中查找匹配。
return(r); // 返回匹配结果。
}
如果String对象的 match 方法没有找到匹配，返回 null。

RegExp对象的test方法也可判断是否匹配
reg.test(str) 返回boolean

<html>
<head>
<style>
table{
border:#03F 1px solid;
width:600px;
border-collapse:collapse;
}
table th, table td{
border:#600 1px solid;
padding:10px;
}
table td{
background-color:#0F0;
}
table th{
background-color:#090;
}
#repswspan{
margin-left:116px
}
.errorinfo{
color:#F00;
display:none;
}
.focus{
border:#60F 2px solid;
}
.norm{
border:#999 1px solid;
}
.error{
border:#F00 2px solid;
}
</style>
<script type="text/javascript">
function inputColor(input) //这个是为了提高重用性。
{
input.className = "norm";
input.onfocus = function()
{
this.className = "focus";
}
}
window.onload = function()
{
with(document.forms[0])
{
inputColor(user);
inputColor(psw);
inputColor(repsw);
inputColor(mail);
}
}
//校验方法
function check(inputNode, regex, divId)
{
var b = false;
var divNode = document.getElementById(divId);
if(regex.test(inputNode.value))
{
inputNode.className = "norm";
divNode.style.display = "none";
b = true;
}
else
{
inputNode.className = "error";
divNode.style.display = "block";
}
return b;
}

//校验用户名,老式的，麻烦，已过期。
function checkUserDemo(userNode)
{

var value = userNode.value;
var regex = /^\w{3,5}$/;
var divNode = document.getElementById("userdiv");
if(regex.test(value))
{
userNode.className = "norm";
divNode.style.display = "none";
return true;
}
else
{
userNode.className = "error";
divNode.style.display = "block";
return false;
}
}
//校验用户名
function checkUser(userNode)
{
var regex = /^\w{3,5}$/;
return check(userNode, regex, "userdiv");
}
//校验密码
function checkPsw(pswNode)
{
var regex = /^[a-z0-9]{3,5}$/i;
return check(pswNode, regex, "pswdiv");
}
//校验确认密码
function checkRepsw(repswNode)
{
var b = false;
var value1 = repswNode.value;
var value2 = document.getElementsByName("psw")[0].value;
var divNode = document.getElementById("repswdiv");
if(value1==value2)
{
repswNode.className = "norm";
divNode.style.display = "none";
b = true;
}
else
{
repswNode.className = "error";
divNode.style.display = "block";
}
return b;
}
//校验mail
function checkMail(mailNode)
{
var regex = /^\w+@\w+(\.\w+)+$/;
return check(mailNode, regex, "maildiv");
}
//校验表单
function checkForm(formNode)
{
with(formNode)
{
if(checkUser(user) && checkPsw(psw) && checkRepsw(repsw) && checkMail(mail))
event.returnValue = true;
else
event.returnValue = false;
}
}
</script>
</head>

<body>

<form onsubmit="checkForm(this)">
<table>
<tr>
<th>注册表单</th>
</tr>
<tr>
<td>
<div>用户名</div>
<div><input type="text" name="user" onblur = "checkUser(this)"/></div>
<div class="errorinfo" id="userdiv">用户名错误，请按要求输入</div>
<div>用户名必须是3-5位，由字母（a-z）,数字（0-9），下划线（_）组成</div>
</td>
</tr>
<tr>
<td>
<div><span>密码</span> <span id="repswspan">确认密码</span></div>
<div>
<input type="password" name="psw" onblur = "checkPsw(this)"/>
<input type="password" name="repsw" onblur = "checkRepsw(this)"/>
</div>
<div class="errorinfo" id="pswdiv">密码格式错误，请按规范输入</div>
<div class="errorinfo" id="repswdiv">两次密码输入不一致</div>
<div>密码必须是3-5位，由字母（a-z）,数字（0-9），组成</div>
</td>
</tr>
<tr>
<td>
<div>邮件地址</div>
<div><input type="text" name="mail" onblur = "checkMail(this)"/></div>
<div class="errorinfo" id="maildiv">邮箱地址错误，请按要求填写</div>
</td>
</tr>
<tr>
<th>
<input type="submit" value="提交数据"/>
</th>
</tr>
</table>
</form>
</body>
</html>

-------android培训、java培训、期待与您交流！ ----------

0 0