源代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>利用Dom技术解析HTML</title>
<script language="javascript" type="text/javascript">
//检查用户名是否为空
function checkUserName()
{
var name = document.getElementById("uname").value;
if(name=="")
{
document.getElementById("showMsgName").innerHTML = "<font color='red'>用户名不能为空</font>";
document.getElementById("uname").focus();
return false;
}
else
{
document.getElementById("showMsgName").innerHTML = "";
return true;
}
}
//检查密码是否为空
function checkPasswordNull()
{
var password = document.getElementById("pwd").value;
var name = document.getElementById("uname").value;
if(name!="")
{
if(password=="")
{
document.getElementById("showMsgPwd").innerHTML = "<font color='red'>密码不能为空</font>";
document.getElementById("pwd").focus();
return false;
}
else
{
document.getElementById("showMsgPwd").innerHTML = "";
}
}
else
{
document.getElementById("showMsgName").innerHTML = "<font color='red'>用户名不能为空</font>";
document.getElementById("uname").focus();
}
}
//检查两次输入的密码是否一致
function checkPasswordTheSame()
{
var pwd_input = document.getElementById("pwd").value;
var pwd_repeat = document.getElementById("pwdrepeat").value;
if(pwd_input!=null&&pwd_input!="")
{
if(pwd_repeat!=null&&pwd_repeat!="")
{
if(pwd_input!=pwd_repeat)
{
document.getElementById("showMsgPwdRepeat").innerHTML = "<font color='red'>两次输入的密码不一致</font>";
document.getElementById("pwdrepeat").focus();
return false;
}
else
{
document.getElementById("showMsgPwdRepeat").innerHTML = "";
}
}
}
}
//添加用户事件
function addSort()
{
//获取文本框内容
var name = document.getElementById("uname").value;
var password = document.getElementById("pwd").value;
if(name==""||password=="")
{
return;
}
//定义元素tr
var row = document.createElement("tr");
//设置属性id,值为name，为表中的行
row.setAttribute("id",name);
//定义元素td，并将其添加为tr的子元素
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(name));
row.appendChild(cell);
cell = document.createElement("td");
cell.appendChild(document.createTextNode(password));
row.appendChild(cell);
//添加删除按钮
var delBtn = document.createElement("input");
delBtn.setAttribute("type","button");
delBtn.setAttribute("value","删除");
delBtn.onclick = function () {deleteSort(name);};
cell = document.createElement("td");
cell.appendChild(delBtn);
row.appendChild(cell);
//添加delBtn按钮
document.getElementById("sortList").appendChild(row);
}
//删除用户的按钮事件
function deleteSort(id)
{
if(id!=null)
{
var delRow = document.getElementById(id);
var sortList = document.getElementById("sortList");
sortList.removeChild(delRow);
}
}
//重置按钮事件，清空所有文本框内容
function resetAll()
{
//所有文本框内容清空
document.getElementById("uname").value = "";
document.getElementById("pwd").value = "";
document.getElementById("pwdrepeat").value = "";
document.getElementById("uname").focus();
}
</script>
</head>
<body>
<table border="1" width="500">
<tr>
<td align="center" colspan="3">添加新用户</td>
</tr>
<tr>
<td align="right">用户名</td><td align="left" colspan="2"><input type="text" id="uname" onblur="checkUserName();"/><span id="showMsgName"></span></td>
</tr>
<tr>
<td align="right">密码</td><td align="left" colspan="2"><input type="password" id="pwd" onblur="checkPasswordNull();"/><span id="showMsgPwd"></span></td>
</tr>
<tr>
<td align="right">密码确认</td><td align="left" colspan="2"><input type="password" id="pwdrepeat" onblur="checkPasswordTheSame();"/><span id="showMsgPwdRepeat"></span></td>
</tr>
<tr>
<td colspan="2" align="right"><input type="button" value="添加" onclick="addSort();"/></td><td align="center"><input type="button" value="重置" onclick="resetAll();"/></td>
</tr>
</table>
<table border="1" width="500">
<tr>
<td colspan="3" align="center">用户信息</td>
</tr>
<tr>
<td align="center">用户名</td><td align="center">密码</td><td align="center">删除</td>
</tr>
<tbody id="sortList"></tbody>
</table>
</body>
</html>
