icewizardry 2015-09-12
附上一张效果图 <!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> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
<title>无标题文档</title> | |
<style> | |
.errMsg{font-size:12px; color:#F00;} | |
</style> | |
<script> | |
function nameerr(){ | |
var nameval = document.getElementById("userName").value; | |
var reg = /^[a-z|A-Z]{1}[a-z|A-Z|0-9|_]{5,19}$/; | |
//alert(reg.test(nameval)); | |
if(reg.test(nameval)){ | |
clearErr("userNameCk"); | |
return true; | |
}else{ | |
document.getElementById("userNameCk").style.display=""; | |
document.getElementById("userNameCk").innerHTML = "用户名非法"; | |
return false; | |
} | |
} | |
function clearErr(eleId){ | |
document.getElementById(eleId).style.display="none"; | |
} | |
function verifyEmail(){ | |
var emailval = document.getElementById("email").value; | |
var reg = /^[a-zA-Z][a-zA-Z0-9_-]*@([a-zA-Z0-9_-]+.)+(com|gov|net|com.cn|edu.cn)$/; | |
//alert(reg.test(emailval)); | |
if(reg.test(emailval)){ | |
clearErr("emailCk"); | |
return true; | |
}else{ | |
document.getElementById("emailCk").style.display=""; | |
document.getElementById("emailCk").innerHTML = "邮箱地址非法"; | |
return false; | |
} | |
} | |
function regist(){ | |
if(nameerr()&&verifyEmail()){ | |
alert("注册成功!"); | |
document.form1.submit(); | |
}else{ | |
alert("注册失败!"); | |
} | |
} | |
</script> | |
</head> | |
<body> | |
<form id="form1" name="form1" method="get" action="http://www.baidu.com"> | |
<table align="center" width="580" border="1" cellspacing="0" cellpadding="2"> | |
<tr> | |
<td width="125">用户名</td> | |
<td width="262"><label for="userName"></label> | |
<input type="text" name="userName" id="userName" onblur="nameerr();" onfocus="clearErr('userNameCk');" /></td> | |
<td width="173"><div id="userNameCk" class="errMsg"></div></td> | |
</tr> | |
<tr> | |
<td>邮箱</td> | |
<td><label for="email"></label> | |
<input type="text" name="email" id="email" onblur="verifyEmail();" onfocus="clearErr('emailCk');" /></td> | |
<td><div id="emailCk" class="errMsg"></div></td> | |
</tr> | |
<tr> | |
<td align="center" colspan="3"><input type="button" name="reg" id="reg" value="注册" onclick="regist();"/></td> | |
</tr> | |
</table> | |
</form> | |
</body> | |
</html> | |
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...