首页 > 代码库 > DOM学习笔记六
DOM学习笔记六
示例：邮件列表
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"table.css" />><body> <table id="mailtable"> <tr> <th><input type="checkbox" name="all" onclick="checkAll(this)">全选</th> <th>发件人</th> <th>邮件名称</th> <th>邮件附属信息</th> </tr> <tr> <td><input type="checkbox" name="mail" /></td> <td>我是1号</td> <td>邮件1号</td> <td>信息1号</td> </tr> <tr> <td><input type="checkbox" name="mail" /></td> <td>我是2号</td> <td>邮件2号</td> <td>信息2号</td> </tr> <tr> <td><input type="checkbox" name="mail" /></td> <td>我是3号</td> <td>邮件3号</td> <td>信息3号</td> </tr> <tr> <td><input type="checkbox" name="mail" /></td> <td>我是4号</td> <td>邮件4号</td> <td>信息4号</td> </tr> <tr> <td><input type="checkbox" name="mail" /></td> <td>我是5号</td> <td>邮件5号</td> <td>信息5号</td> </tr> <tr> <th> <input type="checkbox" name="all" onclick="checkAll(this)"/>全选 </th> <th colspan="3"> <input type="button" value=http://www.mamicode.com/"全选" onclick="chcekAllButton(1)"/>>
校验
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">
function check(name,reg,spanId,okinfor,errinfor){
var flag = false;
var val = document.getElementsByName(name)[0].value;
var oSpanNode = document.getElementById(spanId);
oSpanNode.innerHTML=(reg.test(val))?(flag=true,"√".fontcolor("green")):"X".fontcolor("red");
return flag;
}
//校验用户名
function checkuser(){
var reg = /^[a-z]{4}$/;//注意是正则
return check("user",reg,"userspan");
}
//校验密码
function checkPsw(){
var reg = /^\d{4}$/i;
return check("psw",reg,"pswspan");
}
//校验邮件
function checkMail(){
var reg = /^\w+@\w+(\.\w+)+$/i;
return check("mail",reg,"mailspan");
}
//确定密码
function checkrePsw(){
//只要判断密码是否一致
//获取密码框内容
var flag = false;
var pass = document.getElementsByName("psw")[0].value;
//获取确认密码框内容
var repass = document.getElementsByName("repsw")[0].value;
//获取确认密码的span
var ospanNode = document.getElementById("repswspan");
// alert(pass+" : "+repass);
if(pass==repass) {
ospanNode.innerHTML = "√".fontcolor("green");
flag = true;
}else{
ospanNode.innerHTML = "X".fontcolor("red");
}
return flag;
}
function checkform(){
return checkuser() && checkPsw() && checkrePsw() && checkMail();
//在校验一次，以防校验通过后又改密码
}
function mySubmit(){
var oFormNode = document.getElementById("usersubmit");
if(checkuser() && checkPsw() && checkrePsw() && checkMail())
oFormNode.submit();
}
</script>
<form id="usersubmit" onsubmit="return checkform()"><!--返回false，终止数据提交-->
用户名称: <input type="text" name="user" onblur="checkuser()" />
<span id="userspan"></span>
<br/><br/>
输入密码:<input type="text" name="psw" onblur="checkPsw()" />
<span id="pswspan"></span><br/><br/>
确认密码:<input type="text" name="repsw" onblur="checkrePsw()"/>
<span id="repswspan"></span><br/><br/>
邮件地址:<input type="text" name="mail" onblur="checkMail()"/>
<span id="mailspan"></span><br/><br/>
<input type="submit" value=http://www.mamicode.com/"提交" />
>
示例—问卷调查
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#contectid{
display: none;
}
#noul{
list-style: none;
margin: 0px;
}
.close{
display: none;
}
.open{
display: block;
}
</style>
</head>
<body>
<!--
单选按钮演示
1.是否参与问卷调查
2.性格测试
-->
<script type="text/javascript">
function showResult(){
//1.判断是否参与选择，获取所有no1的radio，并判断checked状态
var oNo1Node = document.getElementsByName("no1");
var flag = false;
var val;
for(var i = 0;i<oNo1Node.length;i++){
if(oNo1Node[i].checked){
flag = true;
val = oNo1Node[i].value;
break;
}
}
if(!flag){
document.getElementById("errInformation").innerHTML="没有答案被选中!".fontcolor("red");
return;
}
if(1<=parseInt(val) && parseInt(val)<=3){
document.getElementById("res_1").className="open";//1只要显示了，2就不要显示
document.getElementById("res_2").className="close";
}else{
document.getElementById("res_2").className="open";
document.getElementById("res_1").className="close";
}
}
</script>
<h2>欢迎参加性格测试:</h2>
<div>
<h3><span>No.1:您喜欢什么?</span></h3>
<ul id="noul">
<li><input type="radio" name="no1" value=http://www.mamicode.com/"1"/>A>
下拉菜单<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.clrclass{
height: 50px;
width: 50px;
float: left;
margin-right: 20px ;
}
#txt{
clear: left;
margin-top:50px;
}
.selClass{
width: 100px;
}
</style>
</head>
<body>
<script type="text/javascript">
function Changecolor(node){
// alert(node.style.backgroundColor);
var color = node.style.backgroundColor;
document.getElementById("txt").style.color = color;
}
</script>
<div class="clrclass" id="clr1" style="background-color: red" onclick="Changecolor(this)"></div>
<div class="clrclass" id="clr2" style="background-color: yellow" onclick="Changecolor(this)"></div>
<div class="clrclass" id="clr3" style="background-color: blue" onclick="Changecolor(this)"></div>
<div id="txt">
需要显示效果的文字</br>
需要显示效果的文字</br>
需要显示效果的文字</br>
需要显示效果的文字</br>
</div>
<hr/>
<script type="text/javascript">
function Changecolor2(){
var oselectNode = document.getElementsByName("selectcolor")[0];
//如何确定选择是哪种颜色，select API
var ooptinNodes = oselectNode.options;//获取所有的option
// alert(oselectNode.selectedIndex);//被选中颜色的索引
// alert(oselectNode.options[oselectNode.selectedIndex].innerHTML);
var color = oselectNode.options[oselectNode.selectedIndex].value;
document.getElementById("txt").style.color = color;
}
</script>
<select name="selectcolor" onchange="Changecolor2()">
<option value=http://www.mamicode.com/"black">选择颜色>
添加和删除附件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table a:link,table a:visited{
color: #0066FF;
text-decoration: none;
}
table a:hover{
color: red;
}
</style>
<script type="text/javascript">
function addFile(){
var oTableNode = document.getElementById("fileid");
var oTrNode = oTableNode.insertRow();
var oTdNode_file = oTrNode.insertCell();//添加文件的单元格
var oTdNode_dele = oTrNode.insertCell();//删除文件的单元格
oTdNode_file.innerHTML = "<input type='file' />";
//oTdNode_dele.innerHTML = "<a href='javascript:void(0)' onclick='deleteFile(this)'> 删除附件 </a>";
oTdNode_dele.innerHTML = "<img src='1000.jpg' alt='删除文件' onclick='deleteFile(this)'>";
}
function deleteFile(node){
var oTrNode = node.parentNode.parentNode;
oTrNode.parentNode.removeChild(oTrNode);
}
</script>
</head>
<body>
<table id="fileid">
<tr>
<td>
<a href="javascript:void(0)" onclick="addFile()">添加附件</a>
</td>
</tr>
<!--
//点击添加文件，才显示
<tr>
<td>
<input type="file"/>
</td>
<td>
<a href="javascript:void(0)" onclick="deleteFile()"></a>
</td>
</tr>
-->
</table>
</body>
</html>
表单校验—涉及的事件和信息提示方式&&正则表达式&&提交校验
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">
function checkuser(){
var flag = false;
// alert("ni");
var oUserNode = document.getElementsByName("user")[0];
var oSpanNode = document.getElementById("userspan");
var name = oUserNode.value;
//定义正则表达式
var reg = new RegExp("^[a-z]{4}$","i");//头尾一共4个字母，i忽略大小写
//reg = new RegExp("^[0-9]{4}$");//必须4个数字
// reg = /^[0-9]{4}$/;//第二种定义格式/..../，因为不是字符串，不需要再次转义，比如\d,在这
//种方式中直接写\d，即可
// alert(oUserNode.value);
//实例校验,test方法，判断是否符合正则,match,返回的不是boolean
oSpanNode.innerHTML=(reg.test(name))? ("√".fontcolor("green"),flag=true):"X".fontcolor("red");
return flag;
}
//form的onsubmit事件，提交事件处理
function checkform(){
//如果用户名正确，才允许提交
return checkuser();
}
function mySubmit(){
var oFormNode = document.getElementById("usersubmit");
if(checkuser())
oFormNode.submit();//form的提交方法
}
</script>
<form id="usersubmit" onsubmit="return checkform()"><!--返回false，终止数据提交-->
<!--自动校验，光标在文本框中，是获取焦点事件onblur-->
用户名称: <input type="text" name="user" onblur="checkuser()" />
<span id="userspan"></span>
<br/><br/>
输入密码:<input type="text" name="psw" ><br/><br/>
<input type="submit" value=http://www.mamicode.com/"提交" />
>
DOM学习笔记六
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。