用户名不能为空的验证

来源：互联网发布：阿里云大厦是做什么的编辑：程序博客网时间：2024/05/23 01:58

<!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="登陆" onclick="return checkInfo()">
</td>
</tr>
</table>
</form>
</body>
</html>

1 0