<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>用户名不能为空的验证</title>
<script>
function checkInfo(){
var userName = document.getElementById("txtName");//获取该元素
if(userName.value.trim()==""){
var findNodes = document.getElementById("info").children;
if(findNodes.length==0){
var addspan = document.createElement("span");
addspan.innerHTML="*用户名不能为空";
addspan.style.color="red";
//把该节点加入到某个节点的子节点下
document.getElementById("info").appendChild(addspan);
}
return false;//只要在表单的单击事件中有return false,表单就不会提交数据
}else{
//查找某个节点下所有的子节点的集合
var findNodes = document.getElementById("info").children;
if(findNodes.length>0){
document.getElementById("info").innerHTML="<img src ='images/1star.gif'>";
}
}
var userPwd = document.getElementById("txtPwd");
if(userPwd.value.trim()==""){
var numbers = document.getElementById("ifok").children;
if(numbers.length==0){
var addspan = document.createElement("span");
addspan.innerHTML="*密码不能为空";
addspan.style.color="red";
//把该节点加入到某个节点的子节点下
document.getElementById("ifok").appendChild(addspan);
}
return false;
}else{
//查找某个节点下所有的子节点的集合
var numbers = document.getElementById("ifok").children;
if(numbers.length>0){
document.getElementById("ifok").innerHTML="<img src ='images/1star.gif'>";
}
}
}
</script>
</head>
<body>
<form name="form1" action="用户名不能为空的验证.html">
<table>
<tr>
<td>
用户名:<input type="text" name="userName"id="txtName" ><em id="info"></em><br>
</td>
</tr>
<tr>
<td>
密码:<input type="password" name="userPwd" id="txtPwd"><em id="ifok"></em><br>
</td>
</tr>
<tr>
<td>
<input type="submit" value="登陆" οnclick="return checkInfo()">
</td>
</tr>
</table>
</form>
</body>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>用户名不能为空的验证</title>
<script>
function checkInfo(){
var userName = document.getElementById("txtName");//获取该元素
if(userName.value.trim()==""){
var findNodes = document.getElementById("info").children;
if(findNodes.length==0){
var addspan = document.createElement("span");
addspan.innerHTML="*用户名不能为空";
addspan.style.color="red";
//把该节点加入到某个节点的子节点下
document.getElementById("info").appendChild(addspan);
}
return false;//只要在表单的单击事件中有return false,表单就不会提交数据
}else{
//查找某个节点下所有的子节点的集合
var findNodes = document.getElementById("info").children;
if(findNodes.length>0){
document.getElementById("info").innerHTML="<img src ='images/1star.gif'>";
}
}
var userPwd = document.getElementById("txtPwd");
if(userPwd.value.trim()==""){
var numbers = document.getElementById("ifok").children;
if(numbers.length==0){
var addspan = document.createElement("span");
addspan.innerHTML="*密码不能为空";
addspan.style.color="red";
//把该节点加入到某个节点的子节点下
document.getElementById("ifok").appendChild(addspan);
}
return false;
}else{
//查找某个节点下所有的子节点的集合
var numbers = document.getElementById("ifok").children;
if(numbers.length>0){
document.getElementById("ifok").innerHTML="<img src ='images/1star.gif'>";
}
}
}
</script>
</head>
<body>
<form name="form1" action="用户名不能为空的验证.html">
<table>
<tr>
<td>
用户名:<input type="text" name="userName"id="txtName" ><em id="info"></em><br>
</td>
</tr>
<tr>
<td>
密码:<input type="password" name="userPwd" id="txtPwd"><em id="ifok"></em><br>
</td>
</tr>
<tr>
<td>
<input type="submit" value="登陆" οnclick="return checkInfo()">
</td>
</tr>
</table>
</form>
</body>
</html>