加上标单验证：form标签table 里的onblur onclick都不管用了去掉form标签事件都有效提交的时候事件也都有效

sinat_33199066 2015-11-30 05:56:49

<!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 type="text/css">
#sp{
color:red;}
#sp1{
display:none;}
</style>
<script type="text/javascript">
function sec(a){
a.border=2;
}
function unsec(a){
a.border=0;
}
function xs(){
var sp = document.getElementById("sp1");
sp.style.display="block";
}
function ok(a){
var sp = document.getElementById("sp1");
document.getElementById("tmg").src=a.src;
sp.style.display="none";
}
function username(){
var u = document.getElementById("username").value;
if(u.length<6){
document.getElementById("testusername").innerHTML="用户名必须大于6位";
document.getElementById("testusername").style.color="red";
return false;
}else{
document.getElementById("testusername").innerHTML="用户名格式合法";
document.getElementById("testusername").style.color="black";
return true;
}
}
function password(){
var u = document.getElementById("password").value;
flag = /^\w{6,}$/;
if(!flag.test(u)){
document.getElementById("testpassword").innerHTML="密码必须大于6位";
document.getElementById("testpassword").style.color="red";
return false;
}else{
document.getElementById("testpassword").innerHTML="密码格式合法";
document.getElementById("testpassword").style.color="black";
return true;
}
}
function password2(){
var u = document.getElementById("password").value;
var u2 = document.getElementById("password2").value;
flag = /^\w{6,}$/;
if(flag.test(u2)&&(u==u2)){
document.getElementById("testpassword2").innerHTML="密码格式合法";
document.getElementById("testpassword2").style.color="black";
return true;
}else if(!flag.test(u2)){
document.getElementById("testpassword2").innerHTML="密码必须大于6位";
document.getElementById("testpassword2").style.color="red";
return false;

}else{
document.getElementById("testpassword2").innerHTML="两次密码不一致";
document.getElementById("testpassword2").style.color="red";
return false;
}
}
function email(){
var u = document.getElementById("email").value;
flag = /^\w{6,}@\w{1,}(\.\w{2,3}){1,2}$/;
if(!flag.test(u)){
document.getElementById("testemail").innerHTML="邮箱格式不合法";
document.getElementById("testemail").style.color="red";
return false;
}else{
document.getElementById("testemail").innerHTML="邮箱格式合法";
document.getElementById("testemail").style.color="black";
return true;
}
}
function sex(){
var u = document.getElementsByName("sex");
var flag = false;
for(i=0;i<u.length;i++){
if(u[i].checked){
flag = true;
}
}
if(flag){
document.getElementById("testsex").innerHTML="";
document.getElementById("testsex").style.color="black";
return true;
}else{
document.getElementById("testsex").innerHTML="请选择一个性别";
document.getElementById("testsex").style.color="red";
return false;

}
}

function hobby(){
var hobby = document.getElementsByName("hobby");
var flag = false;
for(i=0;i<hobby.length;i++){
if(hobby[i].checked){
flag = true;
}
}
if(flag){
document.getElementById("testhobby").innerHTML="";
document.getElementById("testhobby").style.color="black";
return true;
}else{
document.getElementById("testhobby").innerHTML="请至少选择一个爱好";
document.getElementById("testhobby").style.color="red";
return false;

}
}
function settime(){
var year = document.getElementById("year");
var month = document.getElementById("month");
var day = document.getElementById("day");
var mv = month.value;
var n;
if(mv==1||mv==3||mv==5||mv==7||mv==8||mv==10||mv==12){
n = 31;
}else if(mv==2){
if((year.value%4==0&&year.value%100!=0)||year.value%400==0){
n = 29;
}else{
n = 28;
}
}else{
n = 30;
}

s = "";
for(i=1;i<=n;i++){
s += "<option value="+i+">"+i+"</option>";
}
day.innerHTML= s;
}

function test(){
if(username()&&password()&&password2()&&sex()&&email()&&hobby()){
return true;
}else{
alert("输入内容不合法");
return false;
}
}

</script>
</head>

<body>
<center>
<div style="font-family:'黑体'; font-size:26px">用户注册</div>
<form onsubmit="return test()" action="http://www.baidu.com">
<table>
<tr>
<td align="right">用户名：</td>
<td align="left">
<input type="text" name="username" id="username" size=20 onblur="username()" onkeyup="username()"/>
<span id="sp">*</span>
<span id="testusername"></span>
</td>
</tr>
<tr>
<td align="right">密码：</td>
<td align="left">
<input type="password" name="password" id="password" size=21 onblur="password()" onkeyup="password()"/>
<span id="sp">*</span>
<span id="testpassword"></span>
</td>
</tr>
<tr>
<td align="right">再次输入密码：</td>
<td align="left">
<input type="password" name="password2" id="password2" size=21 onblur="password2()" onkeyup="password2()"/>
<span id="sp">*</span>
<span id="testpassword2"></span>
</td>
</tr>
<tr>
<td align="right">邮箱：</td>
<td align="left">
<input type="text" name="email" id="email" size=20 onblur="email()" onkeyup="email()"/>
<span id="sp">*</span>
<span id="testemail"></span>
</td>
</tr>
<tr>
<td align="right">性别：</td>
<td align="left">
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
<span id="sp">*</span>
<span id="testsex"></span>
</td>
</tr>
<tr>
<td align="right">生日：</td>
<td align="left">
<select id="year" onchange="settime()">

</select>
年
<select id="month" onchange="settime()">

</select>
月
<select id="day">

</select>
日
<span id="sp">*</span>
</td>
</tr>
<tr>
<td align="right">爱好：</td>
<td align="left">
<input type="checkbox" name="hobby" id="hobby" value="唱歌"/>唱歌
<input type="checkbox" name="hobby" id="hobby" value="跳舞"/>跳舞
<input type="checkbox" name="hobby" id="hobby" value="睡觉"/>睡觉
<span id="sp">*</span>
<span id="testhobby"></span>
</td>
</tr>
<tr>
<td align="right">头像：</td>
<td align="left">
<img id="tmg" src="b1.bmp"/>
<input type="button" value="更换头像" onclick="xs()"/>
<span id="sp">*</span>
<br />
<span id="sp1">
<script type="text/javascript">
for(i=1;i<21;i++){
document.write("<img src= b"+i+".bmp" +""+" onmouseover=sec(this) onmouseout=unsec(this) onclick=ok(this)>");
if(i%5==0)document.write("<br>");
}
</script>
</span>
</td>
</tr>
<tr>
<td align="right">
<input type="submit" value="提交"/>
</td>
<td align="left"><input type="reset" /></td>
</tr>
</table>
</form>
</center>
<script type="text/javascript">
var year = document.getElementById("year");
var month = document.getElementById("month");
var day = document.getElementById("day");
var s = "";
var maxyear = new Date().getYear()+1900;
for(i=1900;i<=maxyear;i++){
s += "<option value="+i+">"+i+"</option>";
}
year.innerHTML= s;
s = "";
for(i=1;i<=12;i++){
s += "<option value="+i+">"+i+"</option>";
}
month.innerHTML = s;
s = "";
for(i=1;i<=31;i++){
s += "<option value="+i+">"+i+"</option>";
}
day.innerHTML= s;
</script>
</body>
</html>

...全文