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> ...